@norskvideo/norsk-studio-built-ins 1.27.0-2025-03-21-b19a3aff → 1.27.0-2025-03-25-1268af9f

package/client/info.js

@@ -4705,8 +4705,13 @@ var require_util2 = __commonJS({
     exports.getObjectByType = getObjectByType;
     exports.getObjectByPath = getObjectByPath;
     exports.displayNodeId = displayNodeId;
-    exports.assertUnreachable = assertUnreachable15;
+    exports.assertUnreachable = assertUnreachable16;
     exports.waitForCondition = waitForCondition;
+    exports.streamMatchesExpected = streamMatchesExpected;
+    exports.shortStreamNameFromDefinition = shortStreamNameFromDefinition;
+    exports.shortStreamNameFromFilter = shortStreamNameFromFilter;
+    exports.streamNameFromDefinition = streamNameFromDefinition;
+    exports.streamNameFromFilter = streamNameFromFilter;
     function baseUrl(env, websocket) {
       const guess = new URL(window.location.origin);
       const base = env.studioUrlPrefix ? new URL(env.studioUrlPrefix, guess) : guess;
@@ -4770,7 +4775,7 @@ var require_util2 = __commonJS({
       }
       return document2.components[id]?.config?.displayName ?? id;
     }
-    function assertUnreachable15(_) {
+    function assertUnreachable16(_) {
       throw new Error("Didn't expect to get here");
     }
     async function waitForCondition(condition, timeout, interval) {
@@ -4789,6 +4794,70 @@ var require_util2 = __commonJS({
         }, timeout ?? 2e3);
       });
     }
+    function streamMatchesExpected(s, expectedStreams) {
+      const matchingStream = expectedStreams.find((expected) => {
+        if (expected.media !== s.message.case)
+          return false;
+        if (expected.programNumber !== void 0 && s.streamKey.programNumber !== expected.programNumber)
+          return false;
+        if (expected.streamId !== void 0 && s.streamKey.streamId !== expected.streamId)
+          return false;
+        if (expected.renditionName !== void 0 && s.streamKey.renditionName !== expected.renditionName)
+          return false;
+        if (expected.sourceName !== void 0 && s.streamKey.sourceName !== expected.sourceName)
+          return false;
+        return true;
+      });
+      return !!matchingStream;
+    }
+    function shortStreamNameFromDefinition(s) {
+      const components = [s.media];
+      if (s.sourceName)
+        components.push(s.sourceName.toString());
+      else if (s.programNumber)
+        components.push(s.programNumber.toString());
+      else if (s.streamId)
+        components.push(s.streamId.toString());
+      else if (s.renditionName)
+        components.push(s.renditionName.toString());
+      return components.join("-");
+    }
+    function shortStreamNameFromFilter(s) {
+      const components = [s.media];
+      if (s.sourceName)
+        components.push(s.sourceName.toString());
+      else if (s.programNumber)
+        components.push(s.programNumber.toString());
+      else if (s.streamId)
+        components.push(s.streamId.toString());
+      else if (s.renditionName)
+        components.push(s.renditionName.toString());
+      return components.join("-");
+    }
+    function streamNameFromDefinition(s) {
+      const components = [s.media];
+      if (s.sourceName)
+        components.push(s.sourceName.toString());
+      if (s.programNumber)
+        components.push(s.programNumber.toString());
+      if (s.streamId)
+        components.push(s.streamId.toString());
+      if (s.renditionName)
+        components.push(s.renditionName.toString());
+      return components.join("-");
+    }
+    function streamNameFromFilter(s) {
+      const components = [s.media];
+      if (s.sourceName)
+        components.push(s.sourceName.toString());
+      if (s.programNumber)
+        components.push(s.programNumber.toString());
+      if (s.streamId)
+        components.push(s.streamId.toString());
+      if (s.renditionName)
+        components.push(s.renditionName.toString());
+      return components.join("-");
+    }
   }
 });
 
@@ -6383,10 +6452,10 @@ function assertUnreachable5(_) {
   throw new Error("Didn't expect to get here");
 }
 
-// build/output.srt/info.js
+// build/output.srt-caller/info.js
 var import_util = __toESM(require_util2());
 
-// build/output.srt/summary-view.js
+// build/output.srt-caller/summary-view.js
 var import_jsx_runtime13 = __toESM(require_jsx_runtime());
 function SummaryView5({ state, sendCommand }) {
   const handleEnableOutput = () => {
@@ -6409,21 +6478,27 @@ function SummaryView5({ state, sendCommand }) {
 }
 var summary_view_default5 = SummaryView5;
 
-// build/output.srt/inline-view.js
+// build/output.srt-caller/inline-view.js
 var import_jsx_runtime14 = __toESM(require_jsx_runtime());
 function InlineView6({ 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" }) });
+  return (0, import_jsx_runtime14.jsx)("div", { className: "srt-output", children: state.enabled ? (0, import_jsx_runtime14.jsx)("div", { children: state.metrics.connectionCount == 0 ? (0, import_jsx_runtime14.jsx)("div", { className: "active text-red-300 dark:text-red-300", children: "Not Connected" }) : (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [(0, import_jsx_runtime14.jsx)("div", { className: "active text-green-500 dark:text-green-300", children: "Output enabled" }), (0, import_jsx_runtime14.jsxs)("div", { children: ["Sent: ", state.metrics.packetsSent] }), (0, import_jsx_runtime14.jsxs)("div", { children: ["Lost/Resent: ", state.metrics.packetsLost, "/", state.metrics.packetsResent] })] }) }) : (0, import_jsx_runtime14.jsx)("div", { className: "disabled text-gray-500 dark:text-gray-400", children: "Output disabled" }) });
 }
 var inline_view_default6 = InlineView6;
 
-// build/output.srt/info.js
+// build/output.srt-caller/srt-packet-metrics.js
+var import_jsx_runtime15 = __toESM(require_jsx_runtime());
+function MetricsView({ state }) {
+  return (0, import_jsx_runtime15.jsx)("div", { className: "srt-output", children: state.enabled ? (0, import_jsx_runtime15.jsx)("div", { children: state.metrics.connectionCount == 0 ? (0, import_jsx_runtime15.jsx)("div", { className: "active text-red-300 dark:text-red-300", children: "Not Connected" }) : (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [(0, import_jsx_runtime15.jsx)("div", { className: "active text-green-500 dark:text-green-300", children: "Output enabled" }), (0, import_jsx_runtime15.jsxs)("div", { children: ["Sent: ", state.metrics.packetsSent] }), (0, import_jsx_runtime15.jsxs)("div", { children: ["Lost/Resent: ", state.metrics.packetsLost, "/", state.metrics.packetsResent] })] }) }) : (0, import_jsx_runtime15.jsx)("div", { className: "disabled text-gray-500 dark:text-gray-400", children: "Output disabled" }) });
+}
+
+// build/output.srt-caller/info.js
 function info_default13(registration) {
   const { defineComponent, All, validation } = registration;
   const { Port, Hostname, JitterBuffer, SrtPassphrase, SrtStreamId } = validation;
   return defineComponent({
-    identifier: "output.srt",
+    identifier: "output.srt-caller",
     category: "output",
-    name: "SRT Egest",
+    name: "SRT Caller Egest",
     description: "This component manages the sending of SRT (Secure Reliable Transport) streams. It allows you to configure various settings to control how the SRT output is handled, including connection details, buffer settings, and delay options.",
     subscription: {
       accepts: {
@@ -6436,13 +6511,18 @@ function info_default13(registration) {
       return {
         port: desc.config.port?.toString() ?? "",
         host: desc.config.host,
-        mode: desc.config.mode,
         bufferDelayMs: desc.config.bufferDelayMs?.toString() ?? "none"
       };
     },
     runtime: {
       initialState: () => ({
-        enabled: true
+        enabled: true,
+        metrics: {
+          connectionCount: 0,
+          packetsLost: 0,
+          packetsResent: 0,
+          packetsSent: 0
+        }
       }),
       handleEvent(ev, state) {
         const evType = ev.type;
@@ -6453,49 +6533,169 @@ function info_default13(registration) {
           case "output-disabled":
             state.enabled = false;
             break;
+          case "metrics-updated":
+            state.metrics = ev.metrics;
+            break;
           default:
             (0, import_util.assertUnreachable)(evType);
         }
         return { ...state };
       },
       summary: summary_view_default5,
-      inline: inline_view_default6
+      inline: inline_view_default6,
+      metrics: [
+        {
+          title: "SRT Transmission",
+          view: MetricsView
+        }
+      ]
+    },
+    configForm: {
+      form: {
+        port: {
+          help: "The port this SRT output will connect to",
+          hint: {
+            type: "numeric",
+            validation: Port,
+            defaultValue: 5101
+          }
+        },
+        host: { help: "The IP address/Hostname this SRT output will connect to", hint: { type: "text", validation: Hostname, defaultValue: "127.0.0.1" } },
+        bufferDelayMs: { help: "How many milliseconds in the jitter buffer", hint: { type: "numeric", validation: JitterBuffer, defaultValue: 500 } },
+        avDelayMs: { help: "How many milliseconds to delay A/V to account for subtitles/ancillary data", hint: { type: "numeric", validation: JitterBuffer, defaultValue: 50 } },
+        passphrase: { help: "Optional: Authentication for this SRT output", hint: { type: "text", optional: true, validation: SrtPassphrase } },
+        streamId: { help: "Optional: StreamId to use when calling a remote listener", hint: { type: "text", optional: true, validation: SrtStreamId } },
+        socketOptions: {
+          help: "Socket Options",
+          hint: {
+            type: "form-item",
+            view: SocketConfiguration,
+            form: srt_socket_options_default(validation)
+          }
+        },
+        notes: {
+          help: "Additional notes about this component",
+          hint: { type: "text", optional: true }
+        }
+      }
+    }
+  });
+}
+
+// build/output.srt-listener/info.js
+var import_util2 = __toESM(require_util2());
+
+// build/output.srt-listener/summary-view.js
+var import_jsx_runtime16 = __toESM(require_jsx_runtime());
+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_runtime16.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, import_jsx_runtime16.jsx)("span", { className: `inline-block w-2 h-2 rounded-full ${state.enabled ? "bg-green-500" : "bg-red-500"}` }), (0, import_jsx_runtime16.jsxs)("span", { className: "text-sm", children: ["Status: ", state.enabled ? "Enabled" : "Disabled"] })] }), (0, import_jsx_runtime16.jsx)("div", { children: state.enabled ? (0, import_jsx_runtime16.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_runtime16.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 summary_view_default6 = SummaryView6;
+
+// build/output.srt-listener/inline-view.js
+var import_jsx_runtime17 = __toESM(require_jsx_runtime());
+function InlineView7({ state }) {
+  return (0, import_jsx_runtime17.jsx)("div", { className: "srt-output", children: state.enabled ? state.metrics.connectionCount == 0 ? (0, import_jsx_runtime17.jsx)("div", { className: "active text-red-300 dark:text-red-300", children: "No connections" }) : (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [(0, import_jsx_runtime17.jsx)("div", { className: "active text-green-500 dark:text-green-300", children: "Output enabled" }), (0, import_jsx_runtime17.jsxs)("div", { children: ["Connections: ", state.metrics.connectionCount] }), (0, import_jsx_runtime17.jsxs)("div", { children: ["Sent: ", state.metrics.packetsSent.reduce((a, i) => a + i, 0)] }), (0, import_jsx_runtime17.jsxs)("div", { children: ["Lost/Resent: ", state.metrics.packetsLost.reduce((a, i) => a + i, 0), "/", state.metrics.packetsResent.reduce((a, i) => a + i, 0)] })] }) : (0, import_jsx_runtime17.jsx)("div", { className: "disabled text-gray-500 dark:text-gray-400", children: "Output disabled" }) });
+}
+var inline_view_default7 = InlineView7;
+
+// build/output.srt-listener/srt-packet-metrics.js
+var import_jsx_runtime18 = __toESM(require_jsx_runtime());
+function MetricsView2({ state }) {
+  return (0, import_jsx_runtime18.jsx)("div", { className: "srt-output", children: state.enabled ? state.metrics.connectionCount == 0 ? (0, import_jsx_runtime18.jsx)("div", { className: "active text-red-300 dark:text-red-300", children: "No connections" }) : (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [(0, import_jsx_runtime18.jsx)("div", { className: "active text-green-500 dark:text-green-300", children: "Output enabled" }), (0, import_jsx_runtime18.jsx)("div", { className: "divide-y", children: state.metrics.packetsSent.map((p, i) => {
+    return (0, import_jsx_runtime18.jsxs)("div", { className: "sm:grid sm:grid-cols-2 mt-2", children: [(0, import_jsx_runtime18.jsx)("dt", { className: "underline", children: "Connection" }), (0, import_jsx_runtime18.jsx)("dd", { className: "", children: i }), (0, import_jsx_runtime18.jsx)("dt", { className: "", children: "Sent" }), (0, import_jsx_runtime18.jsx)("dd", { className: "", children: p }), (0, import_jsx_runtime18.jsx)("dt", { className: "", children: "Resent" }), (0, import_jsx_runtime18.jsx)("dd", { className: "", children: state.metrics.packetsResent[i] }), (0, import_jsx_runtime18.jsx)("dt", { className: "", children: "Lost" }), (0, import_jsx_runtime18.jsx)("dd", { className: "", children: state.metrics.packetsLost[i] })] }, i);
+  }) }), "."] }) : (0, import_jsx_runtime18.jsx)("div", { className: "disabled text-gray-500 dark:text-gray-400", children: "Output disabled" }) });
+}
+
+// build/output.srt-listener/info.js
+function info_default14(registration) {
+  const { defineComponent, All, validation } = registration;
+  const { Port, Hostname, JitterBuffer, SrtPassphrase, SrtStreamId } = validation;
+  return defineComponent({
+    identifier: "output.srt-listener",
+    category: "output",
+    name: "SRT Listener Egest",
+    description: "This component manages the sending of SRT (Secure Reliable Transport) streams. It allows you to configure various settings to control how the SRT output is handled, including connection details, buffer settings, and delay options.",
+    subscription: {
+      accepts: {
+        type: "dynamic-streams",
+        mode: "any",
+        streams: () => All.map((media) => ({ media }))
+      }
+    },
+    display: (desc) => {
+      return {
+        port: desc.config.port?.toString() ?? "",
+        host: desc.config.host,
+        bufferDelayMs: desc.config.bufferDelayMs?.toString() ?? "none"
+      };
+    },
+    runtime: {
+      initialState: () => ({
+        enabled: true,
+        metrics: {
+          connectionCount: 0,
+          packetsLost: [],
+          packetsResent: [],
+          packetsSent: []
+        }
+      }),
+      handleEvent(ev, state) {
+        const evType = ev.type;
+        switch (evType) {
+          case "output-enabled":
+            state.enabled = true;
+            break;
+          case "output-disabled":
+            state.enabled = false;
+            break;
+          case "metrics-updated":
+            state.metrics = ev.metrics;
+            break;
+          default:
+            (0, import_util2.assertUnreachable)(evType);
+        }
+        return { ...state };
+      },
+      summary: summary_view_default6,
+      inline: inline_view_default7,
+      metrics: [
+        { title: "SRT Transmission", view: MetricsView2 }
+      ]
     },
     configForm: {
       form: {
         port: {
-          help: "The port this SRT output will connect to or listen on",
+          help: "The port this SRT output will listen on",
           hint: {
             type: "numeric",
             validation: Port,
             defaultValue: 5101,
             global: {
               constraint: "unique",
-              key: "port",
-              include: (cfg) => cfg.mode == "listener"
+              key: "port"
             }
           }
         },
-        host: { help: "The IP address/Hostname this SRT output will connect to or listen on", hint: { type: "text", validation: Hostname, defaultValue: "0.0.0.0" } },
+        host: { help: "The IP address/Hostname this SRT output will listen on", hint: { type: "text", validation: Hostname, defaultValue: "0.0.0.0" } },
         bufferDelayMs: { help: "How many milliseconds in the jitter buffer", hint: { type: "numeric", validation: JitterBuffer, defaultValue: 500 } },
         avDelayMs: { help: "How many milliseconds to delay A/V to account for subtitles/ancillary data", hint: { type: "numeric", validation: JitterBuffer, defaultValue: 50 } },
-        mode: {
-          help: "Whether this SRT Output is calling a remote host, or listening on this host",
-          hint: {
-            defaultValue: "listener",
-            type: "select",
-            options: [
-              {
-                value: "listener",
-                display: "Listener"
-              },
-              {
-                value: "caller",
-                display: "Caller"
-              }
-            ]
-          }
-        },
         passphrase: { help: "Optional: Authentication for this SRT output", hint: { type: "text", optional: true, validation: SrtPassphrase } },
         streamId: { help: "Optional: StreamId to use when calling a remote listener", hint: { type: "text", optional: true, validation: SrtStreamId } },
         socketOptions: {
@@ -6516,38 +6716,38 @@ function info_default13(registration) {
 }
 
 // build/output.statistics/inline-view.js
-var import_jsx_runtime15 = __toESM(require_jsx_runtime());
-function InlineView7({ state }) {
+var import_jsx_runtime19 = __toESM(require_jsx_runtime());
+function InlineView8({ state }) {
   if (!state.previous)
-    return (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {});
+    return (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, {});
   const format = (stat) => Math.floor(stat).toLocaleString("en-US", { maximumFractionDigits: 0 });
-  return (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: state.previous.allStreams.map((s, i) => {
+  return (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: state.previous.allStreams.map((s, i) => {
     const metaCase = s.metadata.case;
     switch (metaCase) {
       case "audio":
-        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);
+        return (0, import_jsx_runtime19.jsxs)("div", { children: [(0, import_jsx_runtime19.jsxs)("div", { children: ["StreamKey: ", streamKey(s.streamKey)] }), (0, import_jsx_runtime19.jsxs)("div", { children: ["Bitrate: ", format(s.bitrate), "bps"] })] }, i);
       case "video":
-        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);
+        return (0, import_jsx_runtime19.jsxs)("div", { children: [(0, import_jsx_runtime19.jsxs)("div", { children: ["StreamKey: ", streamKey(s.streamKey)] }), (0, import_jsx_runtime19.jsxs)("div", { children: ["Bitrate: ", format(s.bitrate), "bps"] })] }, i);
       case "ancillary":
-        return (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {});
+        return (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, {});
       case "subtitle":
-        return (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {});
+        return (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, {});
       case "playlist":
-        return (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {});
+        return (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, {});
       case void 0:
-        return (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {});
+        return (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, {});
       default:
-        assertUnreachable7(metaCase);
+        assertUnreachable8(metaCase);
     }
   }) });
 }
 function streamKey(streamKey2) {
   return streamKey2.streamId.toString();
 }
-var inline_view_default7 = InlineView7;
+var inline_view_default8 = InlineView8;
 
 // build/output.statistics/info.js
-function info_default14({ defineComponent, All }) {
+function info_default15({ defineComponent, All }) {
   return defineComponent({
     identifier: "output.statistics",
     category: "output",
@@ -6571,11 +6771,11 @@ function info_default14({ defineComponent, All }) {
             state.previous = ev.summary;
             break;
           default:
-            assertUnreachable7(evType);
+            assertUnreachable8(evType);
         }
         return { ...state };
       },
-      inline: inline_view_default7
+      inline: inline_view_default8
     },
     configForm: {
       form: {
@@ -6584,12 +6784,12 @@ function info_default14({ defineComponent, All }) {
     }
   });
 }
-function assertUnreachable7(_) {
+function assertUnreachable8(_) {
   throw new Error("Didn't expect to get here");
 }
 
 // build/output.twitch/info.js
-function info_default15(r) {
+function info_default16(r) {
   const { validation: { Z } } = r;
   return defineRtmpOutputComponent(r, {
     identifier: "output.twitch",
@@ -6617,7 +6817,7 @@ function info_default15(r) {
 }
 
 // build/output.udpTs/info.js
-function info_default16({ defineComponent, All, validation: { Port, Hostname, JitterBuffer, Iface, Z } }) {
+function info_default17({ defineComponent, All, validation: { Port, Hostname, JitterBuffer, Iface, Z } }) {
   return defineComponent({
     identifier: "output.udpTs",
     category: "output",
@@ -6657,10 +6857,10 @@ function info_default16({ defineComponent, All, validation: { Port, Hostname, Ji
 var import_config3 = __toESM(require_config());
 
 // build/output.whep/inline-view.js
-var import_jsx_runtime16 = __toESM(require_jsx_runtime());
+var import_jsx_runtime20 = __toESM(require_jsx_runtime());
 var import_react3 = __toESM(require_react());
 var import_webrtc_client2 = __toESM(require_webrtc_client());
-function InlineView8({ state, config, raise }) {
+function InlineView9({ state, config, raise }) {
   const url = state.url;
   const id = config.id;
   const [showPreview, setShowPreview] = (0, import_react3.useState)(config.showPreview ?? true);
@@ -6702,19 +6902,19 @@ function InlineView8({ state, config, raise }) {
   }, [config.showPreview]);
   raise && (0, import_react3.useEffect)(raise, []);
   if (!url)
-    return (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: "..." });
+    return (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: "..." });
   const videoStyles = `
     #whep-${id} video::-webkit-media-controls-play-button { 
       display: none; 
     }
   `;
-  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" })] });
+  return (0, import_jsx_runtime20.jsxs)("div", { className: "whep-container", children: [(0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, import_jsx_runtime20.jsx)("input", { type: "checkbox", id: `video-toggle-${id}`, checked: showPreview, onChange: (e) => setShowPreview(e.target.checked), className: "h-4 w-4" }), (0, import_jsx_runtime20.jsx)("label", { htmlFor: `video-toggle-${id}`, className: "text-sm", children: "Show Preview" })] }), showPreview ? (0, import_jsx_runtime20.jsx)("div", { className: "whep-video", id: `whep-${id}`, children: (0, import_jsx_runtime20.jsx)("style", { children: videoStyles }) }) : (0, import_jsx_runtime20.jsx)("div", { className: "whep-video bg-black flex items-center justify-center text-white h-full", children: "Preview turned off" })] });
 }
-var inline_view_default8 = InlineView8;
+var inline_view_default9 = InlineView9;
 
 // build/output.whep/summary-view.js
-var import_jsx_runtime17 = __toESM(require_jsx_runtime());
-function SummaryView6({ state, sendCommand }) {
+var import_jsx_runtime21 = __toESM(require_jsx_runtime());
+function SummaryView7({ state, sendCommand }) {
   const handleEnableOutput = () => {
     void enableOutput();
   };
@@ -6731,12 +6931,12 @@ function SummaryView6({ state, 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" }) })] }) });
+  return (0, import_jsx_runtime21.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, import_jsx_runtime21.jsx)("span", { className: `inline-block w-2 h-2 rounded-full ${state.enabled ? "bg-blue-500" : "bg-red-500"}` }), (0, import_jsx_runtime21.jsxs)("span", { className: "text-sm", children: ["Status: ", state.enabled ? "Enabled" : "Disabled"] })] }), (0, import_jsx_runtime21.jsx)("div", { children: state.enabled ? (0, import_jsx_runtime21.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_runtime21.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 summary_view_default6 = SummaryView6;
+var summary_view_default7 = SummaryView7;
 
 // build/output.whep/info.js
-function info_default17(R) {
+function info_default18(R) {
   const { defineComponent, validation: { JitterBuffer } } = R;
   return defineComponent({
     identifier: "output.whep",
@@ -6769,12 +6969,12 @@ function info_default17(R) {
             state.enabled = false;
             break;
           default:
-            assertUnreachable8(evType);
+            assertUnreachable9(evType);
         }
         return { ...state };
       },
-      inline: inline_view_default8,
-      summary: summary_view_default6
+      inline: inline_view_default9,
+      summary: summary_view_default7
     },
     configForm: {
       global: {
@@ -6791,12 +6991,12 @@ function info_default17(R) {
     }
   });
 }
-function assertUnreachable8(_) {
+function assertUnreachable9(_) {
   throw new Error("Didn't expect to get here");
 }
 
 // build/output.youtube/info.js
-function info_default18(r) {
+function info_default19(r) {
   const { validation: { Z } } = r;
   return defineRtmpOutputComponent(r, {
     identifier: "output.youtube",
@@ -6827,13 +7027,13 @@ function info_default18(r) {
 var import_client_types2 = __toESM(require_client_types());
 
 // build/processor.audioEncoder/form-views.js
-var import_jsx_runtime18 = __toESM(require_jsx_runtime());
+var import_jsx_runtime22 = __toESM(require_jsx_runtime());
 function CodecConfiguration(cfg) {
-  return (0, import_jsx_runtime18.jsxs)("div", { className: "grid grid-flow-row-dense grid-cols-3 text-sm", children: [(0, import_jsx_runtime18.jsx)("div", { className: "col-span-1", children: "Codec" }), (0, import_jsx_runtime18.jsx)("div", { className: "col-span-2", children: cfg.kind }), cfg.kind === "aac" ? (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [(0, import_jsx_runtime18.jsx)("div", { className: "col-span-1", children: "Profile" }), (0, import_jsx_runtime18.jsx)("div", { className: "col-span-2", children: cfg.profile }), (0, import_jsx_runtime18.jsx)("div", { className: "col-span-1", children: "Sample Rate" }), (0, import_jsx_runtime18.jsx)("div", { className: "col-span-2", children: cfg.sampleRate })] }) : null] });
+  return (0, import_jsx_runtime22.jsxs)("div", { className: "grid grid-flow-row-dense grid-cols-3 text-sm", children: [(0, import_jsx_runtime22.jsx)("div", { className: "col-span-1", children: "Codec" }), (0, import_jsx_runtime22.jsx)("div", { className: "col-span-2", children: cfg.kind }), cfg.kind === "aac" ? (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [(0, import_jsx_runtime22.jsx)("div", { className: "col-span-1", children: "Profile" }), (0, import_jsx_runtime22.jsx)("div", { className: "col-span-2", children: cfg.profile }), (0, import_jsx_runtime22.jsx)("div", { className: "col-span-1", children: "Sample Rate" }), (0, import_jsx_runtime22.jsx)("div", { className: "col-span-2", children: cfg.sampleRate })] }) : null] });
 }
 
 // build/processor.audioEncoder/info.js
-function info_default19({ defineComponent, validation: { Z } }) {
+function info_default20({ defineComponent, validation: { Z } }) {
   const format = (stat) => Math.floor(stat).toLocaleString("en-US", { maximumFractionDigits: 0 });
   const Hz = (v) => ({ display: `${format(v)}Hz`, value: v });
   return defineComponent({
@@ -6966,16 +7166,16 @@ function info_default19({ defineComponent, validation: { Z } }) {
 var import_config4 = __toESM(require_config());
 
 // build/processor.browserOverlay/summary-view.js
-var import_jsx_runtime19 = __toESM(require_jsx_runtime());
+var import_jsx_runtime23 = __toESM(require_jsx_runtime());
 var import_react4 = __toESM(require_react());
-function SummaryView7({ state, sendCommand }) {
+function SummaryView8({ state, sendCommand }) {
   const [url, setUrl] = (0, import_react4.useState)(state.currentUrl);
   const [enabled, setEnabled] = (0, import_react4.useState)(state.enabled);
   const stateChanged = (0, import_react4.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_runtime19.jsxs)("div", { className: "space-y-3 mb-5", children: [(0, import_jsx_runtime19.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime19.jsxs)("div", { className: "mb-5", children: [(0, import_jsx_runtime19.jsx)("label", { htmlFor: "url", className: "mb-2 mr-2 text-sm font-medium text-gray-900 dark:text-white", children: "URL" }), (0, import_jsx_runtime19.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_runtime19.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime19.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [(0, import_jsx_runtime19.jsx)("span", { className: "me-3 text-sm font-medium text-gray-900 dark:text-gray-300", children: "Enabled" }), (0, import_jsx_runtime19.jsx)("input", { type: "checkbox", checked: enabled, onChange: (e) => setEnabled(e.target.checked), 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" })] }) }), (0, import_jsx_runtime19.jsx)("button", { type: "button", className: `${buttonClass} ${!stateChanged ? "opacity-50 cursor-not-allowed" : ""}`, disabled: !stateChanged, onClick: () => {
+  return (0, import_jsx_runtime23.jsxs)("div", { className: "space-y-3 mb-5", children: [(0, import_jsx_runtime23.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime23.jsxs)("div", { className: "mb-5", children: [(0, import_jsx_runtime23.jsx)("label", { htmlFor: "url", className: "mb-2 mr-2 text-sm font-medium text-gray-900 dark:text-white", children: "URL" }), (0, import_jsx_runtime23.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_runtime23.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime23.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [(0, import_jsx_runtime23.jsx)("span", { className: "me-3 text-sm font-medium text-gray-900 dark:text-gray-300", children: "Enabled" }), (0, import_jsx_runtime23.jsx)("input", { type: "checkbox", checked: enabled, onChange: (e) => setEnabled(e.target.checked), className: "sr-only peer" }), (0, import_jsx_runtime23.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_runtime23.jsx)("button", { type: "button", className: `${buttonClass} ${!stateChanged ? "opacity-50 cursor-not-allowed" : ""}`, disabled: !stateChanged, onClick: () => {
     if (url !== state.currentUrl) {
       sendCommand({ type: "change-url", url });
     }
@@ -6988,17 +7188,17 @@ function SummaryView7({ state, sendCommand }) {
     }
   }, children: "Commit" })] });
 }
-var summary_view_default7 = SummaryView7;
+var summary_view_default8 = SummaryView8;
 
 // build/processor.browserOverlay/inline-view.js
-var import_jsx_runtime20 = __toESM(require_jsx_runtime());
-function InlineView9({ state, config }) {
-  return (0, import_jsx_runtime20.jsx)("div", { id: `browser-overlay-${config.id}`, children: (0, import_jsx_runtime20.jsxs)("div", { className: "w-64 grid grid-cols-[min-content,1fr] gap-2", children: [(0, import_jsx_runtime20.jsx)("div", { children: "URL:" }), (0, import_jsx_runtime20.jsx)("div", { className: "truncate", children: state.currentUrl }), (0, import_jsx_runtime20.jsx)("div", { children: "Enabled:" }), (0, import_jsx_runtime20.jsx)("div", { children: (0, import_jsx_runtime20.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [(0, import_jsx_runtime20.jsx)("input", { type: "checkbox", checked: state.enabled, disabled: true, className: "sr-only peer" }), (0, import_jsx_runtime20.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_runtime24 = __toESM(require_jsx_runtime());
+function InlineView10({ state, config }) {
+  return (0, import_jsx_runtime24.jsx)("div", { id: `browser-overlay-${config.id}`, children: (0, import_jsx_runtime24.jsxs)("div", { className: "w-64 grid grid-cols-[min-content,1fr] gap-2", children: [(0, import_jsx_runtime24.jsx)("div", { children: "URL:" }), (0, import_jsx_runtime24.jsx)("div", { className: "truncate", children: state.currentUrl }), (0, import_jsx_runtime24.jsx)("div", { children: "Enabled:" }), (0, import_jsx_runtime24.jsx)("div", { children: (0, import_jsx_runtime24.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [(0, import_jsx_runtime24.jsx)("input", { type: "checkbox", checked: state.enabled, disabled: true, className: "sr-only peer" }), (0, import_jsx_runtime24.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 inline_view_default9 = InlineView9;
+var inline_view_default10 = InlineView10;
 
 // build/processor.browserOverlay/info.js
-function info_default20({ defineComponent, validation: { Z } }) {
+function info_default21({ defineComponent, validation: { Z } }) {
   return defineComponent({
     identifier: "processor.browserOverlay",
     category: "processor",
@@ -7024,8 +7224,8 @@ function info_default20({ defineComponent, validation: { Z } }) {
       };
     },
     runtime: {
-      summary: summary_view_default7,
-      inline: inline_view_default9,
+      summary: summary_view_default8,
+      inline: inline_view_default10,
       initialState: () => ({
         currentUrl: "",
         enabled: true
@@ -7040,7 +7240,7 @@ function info_default20({ defineComponent, validation: { Z } }) {
           case "disabled":
             return { ...state, enabled: false };
           default:
-            assertUnreachable9(evType);
+            assertUnreachable10(evType);
         }
       }
     },
@@ -7055,12 +7255,12 @@ function info_default20({ defineComponent, validation: { Z } }) {
     }
   });
 }
-function assertUnreachable9(_) {
+function assertUnreachable10(_) {
   throw new Error("Didn't expect to get here");
 }
 
 // build/processor.cascadingSwitch/source-selection.js
-var import_jsx_runtime21 = __toESM(require_jsx_runtime());
+var import_jsx_runtime25 = __toESM(require_jsx_runtime());
 var import_react5 = __toESM(require_react());
 function OrderInput(props) {
   (0, import_react5.useEffect)(() => {
@@ -7068,10 +7268,10 @@ function OrderInput(props) {
   }, [props.defaultValue]);
   const [value, setValue] = (0, import_react5.useState)(props.defaultValue ?? []);
   if (value.length == 0) {
-    return (0, import_jsx_runtime21.jsx)("p", { className: "node-editor-helper-text", children: "Sources will appear here when subscriptions have been added to this node" });
+    return (0, import_jsx_runtime25.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_runtime21.jsx)("div", { id: props.id, children: (0, import_jsx_runtime21.jsx)("ul", { children: value.map((v, ix) => {
-      return (0, import_jsx_runtime21.jsxs)("li", { className: "flex", children: [(0, import_jsx_runtime21.jsx)("span", { className: "node-editor-label flex-grow", children: v }), ix == 0 ? (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, {}) : (0, import_jsx_runtime21.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_runtime21.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18" }) }), ix == value.length - 1 ? (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, {}) : (0, import_jsx_runtime21.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_runtime21.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3" }) })] }, v);
+    return (0, import_jsx_runtime25.jsx)("div", { id: props.id, children: (0, import_jsx_runtime25.jsx)("ul", { children: value.map((v, ix) => {
+      return (0, import_jsx_runtime25.jsxs)("li", { className: "flex", children: [(0, import_jsx_runtime25.jsx)("span", { className: "node-editor-label flex-grow", children: v }), ix == 0 ? (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, {}) : (0, import_jsx_runtime25.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_runtime25.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18" }) }), ix == value.length - 1 ? (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, {}) : (0, import_jsx_runtime25.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_runtime25.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3" }) })] }, v);
     }) }) });
   }
   function moveUp(ix) {
@@ -7096,17 +7296,17 @@ function OrderInput(props) {
 var source_selection_default = OrderInput;
 
 // build/processor.cascadingSwitch/inline-view.js
-var import_jsx_runtime22 = __toESM(require_jsx_runtime());
+var import_jsx_runtime26 = __toESM(require_jsx_runtime());
 var activeClasses = "active text-green-500 dark:text-green-300";
 var availableClasses = "available text-green-500 dark:text-green-300";
 var inactiveClasses = "inactive text-orange-500 dark:text-orange-300";
-function InlineView10({ state, config }) {
-  return (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [(0, import_jsx_runtime22.jsx)("h5", { children: "Sources" }), (0, import_jsx_runtime22.jsxs)("ul", { children: [config.sources.map((s, i) => state.activeSource == s ? (0, import_jsx_runtime22.jsxs)("li", { className: activeClasses, children: [s, " <--"] }, i) : state.availableSources.includes(s) ? (0, import_jsx_runtime22.jsxs)("li", { className: availableClasses, children: [s, " (available)"] }, i) : (0, import_jsx_runtime22.jsxs)("li", { className: inactiveClasses, children: [s, " (inactive)"] }, i)), (0, import_jsx_runtime22.jsx)("li", { className: state.activeSource == "fallback" ? activeClasses : availableClasses, children: "fallback" }, "fallback")] })] });
+function InlineView11({ state, config }) {
+  return (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [(0, import_jsx_runtime26.jsx)("h5", { children: "Sources" }), (0, import_jsx_runtime26.jsxs)("ul", { children: [config.sources.map((s, i) => state.activeSource == s ? (0, import_jsx_runtime26.jsxs)("li", { className: activeClasses, children: [s, " <--"] }, i) : state.availableSources.includes(s) ? (0, import_jsx_runtime26.jsxs)("li", { className: availableClasses, children: [s, " (available)"] }, i) : (0, import_jsx_runtime26.jsxs)("li", { className: inactiveClasses, children: [s, " (inactive)"] }, i)), (0, import_jsx_runtime26.jsx)("li", { className: state.activeSource == "fallback" ? activeClasses : availableClasses, children: "fallback" }, "fallback")] })] });
 }
-var inline_view_default10 = InlineView10;
+var inline_view_default11 = InlineView11;
 
 // build/processor.cascadingSwitch/info.js
-function info_default21({ defineComponent, Av, common: { Resolutions, FrameRates } }) {
+function info_default22({ defineComponent, Av, common: { Resolutions, FrameRates } }) {
   return defineComponent({
     identifier: "processor.cascadingSwitch",
     category: "processor",
@@ -7185,12 +7385,12 @@ function info_default21({ defineComponent, Av, common: { Resolutions, FrameRates
             state.availableSources.splice(state.availableSources.indexOf(ev.source), 1);
             return { ...state };
           default:
-            assertUnreachable10(evType);
+            assertUnreachable11(evType);
         }
       },
-      inline: inline_view_default10,
-      summary: inline_view_default10,
-      fullscreen: inline_view_default10
+      inline: inline_view_default11,
+      summary: inline_view_default11,
+      fullscreen: inline_view_default11
     },
     configForm: {
       form: {
@@ -7237,7 +7437,7 @@ function info_default21({ defineComponent, Av, common: { Resolutions, FrameRates
     }
   });
 }
-function assertUnreachable10(_) {
+function assertUnreachable11(_) {
   throw new Error("Didn't expect to get here");
 }
 
@@ -7245,13 +7445,13 @@ function assertUnreachable10(_) {
 var import_config5 = __toESM(require_config());
 
 // build/processor.fixedLadder/rung-view.js
-var import_jsx_runtime23 = __toESM(require_jsx_runtime());
+var import_jsx_runtime27 = __toESM(require_jsx_runtime());
 function rung_view_default(rung) {
-  return (0, import_jsx_runtime23.jsx)("div", { className: "text-gray-900 dark:text-white", children: rung.name });
+  return (0, import_jsx_runtime27.jsx)("div", { className: "text-gray-900 dark:text-white", children: rung.name });
 }
 
 // build/processor.fixedLadder/codec-editor.js
-var import_jsx_runtime24 = __toESM(require_jsx_runtime());
+var import_jsx_runtime28 = __toESM(require_jsx_runtime());
 var import_react6 = __toESM(require_react());
 function CodecEditor(props) {
   (0, import_react6.useEffect)(() => {
@@ -7267,7 +7467,7 @@ function CodecEditor(props) {
       target.style.height = target.scrollHeight + "px";
     }
   }, []);
-  return (0, import_jsx_runtime24.jsx)("textarea", { ref: textAreaRef, className: "w-full min-h-fit bg-white text-gray-900 dark:text-white dark:bg-black", id: props.id, onChange: (e) => {
+  return (0, import_jsx_runtime28.jsx)("textarea", { ref: textAreaRef, className: "w-full min-h-fit bg-white text-gray-900 dark:text-white dark:bg-black", id: props.id, onChange: (e) => {
     const target = e.currentTarget;
     try {
       const codec = JSON.parse(target.value);
@@ -7279,13 +7479,13 @@ function CodecEditor(props) {
 }
 
 // build/processor.fixedLadder/codec-view.js
-var import_jsx_runtime25 = __toESM(require_jsx_runtime());
+var import_jsx_runtime29 = __toESM(require_jsx_runtime());
 function CodecEditor2(props) {
-  return (0, import_jsx_runtime25.jsxs)("div", { className: "text-gray-900 dark:text-white", children: [props?.width, "x", props?.height] });
+  return (0, import_jsx_runtime29.jsxs)("div", { className: "text-gray-900 dark:text-white", children: [props?.width, "x", props?.height] });
 }
 
 // build/processor.fixedLadder/info.js
-function info_default22({ defineComponent, common: { FrameRates } }) {
+function info_default23({ defineComponent, common: { FrameRates } }) {
   return defineComponent({
     identifier: "processor.fixedLadder",
     category: "processor",
@@ -7446,7 +7646,7 @@ function createSoftwareRung(rung) {
     case "h264_320x180":
       return createRungImpl({ name: rung, threads: 1, bitrate: 800 });
     default:
-      return assertUnreachable11(rung);
+      return assertUnreachable12(rung);
   }
 }
 function createMa35dRung(rung) {
@@ -7460,7 +7660,7 @@ function createMa35dRung(rung) {
     case "h264_320x180":
       return createMa35DH264RungImpl({ name: rung, bitrate: 1e3 });
     default:
-      return assertUnreachable11(rung);
+      return assertUnreachable12(rung);
   }
 }
 function createNvidiaRung(rung) {
@@ -7474,7 +7674,7 @@ function createNvidiaRung(rung) {
     case "h264_320x180":
       return createNvidiaRungImpl({ name: rung, bitrate: 8e5 });
     default:
-      return assertUnreachable11(rung);
+      return assertUnreachable12(rung);
   }
 }
 function createQuadraRung(rung) {
@@ -7488,7 +7688,7 @@ function createQuadraRung(rung) {
     case "h264_320x180":
       return createQuadraRungImpl({ name: rung, bitrate: 8e5 });
     default:
-      return assertUnreachable11(rung);
+      return assertUnreachable12(rung);
   }
 }
 function createLoganRung(rung) {
@@ -7502,7 +7702,7 @@ function createLoganRung(rung) {
     case "h264_320x180":
       return createLoganRungImpl({ name: rung, bitrate: 8e5 });
     default:
-      return assertUnreachable11(rung);
+      return assertUnreachable12(rung);
   }
 }
 function createRungImpl({ name, threads, bitrate }) {
@@ -7603,12 +7803,12 @@ function rungWidth(rungName) {
 function rungHeight(rungName) {
   return parseInt(rungName.split("_")[1].split(`x`)[1]);
 }
-function assertUnreachable11(_) {
+function assertUnreachable12(_) {
   throw new Error("Didn't expect to get here");
 }
 
 // build/processor.makeProgram/info.js
-function info_default23({ defineComponent, All, validation: { Z } }) {
+function info_default24({ defineComponent, All, validation: { Z } }) {
   return defineComponent({
     identifier: "processor.makeProgram",
     category: "processor",
@@ -7689,7 +7889,7 @@ function info_default23({ defineComponent, All, validation: { Z } }) {
 var import_config6 = __toESM(require_config());
 
 // build/processor.onscreenGraphic/image-selection.js
-var import_jsx_runtime26 = __toESM(require_jsx_runtime());
+var import_jsx_runtime30 = __toESM(require_jsx_runtime());
 var import_react7 = __toESM(require_react());
 function GraphicSelection(props) {
   const [loading, setLoading] = (0, import_react7.useState)(true);
@@ -7710,16 +7910,16 @@ function GraphicSelection(props) {
       }
     };
     fn().catch(console.error);
-  }, [props.urls?.staticUrl]);
+  }, [props.urls?.staticUrl?.toString()]);
   const [graphcs, setGraphics] = (0, import_react7.useState)([]);
   if (loading) {
-    return (0, import_jsx_runtime26.jsx)("div", { children: "Loading.." });
+    return (0, import_jsx_runtime30.jsx)("div", { children: "Loading.." });
   }
   if (graphcs.length == 0) {
-    return (0, import_jsx_runtime26.jsx)("div", { children: "No graphics loaded" });
+    return (0, import_jsx_runtime30.jsx)("div", { children: "No graphics loaded" });
   }
-  return (0, import_jsx_runtime26.jsx)("div", { children: (0, import_jsx_runtime26.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime26.jsx)("option", { value: "", children: "---" }, "empty"), graphcs.map((o, i) => {
-    return (0, import_jsx_runtime26.jsx)("option", { value: o, children: o }, i);
+  return (0, import_jsx_runtime30.jsx)("div", { children: (0, import_jsx_runtime30.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime30.jsx)("option", { value: "", children: "---" }, "empty"), graphcs.map((o, i) => {
+    return (0, import_jsx_runtime30.jsx)("option", { value: o, children: o }, i);
   })] }) });
   function myOnChange(e) {
     props.onChanged(e.target.value);
@@ -7728,9 +7928,9 @@ function GraphicSelection(props) {
 var image_selection_default = GraphicSelection;
 
 // build/processor.onscreenGraphic/summary-view.js
-var import_jsx_runtime27 = __toESM(require_jsx_runtime());
+var import_jsx_runtime31 = __toESM(require_jsx_runtime());
 var import_react8 = __toESM(require_react());
-function SummaryView8({ state, sendCommand, urls }) {
+function SummaryView9({ state, sendCommand, urls }) {
   const [graphic, setGraphic] = (0, import_react8.useState)(state.activeGraphic?.file);
   const [position, setPosition] = (0, import_react8.useState)(state.activeGraphic?.position ?? { type: "named", position: "topleft" });
   const [graphics, setGraphics] = (0, import_react8.useState)([]);
@@ -7756,7 +7956,7 @@ function SummaryView8({ state, sendCommand, urls }) {
         message: "Failed to update graphic list."
       });
     }
-  }, [urls.staticUrl]);
+  }, [urls.staticUrl.toString()]);
   (0, import_react8.useEffect)(() => {
     updateGraphics().catch(console.error);
   }, [updateGraphics]);
@@ -7865,7 +8065,7 @@ function SummaryView8({ 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_runtime27.jsxs)("div", { className: "space-y-3", children: [(0, import_jsx_runtime27.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime27.jsxs)("div", { children: [(0, import_jsx_runtime27.jsx)("label", { htmlFor: "select-graphic", className: "block text-gray-900 dark:text-white mb-1", children: "Source" }), (0, import_jsx_runtime27.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_runtime27.jsx)("option", { value: "", children: "---" }), graphics.map((s) => (0, import_jsx_runtime27.jsx)("option", { value: s, children: s }, s))] })] }), graphic && (0, import_jsx_runtime27.jsxs)("div", { children: [(0, import_jsx_runtime27.jsx)("label", { htmlFor: "select-position", className: "block text-gray-900 dark:text-white mb-1", children: "Graphic position" }), (0, import_jsx_runtime27.jsx)(PositionSelector, { initialPosition: position, onChange: setPosition, graphicChanged, ...state })] }), (0, import_jsx_runtime27.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_runtime27.jsx)("button", { type: "button", className: buttonClass, onClick: () => setShowFileInput(true), style: { marginBottom: "1rem" }, children: "Upload Graphic" }), showFileInput && (0, import_jsx_runtime27.jsxs)("form", { style: { display: "block", marginBottom: "1rem" }, children: [(0, import_jsx_runtime27.jsx)("input", { type: "file", id: "file", name: "filename", onChange: onFileChange, className: fileInputClass }), showUploadButton && (0, import_jsx_runtime27.jsx)("button", { type: "button", className: buttonClass, onClick: uploadFile, children: "Upload" })] }), (0, import_jsx_runtime27.jsx)("button", { type: "button", className: deleteButtonClass, onClick: () => setShowDeleteDropdown(!showDeleteDropdown), style: { marginBottom: "1rem" }, children: showDeleteDropdown ? "Hide Delete Options" : "Delete Graphics" }), showDeleteDropdown && (0, import_jsx_runtime27.jsxs)("div", { className: "mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg", children: [(0, import_jsx_runtime27.jsx)("h3", { className: "text-lg font-semibold mb-2 text-gray-900 dark:text-white", children: "Select Graphic to Delete" }), (0, import_jsx_runtime27.jsxs)("select", { className: "w-full mb-2 node-editor-select-input", value: graphicToDelete, onChange: (e) => setGraphicToDelete(e.target.value), children: [(0, import_jsx_runtime27.jsx)("option", { value: "", children: " Select a graphic" }), graphics.map((graphicName) => (0, import_jsx_runtime27.jsx)("option", { value: graphicName, children: graphicName }, graphicName))] }), (0, import_jsx_runtime27.jsx)("button", { onClick: deleteBug, disabled: !graphicToDelete, className: `${deleteButtonClass} ${!graphicToDelete ? "opacity-50 cursor-not-allowed" : ""}`, children: "Delete Selected Graphic" })] }), uploadStatus.message && (0, import_jsx_runtime27.jsx)("div", { className: `mt-2 text-center ${uploadStatus.success ? "text-green-600" : "text-red-600"}`, children: uploadStatus.message })] });
+  return (0, import_jsx_runtime31.jsxs)("div", { className: "space-y-3", children: [(0, import_jsx_runtime31.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime31.jsxs)("div", { children: [(0, import_jsx_runtime31.jsx)("label", { htmlFor: "select-graphic", className: "block text-gray-900 dark:text-white mb-1", children: "Source" }), (0, import_jsx_runtime31.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_runtime31.jsx)("option", { value: "", children: "---" }), graphics.map((s) => (0, import_jsx_runtime31.jsx)("option", { value: s, children: s }, s))] })] }), graphic && (0, import_jsx_runtime31.jsxs)("div", { children: [(0, import_jsx_runtime31.jsx)("label", { htmlFor: "select-position", className: "block text-gray-900 dark:text-white mb-1", children: "Graphic position" }), (0, import_jsx_runtime31.jsx)(PositionSelector, { initialPosition: position, onChange: setPosition, graphicChanged, ...state })] }), (0, import_jsx_runtime31.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_runtime31.jsx)("button", { type: "button", className: buttonClass, onClick: () => setShowFileInput(true), style: { marginBottom: "1rem" }, children: "Upload Graphic" }), showFileInput && (0, import_jsx_runtime31.jsxs)("form", { style: { display: "block", marginBottom: "1rem" }, children: [(0, import_jsx_runtime31.jsx)("input", { type: "file", id: "file", name: "filename", onChange: onFileChange, className: fileInputClass }), showUploadButton && (0, import_jsx_runtime31.jsx)("button", { type: "button", className: buttonClass, onClick: uploadFile, children: "Upload" })] }), (0, import_jsx_runtime31.jsx)("button", { type: "button", className: deleteButtonClass, onClick: () => setShowDeleteDropdown(!showDeleteDropdown), style: { marginBottom: "1rem" }, children: showDeleteDropdown ? "Hide Delete Options" : "Delete Graphics" }), showDeleteDropdown && (0, import_jsx_runtime31.jsxs)("div", { className: "mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg", children: [(0, import_jsx_runtime31.jsx)("h3", { className: "text-lg font-semibold mb-2 text-gray-900 dark:text-white", children: "Select Graphic to Delete" }), (0, import_jsx_runtime31.jsxs)("select", { className: "w-full mb-2 node-editor-select-input", value: graphicToDelete, onChange: (e) => setGraphicToDelete(e.target.value), children: [(0, import_jsx_runtime31.jsx)("option", { value: "", children: " Select a graphic" }), graphics.map((graphicName) => (0, import_jsx_runtime31.jsx)("option", { value: graphicName, children: graphicName }, graphicName))] }), (0, import_jsx_runtime31.jsx)("button", { onClick: deleteBug, disabled: !graphicToDelete, className: `${deleteButtonClass} ${!graphicToDelete ? "opacity-50 cursor-not-allowed" : ""}`, children: "Delete Selected Graphic" })] }), uploadStatus.message && (0, import_jsx_runtime31.jsx)("div", { className: `mt-2 text-center ${uploadStatus.success ? "text-green-600" : "text-red-600"}`, children: uploadStatus.message })] });
 }
 function fromLocalPosition(pos) {
   if (pos.type === "named")
@@ -7874,7 +8074,7 @@ function fromLocalPosition(pos) {
     return { type: pos.type, x: pos.x, y: pos.y };
   if (pos.type === "percentage")
     return { type: pos.type, x: pos.x, y: pos.y };
-  assertUnreachable12(pos);
+  assertUnreachable13(pos);
 }
 function convertPosition(givenPosition, currentVideo, currentGraphic) {
   if (!givenPosition)
@@ -7892,7 +8092,7 @@ function convertPosition(givenPosition, currentVideo, currentGraphic) {
     } else if (givenPosition.position === "center") {
       xy = { x: 50, y: 50 };
     } else {
-      assertUnreachable12(givenPosition.position);
+      assertUnreachable13(givenPosition.position);
     }
     return { ...givenPosition, ...xy, xPct: xy.x, yPct: xy.y };
   }
@@ -7980,7 +8180,7 @@ var PositionSelector = ({ initialPosition: givenPosition = { type: "named", posi
       window.removeEventListener("mouseup", handleMouseUp);
     };
   }, [isDragging]);
-  return (0, import_jsx_runtime27.jsxs)("div", { className: "relative w-full max-w-lg mx-auto mt-4 mb-8", children: [(0, import_jsx_runtime27.jsxs)("div", { className: "mb-4 flex items-center gap-2", children: [(0, import_jsx_runtime27.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Position Type:" }), (0, import_jsx_runtime27.jsxs)("select", { value: position.type, onChange: (e) => {
+  return (0, import_jsx_runtime31.jsxs)("div", { className: "relative w-full max-w-lg mx-auto mt-4 mb-8", children: [(0, import_jsx_runtime31.jsxs)("div", { className: "mb-4 flex items-center gap-2", children: [(0, import_jsx_runtime31.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Position Type:" }), (0, import_jsx_runtime31.jsxs)("select", { value: position.type, onChange: (e) => {
     const newType = e.target.value;
     if (newType === "named") {
       setPosition(convertPos({ type: "named", position: "topleft" }));
@@ -7988,12 +8188,12 @@ var PositionSelector = ({ initialPosition: givenPosition = { type: "named", posi
       setPositionUnit("%");
       setPosition({ ...convertPos(position), type: "percentage" });
     }
-  }, className: "node-editor-select-input", children: [(0, import_jsx_runtime27.jsx)("option", { value: "coordinate", children: "Custom Position" }), (0, import_jsx_runtime27.jsx)("option", { value: "named", children: "Preset Position" })] })] }), position.type === "named" ? (0, import_jsx_runtime27.jsx)("div", { className: "mb-4", children: (0, import_jsx_runtime27.jsxs)("select", { value: position.position, onChange: (e) => {
+  }, className: "node-editor-select-input", children: [(0, import_jsx_runtime31.jsx)("option", { value: "coordinate", children: "Custom Position" }), (0, import_jsx_runtime31.jsx)("option", { value: "named", children: "Preset Position" })] })] }), position.type === "named" ? (0, import_jsx_runtime31.jsx)("div", { className: "mb-4", children: (0, import_jsx_runtime31.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_runtime27.jsx)("option", { value: "topleft", children: "Top Left" }), (0, import_jsx_runtime27.jsx)("option", { value: "topright", children: "Top Right" }), (0, import_jsx_runtime27.jsx)("option", { value: "bottomleft", children: "Bottom Left" }), (0, import_jsx_runtime27.jsx)("option", { value: "bottomright", children: "Bottom Right" }), (0, import_jsx_runtime27.jsx)("option", { value: "center", children: "Centered" })] }) }) : (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [(0, import_jsx_runtime27.jsxs)("div", { className: "mb-4 flex items-center gap-2", children: [(0, import_jsx_runtime27.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Position Unit:" }), (0, import_jsx_runtime27.jsxs)("select", { value: positionUnit, onChange: (e) => {
+  }, className: "w-full node-editor-select-input", children: [(0, import_jsx_runtime31.jsx)("option", { value: "topleft", children: "Top Left" }), (0, import_jsx_runtime31.jsx)("option", { value: "topright", children: "Top Right" }), (0, import_jsx_runtime31.jsx)("option", { value: "bottomleft", children: "Bottom Left" }), (0, import_jsx_runtime31.jsx)("option", { value: "bottomright", children: "Bottom Right" }), (0, import_jsx_runtime31.jsx)("option", { value: "center", children: "Centered" })] }) }) : (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [(0, import_jsx_runtime31.jsxs)("div", { className: "mb-4 flex items-center gap-2", children: [(0, import_jsx_runtime31.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Position Unit:" }), (0, import_jsx_runtime31.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;
@@ -8018,18 +8218,18 @@ var PositionSelector = ({ initialPosition: givenPosition = { type: "named", posi
         yStr: void 0
       });
     }
-  }, className: "node-editor-select-input", children: [(0, import_jsx_runtime27.jsx)("option", { value: "px", children: "Pixels" }), (0, import_jsx_runtime27.jsx)("option", { value: "%", children: "Percentage" })] })] }), (0, import_jsx_runtime27.jsxs)("div", { className: "relative bg-gray-200 dark:bg-gray-700 rounded-lg", style: {
+  }, className: "node-editor-select-input", children: [(0, import_jsx_runtime31.jsx)("option", { value: "px", children: "Pixels" }), (0, import_jsx_runtime31.jsx)("option", { value: "%", children: "Percentage" })] })] }), (0, import_jsx_runtime31.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_runtime27.jsxs)("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-gray-500 dark:text-gray-400", children: [(0, import_jsx_runtime27.jsx)("span", { children: currentVideo ? "Video Preview Area" : "Video Dimensions Unknown" }), " ", currentVideo ? (0, import_jsx_runtime27.jsxs)("span", { children: [currentVideo.width, "x", currentVideo.height, "px"] }) : ""] }), (0, import_jsx_runtime27.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_runtime31.jsxs)("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-gray-500 dark:text-gray-400", children: [(0, import_jsx_runtime31.jsx)("span", { children: currentVideo ? "Video Preview Area" : "Video Dimensions Unknown" }), " ", currentVideo ? (0, import_jsx_runtime31.jsxs)("span", { children: [currentVideo.width, "x", currentVideo.height, "px"] }) : ""] }), (0, import_jsx_runtime31.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_runtime27.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_runtime27.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_runtime27.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_runtime27.jsxs)("div", { className: "mt-2 flex gap-4", children: [(0, import_jsx_runtime27.jsxs)("div", { children: [(0, import_jsx_runtime27.jsxs)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: ["X Position ", positionUnit] }), (0, import_jsx_runtime27.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_runtime31.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_runtime31.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_runtime31.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_runtime31.jsxs)("div", { className: "mt-2 flex gap-4", children: [(0, import_jsx_runtime31.jsxs)("div", { children: [(0, import_jsx_runtime31.jsxs)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: ["X Position ", positionUnit] }), (0, import_jsx_runtime31.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",
@@ -8038,7 +8238,7 @@ var PositionSelector = ({ initialPosition: givenPosition = { type: "named", posi
       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_runtime27.jsxs)("div", { children: [(0, import_jsx_runtime27.jsxs)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: ["Y Position ", positionUnit] }), (0, import_jsx_runtime27.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_runtime31.jsxs)("div", { children: [(0, import_jsx_runtime31.jsxs)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: ["Y Position ", positionUnit] }), (0, import_jsx_runtime31.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",
@@ -8052,13 +8252,13 @@ var PositionSelector = ({ initialPosition: givenPosition = { type: "named", posi
 function clamp(min, num, max) {
   return num < min ? min : num > max ? max : num;
 }
-function assertUnreachable12(_) {
+function assertUnreachable13(_) {
   throw new Error("Didn't expect to get here");
 }
-var summary_view_default8 = SummaryView8;
+var summary_view_default9 = SummaryView9;
 
 // build/processor.onscreenGraphic/info.js
-function info_default24({ defineComponent }) {
+function info_default25({ defineComponent }) {
   return defineComponent({
     identifier: "processor.onscreenGraphic",
     category: "processor",
@@ -8084,7 +8284,7 @@ function info_default24({ defineComponent }) {
       };
     },
     runtime: {
-      summary: summary_view_default8,
+      summary: summary_view_default9,
       initialState: () => ({}),
       handleEvent: (ev, state) => {
         const evType = ev.type;
@@ -8096,7 +8296,7 @@ function info_default24({ defineComponent }) {
           case "graphic-loaded":
             return { ...state, currentGraphic: ev.currentGraphic };
           default:
-            assertUnreachable13(evType);
+            assertUnreachable14(evType);
         }
       }
     },
@@ -8132,12 +8332,12 @@ function info_default24({ defineComponent }) {
     }
   });
 }
-function assertUnreachable13(_) {
+function assertUnreachable14(_) {
   throw new Error("Didn't expect to get here");
 }
 
 // build/processor.streamKeyOverride/info.js
-function info_default25({ defineComponent, All, validation: { Z } }) {
+function info_default26({ defineComponent, All, validation: { Z } }) {
   return defineComponent({
     identifier: "processor.streamKeyOverride",
     category: "processor",
@@ -8229,7 +8429,7 @@ function info_default25({ defineComponent, All, validation: { Z } }) {
 }
 
 // build/processor.videoDecoder/info.js
-function info_default26({ defineComponent }) {
+function info_default27({ defineComponent }) {
   return defineComponent({
     identifier: "processor.videoDecoder",
     category: "processor",
@@ -8275,7 +8475,7 @@ function info_default26({ defineComponent }) {
 }
 
 // build/util.stats.latency/inline-view.js
-var import_jsx_runtime28 = __toESM(require_jsx_runtime());
+var import_jsx_runtime32 = __toESM(require_jsx_runtime());
 var import_react9 = __toESM(require_react());
 
 // ../../node_modules/@kurkle/color/dist/color.esm.js
@@ -22574,7 +22774,7 @@ Chart.register(...registerables);
 var auto_default = Chart;
 
 // build/util.stats.latency/inline-view.js
-function InlineView11({ state, config: _2 }) {
+function InlineView12({ state, config: _2 }) {
   const chartContainer = (0, import_react9.useRef)(null);
   const [chartControl, setChartControl] = (0, import_react9.useState)(void 0);
   function makeDataSet(key, color2, values) {
@@ -22636,19 +22836,19 @@ function InlineView11({ state, config: _2 }) {
       return;
     chartControl.data = makeData(state);
   }, [state]);
-  return (0, import_jsx_runtime28.jsx)("div", { className: "bg-gray-50 dark:bg-gray-700 rounded", style: { width: "360px", height: "200px", padding: "10px" }, children: (0, import_jsx_runtime28.jsx)("canvas", { className: "bg-gray-50 dark:bg-gray-700 rounded", ref: chartContainer }) });
+  return (0, import_jsx_runtime32.jsx)("div", { className: "bg-gray-50 dark:bg-gray-700 rounded", style: { width: "360px", height: "200px", padding: "10px" }, children: (0, import_jsx_runtime32.jsx)("canvas", { className: "bg-gray-50 dark:bg-gray-700 rounded", ref: chartContainer }) });
 }
-var inline_view_default11 = InlineView11;
+var inline_view_default12 = InlineView12;
 
 // build/util.stats.latency/source-node-selection.js
-var import_jsx_runtime29 = __toESM(require_jsx_runtime());
+var import_jsx_runtime33 = __toESM(require_jsx_runtime());
 function SourceNodeSelection(props) {
-  return (0, import_jsx_runtime29.jsx)("div", { children: (0, import_jsx_runtime29.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime29.jsx)("option", { value: "", children: "---" }, "empty"), Object.values(props.latestDocument.components).map((o, i) => {
+  return (0, import_jsx_runtime33.jsx)("div", { children: (0, import_jsx_runtime33.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime33.jsx)("option", { value: "", children: "---" }, "empty"), Object.values(props.latestDocument.components).map((o, i) => {
     if (o.id == props.id)
-      return (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, {});
+      return (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, {});
     if (o.info.category === "output")
       return;
-    return (0, import_jsx_runtime29.jsx)("option", { value: o.id, children: o.config.displayName }, i);
+    return (0, import_jsx_runtime33.jsx)("option", { value: o.id, children: o.config.displayName }, i);
   })] }) });
   function myOnChange(e) {
     props.onChanged(e.target.value);
@@ -22657,7 +22857,7 @@ function SourceNodeSelection(props) {
 var source_node_selection_default = SourceNodeSelection;
 
 // build/util.stats.latency/info.js
-function info_default27(R) {
+function info_default28(R) {
   const { defineComponent } = R;
   return defineComponent({
     identifier: "util.stats.latency",
@@ -22686,11 +22886,11 @@ function info_default27(R) {
             break;
           }
           default:
-            assertUnreachable14(evType);
+            assertUnreachable15(evType);
         }
         return { ...state };
       },
-      inline: inline_view_default11
+      inline: inline_view_default12
     },
     configForm: {
       form: {
@@ -22741,7 +22941,7 @@ function info_default27(R) {
     }
   });
 }
-function assertUnreachable14(_) {
+function assertUnreachable15(_) {
   throw new Error("Didn't expect to get here");
 }
 
@@ -22786,6 +22986,7 @@ AllComponents.push((r) => info_default24(r));
 AllComponents.push((r) => info_default25(r));
 AllComponents.push((r) => info_default26(r));
 AllComponents.push((r) => info_default27(r));
+AllComponents.push((r) => info_default28(r));
 export {
   getNodeInfo as default
 };