@norskvideo/norsk-studio-built-ins 1.11.6 → 1.12.0-2025-01-27-b21c8c91

package/client/info.js

@@ -75,7 +75,7 @@ var summary_view_exports = {};
 __export(summary_view_exports, {
   default: () => summary_view_default
 });
-function SummaryView({ state, config }) {
+function SummaryView({ state, config, urls, sendCommand }) {
   const connectedSources = [];
   const disconnectedSources = [];
   config.streamNames.forEach((streamName) => {
@@ -85,11 +85,30 @@ function SummaryView({ state, config }) {
       disconnectedSources.push(streamName);
     }
   });
-  return (0, import_jsx_runtime2.jsxs)("div", { className: "dark:text-white text-black mb-3 w-60", children: [(0, import_jsx_runtime2.jsxs)("div", { id: "rtmp-sources-connected", children: [(0, import_jsx_runtime2.jsx)("span", { children: "Sources connected" }), (0, import_jsx_runtime2.jsx)("ul", { children: connectedSources.map((streamId) => {
-    return (0, import_jsx_runtime2.jsx)("li", { className: "text-green-300", children: streamId });
-  }) })] }), (0, import_jsx_runtime2.jsxs)("div", { id: "rtmp-sources-disconnected", className: "mt-3", children: [(0, import_jsx_runtime2.jsx)("span", { children: "Sources disconnected" }), (0, import_jsx_runtime2.jsx)("ul", { children: disconnectedSources.map((streamId) => {
-    return (0, import_jsx_runtime2.jsx)("li", { className: "text-orange-300", children: streamId });
-  }) })] })] });
+  const handleDisconnectStream = (streamName) => {
+    void disconnectStream(streamName);
+  };
+  const disconnectStream = async (streamName) => {
+    try {
+      const response = await fetch(`${urls.componentUrl}/disconnect`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ streamName })
+      });
+      if (!response.ok) {
+        console.error("Stream failed to disconnect");
+      }
+      sendCommand({
+        type: "disconnect-source",
+        streamName
+      });
+    } catch (error) {
+      console.error("Failed to disconnect stream:", error);
+    }
+  };
+  return (0, import_jsx_runtime2.jsxs)("div", { className: "dark:text-white text-black mb-3 w-60", children: [(0, import_jsx_runtime2.jsxs)("div", { id: "rtmp-sources-connected", children: [(0, import_jsx_runtime2.jsx)("span", { children: "Sources connected" }), (0, import_jsx_runtime2.jsx)("ul", { children: connectedSources.map((streamName) => (0, import_jsx_runtime2.jsxs)("li", { className: "flex items-center justify-between", children: [(0, import_jsx_runtime2.jsx)("span", { className: "text-green-300", children: streamName }), (0, import_jsx_runtime2.jsx)("button", { onClick: () => handleDisconnectStream(streamName), className: "ml-2 px-2 py-1 text-xs bg-red-600 hover:bg-red-700 text-white rounded", children: "Disconnect" })] }, streamName)) })] }), (0, import_jsx_runtime2.jsxs)("div", { id: "rtmp-sources-disconnected", className: "mt-3", children: [(0, import_jsx_runtime2.jsx)("span", { children: "Sources disconnected" }), (0, import_jsx_runtime2.jsx)("ul", { children: disconnectedSources.map((streamName) => (0, import_jsx_runtime2.jsx)("li", { className: "flex items-center justify-between", children: (0, import_jsx_runtime2.jsx)("span", { className: "text-orange-300", children: streamName }) }, streamName)) })] })] });
 }
 var import_jsx_runtime2, summary_view_default;
 var init_summary_view = __esm({
@@ -147,9 +166,32 @@ var summary_view_exports2 = {};
 __export(summary_view_exports2, {
   default: () => summary_view_default2
 });
-function SummaryView3({ state, config }) {
+function SummaryView3({ state, config, urls, sendCommand }) {
   const connectedSources = [];
   const disconnectedSources = [];
+  const disconnectStream = async (streamId) => {
+    try {
+      const response = await fetch(`${urls.componentUrl}/disconnect`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ streamId })
+      });
+      if (!response.ok) {
+        console.error("Stream failed to disconnect");
+      }
+      sendCommand({
+        type: "disconnect-source",
+        streamId
+      });
+    } catch (error) {
+      console.error("Failed to disconnect stream:", error);
+    }
+  };
+  const handleDisconnectStream = (streamId) => {
+    void disconnectStream(streamId);
+  };
   config.streamIds.forEach((streamId) => {
     if (state.connectedStreams.includes(streamId)) {
       connectedSources.push(streamId);
@@ -157,9 +199,9 @@ function SummaryView3({ state, config }) {
       disconnectedSources.push(streamId);
     }
   });
-  return (0, import_jsx_runtime5.jsxs)("div", { className: "dark:text-white text-black mb-3 w-60", children: [(0, import_jsx_runtime5.jsxs)("div", { id: "srt-sources-connected", children: [(0, import_jsx_runtime5.jsx)("span", { children: "Sources connected" }), (0, import_jsx_runtime5.jsx)("ul", { children: connectedSources.map((streamId) => {
-    return (0, import_jsx_runtime5.jsx)("li", { className: "text-green-300", children: streamId }, streamId);
-  }) })] }), (0, import_jsx_runtime5.jsxs)("div", { id: "srt-sources-disconnected", className: "mt-3", children: [(0, import_jsx_runtime5.jsx)("span", { children: "Sources disconnected" }), (0, import_jsx_runtime5.jsx)("ul", { children: disconnectedSources.map((streamId) => {
+  return (0, import_jsx_runtime5.jsxs)("div", { className: "dark:text-white text-black mb-3 w-60", children: [(0, import_jsx_runtime5.jsxs)("div", { id: "srt-sources-connected", children: [(0, import_jsx_runtime5.jsx)("span", { children: "Connected Sources" }), (0, import_jsx_runtime5.jsx)("ul", { children: connectedSources.map((streamId) => {
+    return (0, import_jsx_runtime5.jsxs)("li", { className: "text-green-300", children: [streamId, (0, import_jsx_runtime5.jsx)("button", { onClick: () => handleDisconnectStream(streamId), className: "ml-2 px-2 py-1 text-xs bg-red-600 hover:bg-red-700 text-white rounded", children: "Disconnect" })] }, streamId);
+  }) })] }), (0, import_jsx_runtime5.jsxs)("div", { id: "srt-sources-disconnected", className: "mt-3", children: [(0, import_jsx_runtime5.jsx)("span", { children: "Disconnected Sources" }), (0, import_jsx_runtime5.jsx)("ul", { children: disconnectedSources.map((streamId) => {
     return (0, import_jsx_runtime5.jsx)("li", { className: "text-orange-300", children: streamId }, streamId);
   }) })] })] });
 }
@@ -172,117 +214,24 @@ var init_summary_view2 = __esm({
   }
 });
 
-// external-global-plugin:hls.js
-var require_hls = __commonJS({
-  "external-global-plugin:hls.js"(exports, module) {
-    module.exports = window.HlsJs;
-  }
-});
-
-// build/output.autoCmaf/summary.js
-var summary_exports = {};
-__export(summary_exports, {
-  default: () => summary_default
-});
-function InlineView5({ state, config }) {
-  const url = state.url;
-  const id = config.id;
-  const previewVideo = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
-    if (!url)
-      return;
-    if (!previewVideo.current)
-      return;
-    if (import_hls.default.isSupported()) {
-      const hls = new import_hls.default();
-      hls.loadSource(url);
-      hls.attachMedia(previewVideo.current);
-    } else if (previewVideo.current.canPlayType("application/vnd.apple.mpegurl")) {
-      previewVideo.current.src = url;
-    }
-  }, [state.url]);
-  if (!url)
-    return (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: "..." });
-  return (0, import_jsx_runtime6.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime6.jsx)("video", { ref: previewVideo, autoPlay: true, muted: true, id: `${id}-video` }) });
-}
-var import_jsx_runtime6, import_react4, import_hls, summary_default;
-var init_summary = __esm({
-  "build/output.autoCmaf/summary.js"() {
-    "use strict";
-    import_jsx_runtime6 = __toESM(require_jsx_runtime());
-    import_react4 = __toESM(require_react());
-    import_hls = __toESM(require_hls());
-    summary_default = InlineView5;
-  }
-});
-
-// build/output.autoCmaf/fullscreen.js
-var fullscreen_exports = {};
-__export(fullscreen_exports, {
-  default: () => fullscreen_default
-});
-function FullscreenView({ state, config }) {
-  const url = state.url;
-  const id = config.id;
-  (0, import_react5.useEffect)(() => {
-    if (!url)
-      return;
-    const element = document.getElementById(`${id}-video`);
-    if (import_hls2.default.isSupported()) {
-      const hls = new import_hls2.default();
-      hls.loadSource(url);
-      hls.attachMedia(element);
-    } else if (element.canPlayType("application/vnd.apple.mpegurl")) {
-      element.src = url;
-    }
-  }, [state.url]);
-  if (!url)
-    return (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: "..." });
-  {
-  }
-  return (0, import_jsx_runtime7.jsx)("div", { children: (0, import_jsx_runtime7.jsx)("video", { controls: true, autoPlay: true, muted: true, id: `${id}-video` }) });
-}
-var import_jsx_runtime7, import_react5, import_hls2, fullscreen_default;
-var init_fullscreen = __esm({
-  "build/output.autoCmaf/fullscreen.js"() {
-    "use strict";
-    import_jsx_runtime7 = __toESM(require_jsx_runtime());
-    import_react5 = __toESM(require_react());
-    import_hls2 = __toESM(require_hls());
-    fullscreen_default = FullscreenView;
-  }
-});
-
-// build/output.autoCmaf/form-views.js
-var form_views_exports = {};
-__export(form_views_exports, {
-  S3Destination: () => S3Destination,
-  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" })] });
-}
-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"] })] });
-}
-var import_jsx_runtime8;
-var init_form_views = __esm({
-  "build/output.autoCmaf/form-views.js"() {
-    "use strict";
-    import_jsx_runtime8 = __toESM(require_jsx_runtime());
-  }
-});
-
 // ../../node_modules/@norskvideo/norsk-studio/lib/shared/shared-views.js
 var require_shared_views = __commonJS({
   "../../node_modules/@norskvideo/norsk-studio/lib/shared/shared-views.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.GlobalIceServerView = GlobalIceServerView;
+    exports.EzDrmConfigView = EzDrmConfigView;
+    exports.AxinomConfigView = AxinomConfigView;
     var jsx_runtime_1 = require_jsx_runtime();
     function GlobalIceServerView(i) {
       return (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-flow-row-dense grid-cols-3 text-sm", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: "URL" }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-2", children: i.url }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: "Reported URL" }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-2", children: i.reportedUrl ?? "" }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: "Username" }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-2", children: i.username ?? "" }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: "Password" }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-2", children: i.credential ?? "" })] });
     }
+    function EzDrmConfigView(i) {
+      return (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-flow-row-dense grid-cols-2 text-sm", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-span-2 node-editor-helper-text", children: "For Encryption (required)" }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: "Token" }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: i.token?.trim() ? "Yes" : "No" }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-2 node-editor-helper-text", children: "For Local Preview (optional)" }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: "pX" }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: i.pX?.trim() ? "Yes" : "No" })] });
+    }
+    function AxinomConfigView(i) {
+      return (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-flow-row-dense grid-cols-2 text-sm", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-span-2 node-editor-helper-text", children: "For Encryption (required)" }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: "Tenant ID" }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: i.tenantId?.trim() ? "Yes" : "No" }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: "Management Key" }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: i.managementKey?.trim() ? "Yes" : "No" }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-2 node-editor-helper-text", children: "For Local Preview (optional)" }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: "Communication ID" }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: i.comKeyId?.trim() ? "Yes" : "No" }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: "Communication Key" }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: i.comKey?.trim() ? "Yes" : "No" })] });
+    }
   }
 });
 
@@ -327,6 +276,8 @@ var require_config = __commonJS({
     };
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.GlobalIceServers = GlobalIceServers3;
+    exports.GlobalEzDrmConfig = GlobalEzDrmConfig2;
+    exports.GlobalAxinomConfig = GlobalAxinomConfig2;
     exports.contractHardwareAcceleration = contractHardwareAcceleration;
     exports.HardwareSelection = HardwareSelection5;
     exports.RootDataDir = RootDataDir;
@@ -356,7 +307,8 @@ var require_config = __commonJS({
                 help: "Optional URL of the STUN/TURN server as accessed by the client (if different to the above)",
                 hint: {
                   type: "text",
-                  validation: f.validation.IceServer
+                  validation: Z.union([Z.literal(""), f.validation.IceServer]).optional(),
+                  optional: true
                 }
               },
               username: {
@@ -382,6 +334,90 @@ var require_config = __commonJS({
         }
       };
     }
+    function GlobalEzDrmConfig2(_f) {
+      const EzDrmConfigView = react_1.default.lazy(async () => {
+        const views = await Promise.resolve().then(() => __importStar(require_shared_views()));
+        return { default: views.EzDrmConfigView };
+      });
+      return {
+        id: "ezdrm-config",
+        form: {
+          help: "Configuration for EZDRM",
+          hint: {
+            envOverride: true,
+            type: "form-item",
+            optional: true,
+            form: {
+              token: {
+                help: "Token for EZDRM",
+                hint: {
+                  envOverride: true,
+                  type: "text"
+                }
+              },
+              pX: {
+                help: "The last six digits of your Widevine Profile ID",
+                hint: {
+                  envOverride: true,
+                  defaultValue: "",
+                  type: "text"
+                }
+              }
+            },
+            view: EzDrmConfigView
+          }
+        }
+      };
+    }
+    function GlobalAxinomConfig2(_f) {
+      const AxinomConfigView = react_1.default.lazy(async () => {
+        const views = await Promise.resolve().then(() => __importStar(require_shared_views()));
+        return { default: views.AxinomConfigView };
+      });
+      return {
+        id: "axinom-config",
+        form: {
+          help: "Configuration for Axinom DRM",
+          hint: {
+            envOverride: true,
+            type: "form-item",
+            form: {
+              tenantId: {
+                help: "Tenant ID from your Axinom DRM account",
+                hint: {
+                  envOverride: true,
+                  type: "text"
+                }
+              },
+              managementKey: {
+                help: "Management Key from your Axinom DRM account",
+                hint: {
+                  envOverride: true,
+                  type: "text"
+                }
+              },
+              comKeyId: {
+                help: "Communication Key ID from your Axinom DRM account",
+                hint: {
+                  envOverride: true,
+                  defaultValue: "",
+                  type: "text"
+                }
+              },
+              comKey: {
+                help: "Communication Key from your Axinom DRM account",
+                hint: {
+                  envOverride: true,
+                  defaultValue: "",
+                  type: "text"
+                }
+              }
+            },
+            view: AxinomConfigView
+          }
+        }
+      };
+    }
     function contractHardwareAcceleration(value, accepted) {
       if (!value)
         return void 0;
@@ -424,6 +460,70 @@ var require_config = __commonJS({
   }
 });
 
+// external-global-plugin:hls.js
+var require_hls = __commonJS({
+  "external-global-plugin:hls.js"(exports, module) {
+    module.exports = window.HlsJs;
+  }
+});
+
+// build/output.autoCmaf/fullscreen.js
+var fullscreen_exports = {};
+__export(fullscreen_exports, {
+  default: () => fullscreen_default
+});
+function FullscreenView({ state, config }) {
+  const url = state.url;
+  const id = config.id;
+  (0, import_react4.useEffect)(() => {
+    if (!url)
+      return;
+    const element = document.getElementById(`${id}-video`);
+    if (import_hls.default.isSupported()) {
+      const hls = new import_hls.default();
+      hls.loadSource(url);
+      hls.attachMedia(element);
+    } else if (element.canPlayType("application/vnd.apple.mpegurl")) {
+      element.src = url;
+    }
+  }, [state.url]);
+  if (!url)
+    return (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: "..." });
+  {
+  }
+  return (0, import_jsx_runtime6.jsx)("div", { children: (0, import_jsx_runtime6.jsx)("video", { controls: true, autoPlay: true, muted: true, id: `${id}-video` }) });
+}
+var import_jsx_runtime6, import_react4, import_hls, fullscreen_default;
+var init_fullscreen = __esm({
+  "build/output.autoCmaf/fullscreen.js"() {
+    "use strict";
+    import_jsx_runtime6 = __toESM(require_jsx_runtime());
+    import_react4 = __toESM(require_react());
+    import_hls = __toESM(require_hls());
+    fullscreen_default = FullscreenView;
+  }
+});
+
+// build/output.autoCmaf/form-views.js
+var form_views_exports = {};
+__export(form_views_exports, {
+  S3Destination: () => S3Destination,
+  SegmentConfiguration: () => SegmentConfiguration
+});
+function S3Destination(destination) {
+  return (0, import_jsx_runtime7.jsxs)("div", { className: "grid grid-flow-row-dense grid-cols-3 text-sm", children: [(0, import_jsx_runtime7.jsx)("div", { className: "col-span-1", children: "Host" }), (0, import_jsx_runtime7.jsx)("div", { className: "col-span-2", children: destination.host }), (0, import_jsx_runtime7.jsx)("div", { className: "col-span-1", children: "Path" }), (0, import_jsx_runtime7.jsx)("div", { className: "col-span-2", children: destination.prefix }), (0, import_jsx_runtime7.jsx)("div", { className: "col-span-1", children: "Include Ads" }), (0, import_jsx_runtime7.jsx)("div", { className: "col-span-2", children: destination.includeAdInsertions ? "yes" : "no" })] });
+}
+function SegmentConfiguration(cfg) {
+  return (0, import_jsx_runtime7.jsxs)("div", { className: "grid grid-flow-row-dense grid-cols-3 text-sm", children: [(0, import_jsx_runtime7.jsx)("div", { className: "col-span-1", children: "Segments" }), (0, import_jsx_runtime7.jsx)("div", { className: "col-span-2", children: cfg.defaultSegmentCount == 0 ? "all" : cfg.defaultSegmentCount }), (0, import_jsx_runtime7.jsx)("div", { className: "col-span-1", children: "Segment Target" }), (0, import_jsx_runtime7.jsxs)("div", { className: "col-span-2", children: [cfg.targetSegmentDuration, "s"] }), (0, import_jsx_runtime7.jsx)("div", { className: "col-span-1", children: "Part Target" }), (0, import_jsx_runtime7.jsxs)("div", { className: "col-span-2", children: [cfg.targetPartDuration, "s"] }), (0, import_jsx_runtime7.jsx)("div", { className: "col-span-1", children: "Retention" }), (0, import_jsx_runtime7.jsxs)("div", { className: "col-span-2", children: [cfg.retentionPeriod, "s"] })] });
+}
+var import_jsx_runtime7;
+var init_form_views = __esm({
+  "build/output.autoCmaf/form-views.js"() {
+    "use strict";
+    import_jsx_runtime7 = __toESM(require_jsx_runtime());
+  }
+});
+
 // external-global-plugin:@norskvideo/webrtc-client
 var require_webrtc_client = __commonJS({
   "external-global-plugin:@norskvideo/webrtc-client"(exports, module) {
@@ -436,17 +536,21 @@ var inline_view_exports3 = {};
 __export(inline_view_exports3, {
   default: () => inline_view_default3
 });
-function InlineView6({ state, config }) {
+function InlineView5({ state, config, raise }) {
   const url = state.url;
   const id = config.id;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!url)
       return;
-    const client = new import_webrtc_client.WhepClient({ url, container: document.getElementById(`preview-${id}`) ?? void 0 });
+    const client = new import_webrtc_client.WhepClient({
+      url,
+      container: document.getElementById(`preview-${id}`) ?? void 0
+    });
     void client.start();
   }, [state.url]);
+  raise && (0, import_react6.useEffect)(raise, []);
   if (!url)
-    return (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: "..." });
+    return (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: "..." });
   function percentage(levels) {
     if (!levels) {
       return 0;
@@ -456,16 +560,16 @@ function InlineView6({ state, config }) {
     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.jsx)("div", { className: "preview-video", id: `preview-${id}` }), (0, import_jsx_runtime9.jsx)("div", { className: "preview-levels", children: (0, import_jsx_runtime9.jsx)("div", { className: `preview-level clip-${percentage(state.levels)}-preview` }) })] });
+  return (0, import_jsx_runtime8.jsxs)("div", { className: "preview-outer-container", children: [(0, import_jsx_runtime8.jsx)("div", { className: "preview-video", id: `preview-${id}` }), (0, import_jsx_runtime8.jsx)("div", { className: "preview-levels", children: (0, import_jsx_runtime8.jsx)("div", { className: `preview-level clip-${percentage(state.levels)}-preview` }) })] });
 }
-var import_jsx_runtime9, import_react7, import_webrtc_client, inline_view_default3;
+var import_jsx_runtime8, import_react6, import_webrtc_client, inline_view_default3;
 var init_inline_view3 = __esm({
   "build/output.preview/inline-view.js"() {
     "use strict";
-    import_jsx_runtime9 = __toESM(require_jsx_runtime());
-    import_react7 = __toESM(require_react());
+    import_jsx_runtime8 = __toESM(require_jsx_runtime());
+    import_react6 = __toESM(require_react());
     import_webrtc_client = __toESM(require_webrtc_client());
-    inline_view_default3 = InlineView6;
+    inline_view_default3 = InlineView5;
   }
 });
 
@@ -474,17 +578,92 @@ var inline_view_exports4 = {};
 __export(inline_view_exports4, {
   default: () => inline_view_default4
 });
-function InlineView7({ state, config }) {
-  const connected = (0, import_jsx_runtime10.jsx)("div", { className: "active text-green-300 dark:text-green-300", children: "Connected and publishing" });
-  const disconnected = (0, import_jsx_runtime10.jsxs)("div", { className: "inactive text-orange-300 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 InlineView6({ state, config }) {
+  const connected = (0, import_jsx_runtime9.jsx)("div", { className: "active text-green-500 dark:text-green-300", children: "Connected and publishing" });
+  const disconnected = (0, import_jsx_runtime9.jsxs)("div", { className: "inactive text-orange-500 dark:text-orange-300", children: ["Disconnected ", state.connectRetries > 0 ? `- retrying(${state.connectRetries})` : ""] });
+  return (0, import_jsx_runtime9.jsx)("div", { className: "rtmp-output", id: `rtmp-output-${config.id}`, children: state.connected ? connected : disconnected });
 }
-var import_jsx_runtime10, inline_view_default4;
+var import_jsx_runtime9, inline_view_default4;
 var init_inline_view4 = __esm({
   "build/output.rtmp/inline-view.js"() {
     "use strict";
-    import_jsx_runtime10 = __toESM(require_jsx_runtime());
-    inline_view_default4 = InlineView7;
+    import_jsx_runtime9 = __toESM(require_jsx_runtime());
+    inline_view_default4 = InlineView6;
+  }
+});
+
+// ../../node_modules/@norskvideo/norsk-studio/lib/shared/util.js
+var require_util = __commonJS({
+  "../../node_modules/@norskvideo/norsk-studio/lib/shared/util.js"(exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.nodeApiUrl = nodeApiUrl;
+    exports.componentApiUrl = componentApiUrl;
+    exports.findObjectByType = findObjectByType;
+    exports.getObjectByType = getObjectByType;
+    exports.getObjectByPath = getObjectByPath;
+    exports.displayNodeId = displayNodeId;
+    exports.assertUnreachable = assertUnreachable15;
+    exports.waitForCondition = waitForCondition;
+    function nodeApiUrl(nodeId) {
+      return new URL(`${document.location.protocol}//${document.location.host}/live/api/${encodeURIComponent(nodeId)}`);
+    }
+    function componentApiUrl(indentifier) {
+      return new URL(`${document.location.protocol}//${document.location.host}/components/${encodeURIComponent(indentifier)}`);
+    }
+    function findObjectByType(potentials, t) {
+      for (const v of potentials) {
+        const potential = getObjectByType(v, t);
+        if (potential) {
+          return potential;
+        }
+      }
+      return null;
+    }
+    function getObjectByType(acc, t) {
+      const paths = t.split(".");
+      return getObjectByPath(acc, paths);
+    }
+    function getObjectByPath(acc, paths) {
+      if (paths.length == 0) {
+        return acc;
+      }
+      if (!acc) {
+        return null;
+      }
+      const head = paths[0];
+      const tail = paths.slice(1);
+      const result2 = Object.entries(acc).find(([k, _]) => k == head);
+      if (!result2) {
+        return null;
+      }
+      return getObjectByPath(result2[1], tail);
+    }
+    function displayNodeId(id, document2) {
+      if (!id) {
+        return "";
+      }
+      return document2.components[id]?.config?.displayName ?? id;
+    }
+    function assertUnreachable15(_) {
+      throw new Error("Didn't expect to get here");
+    }
+    async function waitForCondition(condition, timeout, interval) {
+      return new Promise((r, f) => {
+        const i = setInterval(async () => {
+          const success = await condition();
+          if (success) {
+            clearInterval(i);
+            clearTimeout(t);
+            r();
+          }
+        }, interval ?? 10);
+        const t = setTimeout(() => {
+          clearInterval(i);
+          f(new Error("Timeout on condition wait"));
+        }, timeout ?? 2e3);
+      });
+    }
   }
 });
 
@@ -493,49 +672,51 @@ var inline_view_exports5 = {};
 __export(inline_view_exports5, {
   default: () => inline_view_default5
 });
-function InlineView8({ state }) {
+function InlineView7({ state }) {
   if (!state.previous)
-    return (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
-  return (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: state.previous.allStreams.map((s, i) => {
+    return (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
+  const format = (stat) => Math.floor(stat).toLocaleString("en-US", { maximumFractionDigits: 0 });
+  return (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.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: ", Math.floor(s.bitrate), "bps"] })] }, i);
+        return (0, import_jsx_runtime10.jsxs)("div", { children: [(0, import_jsx_runtime10.jsxs)("div", { children: ["StreamKey: ", streamKey(s.streamKey)] }), (0, import_jsx_runtime10.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: ", Math.floor(s.bitrate), "bps"] })] }, i);
+        return (0, import_jsx_runtime10.jsxs)("div", { children: [(0, import_jsx_runtime10.jsxs)("div", { children: ["StreamKey: ", streamKey(s.streamKey)] }), (0, import_jsx_runtime10.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_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
       case "subtitle":
-        return (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
+        return (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
       case "playlist":
-        return (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
+        return (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
       case void 0:
-        return (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
+        return (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
       default:
-        assertUnreachable6(metaCase);
+        assertUnreachable7(metaCase);
     }
   }) });
 }
 function streamKey(streamKey2) {
   return streamKey2.streamId.toString();
 }
-var import_jsx_runtime11, inline_view_default5;
+var import_jsx_runtime10, inline_view_default5;
 var init_inline_view5 = __esm({
   "build/output.statistics/inline-view.js"() {
     "use strict";
-    import_jsx_runtime11 = __toESM(require_jsx_runtime());
+    import_jsx_runtime10 = __toESM(require_jsx_runtime());
     init_info();
-    inline_view_default5 = InlineView8;
+    inline_view_default5 = InlineView7;
   }
 });
 
 // build/output.statistics/info.js
 function info_default11({ defineComponent, All }) {
-  const InlineView13 = import_react11.default.lazy(async () => Promise.resolve().then(() => (init_inline_view5(), inline_view_exports5)));
+  const InlineView13 = import_react10.default.lazy(async () => Promise.resolve().then(() => (init_inline_view5(), inline_view_exports5)));
   return defineComponent({
     identifier: "output.statistics",
     category: "output",
     name: "Statistics",
+    description: "This component accepts multiple media streams, captures and reports metrics or statistical data related to the media streams.",
     subscription: {
       // No validation required
       accepts: {
@@ -555,7 +736,7 @@ function info_default11({ defineComponent, All }) {
             state.previous = ev.summary;
             break;
           default:
-            assertUnreachable6(evType);
+            assertUnreachable7(evType);
         }
         return { ...state };
       },
@@ -566,14 +747,99 @@ function info_default11({ defineComponent, All }) {
     }
   });
 }
-function assertUnreachable6(_) {
+function assertUnreachable7(_) {
   throw new Error("Didn't expect to get here");
 }
-var import_react11;
+var import_react10;
 var init_info = __esm({
   "build/output.statistics/info.js"() {
     "use strict";
+    import_react10 = __toESM(require_react());
+  }
+});
+
+// build/output.whep/inline-view.js
+var inline_view_exports6 = {};
+__export(inline_view_exports6, {
+  default: () => inline_view_default6
+});
+function InlineView8({ state, config, raise }) {
+  const url = state.url;
+  const id = config.id;
+  (0, import_react11.useEffect)(() => {
+    if (!url)
+      return;
+    const client = new import_webrtc_client2.WhepClient({
+      url,
+      container: document.getElementById(`whep-${id}`) ?? void 0
+    });
+    void client.start();
+  }, [state.url]);
+  raise && (0, import_react11.useEffect)(raise, []);
+  if (!url)
+    return (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: "..." });
+  return (0, import_jsx_runtime11.jsx)("div", { className: "whep-container", children: (0, import_jsx_runtime11.jsx)("div", { className: "whep-video", id: `whep-${id}` }) });
+}
+var import_jsx_runtime11, import_react11, import_webrtc_client2, inline_view_default6;
+var init_inline_view6 = __esm({
+  "build/output.whep/inline-view.js"() {
+    "use strict";
+    import_jsx_runtime11 = __toESM(require_jsx_runtime());
     import_react11 = __toESM(require_react());
+    import_webrtc_client2 = __toESM(require_webrtc_client());
+    inline_view_default6 = InlineView8;
+  }
+});
+
+// build/processor.browserOverlay/summary-view.js
+var summary_view_exports3 = {};
+__export(summary_view_exports3, {
+  default: () => summary_view_default3
+});
+function SummaryView5({ 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_runtime12.jsxs)("div", { className: "space-y-3 mb-5", children: [(0, import_jsx_runtime12.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime12.jsxs)("div", { className: "mb-5", children: [(0, import_jsx_runtime12.jsx)("label", { htmlFor: "url", className: "mb-2 mr-2 text-sm font-medium text-gray-900 dark:text-white", children: "URL" }), (0, import_jsx_runtime12.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_runtime12.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime12.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [(0, import_jsx_runtime12.jsx)("span", { className: "me-3 text-sm font-medium text-gray-900 dark:text-gray-300", children: "Enabled" }), (0, import_jsx_runtime12.jsx)("input", { type: "checkbox", checked: enabled, onChange: (e) => setEnabled(e.target.checked), className: "sr-only peer" }), (0, import_jsx_runtime12.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_runtime12.jsx)("button", { type: "button", className: `${buttonClass} ${!stateChanged ? "opacity-50 cursor-not-allowed" : ""}`, disabled: !stateChanged, onClick: () => {
+    if (url !== state.currentUrl) {
+      sendCommand({ type: "change-url", url });
+    }
+    if (enabled !== state.enabled) {
+      if (enabled) {
+        sendCommand({ type: "enable" });
+      } else {
+        sendCommand({ type: "disable" });
+      }
+    }
+  }, children: "Commit" })] });
+}
+var import_jsx_runtime12, import_react13, summary_view_default3;
+var init_summary_view3 = __esm({
+  "build/processor.browserOverlay/summary-view.js"() {
+    "use strict";
+    import_jsx_runtime12 = __toESM(require_jsx_runtime());
+    import_react13 = __toESM(require_react());
+    summary_view_default3 = SummaryView5;
+  }
+});
+
+// build/processor.browserOverlay/inline-view.js
+var inline_view_exports7 = {};
+__export(inline_view_exports7, {
+  default: () => inline_view_default7
+});
+function InlineView9({ state, config }) {
+  return (0, import_jsx_runtime13.jsx)("div", { id: `browser-overlay-${config.id}`, children: (0, import_jsx_runtime13.jsxs)("div", { className: "w-64 grid grid-cols-[min-content,1fr] gap-2", children: [(0, import_jsx_runtime13.jsx)("div", { children: "URL:" }), (0, import_jsx_runtime13.jsx)("div", { className: "truncate", children: state.currentUrl }), (0, import_jsx_runtime13.jsx)("div", { children: "Enabled:" }), (0, import_jsx_runtime13.jsx)("div", { children: (0, import_jsx_runtime13.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [(0, import_jsx_runtime13.jsx)("input", { type: "checkbox", checked: state.enabled, disabled: true, className: "sr-only peer" }), (0, import_jsx_runtime13.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_runtime13, inline_view_default7;
+var init_inline_view7 = __esm({
+  "build/processor.browserOverlay/inline-view.js"() {
+    "use strict";
+    import_jsx_runtime13 = __toESM(require_jsx_runtime());
+    inline_view_default7 = InlineView9;
   }
 });
 
@@ -583,15 +849,15 @@ __export(source_selection_exports, {
   default: () => source_selection_default
 });
 function OrderInput(props) {
-  (0, import_react12.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     props.onChanged(props.defaultValue ?? []);
   }, [props.defaultValue]);
-  const [value, setValue] = (0, import_react12.useState)(props.defaultValue ?? []);
+  const [value, setValue] = (0, import_react15.useState)(props.defaultValue ?? []);
   if (value.length == 0) {
-    return (0, import_jsx_runtime12.jsx)("p", { className: "node-editor-helper-text", children: "Sources will appear here when subscriptions have been added to this node" });
+    return (0, import_jsx_runtime14.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_runtime12.jsx)("div", { id: props.id, children: (0, import_jsx_runtime12.jsx)("ul", { children: value.map((v, ix) => {
-      return (0, import_jsx_runtime12.jsxs)("li", { className: "flex", children: [(0, import_jsx_runtime12.jsx)("span", { className: "node-editor-label flex-grow", children: v }), ix == 0 ? (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}) : (0, import_jsx_runtime12.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_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18" }) }), ix == value.length - 1 ? (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}) : (0, import_jsx_runtime12.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_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3" }) })] }, v);
+    return (0, import_jsx_runtime14.jsx)("div", { id: props.id, children: (0, import_jsx_runtime14.jsx)("ul", { children: value.map((v, ix) => {
+      return (0, import_jsx_runtime14.jsxs)("li", { className: "flex", children: [(0, import_jsx_runtime14.jsx)("span", { className: "node-editor-label flex-grow", children: v }), ix == 0 ? (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, {}) : (0, import_jsx_runtime14.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_runtime14.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18" }) }), ix == value.length - 1 ? (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, {}) : (0, import_jsx_runtime14.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_runtime14.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3" }) })] }, v);
     }) }) });
   }
   function moveUp(ix) {
@@ -613,146 +879,33 @@ function OrderInput(props) {
     };
   }
 }
-var import_jsx_runtime12, import_react12, source_selection_default;
+var import_jsx_runtime14, import_react15, source_selection_default;
 var init_source_selection = __esm({
   "build/processor.cascadingSwitch/source-selection.js"() {
     "use strict";
-    import_jsx_runtime12 = __toESM(require_jsx_runtime());
-    import_react12 = __toESM(require_react());
+    import_jsx_runtime14 = __toESM(require_jsx_runtime());
+    import_react15 = __toESM(require_react());
     source_selection_default = OrderInput;
   }
 });
 
 // build/processor.cascadingSwitch/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 InlineView9({ state, config }) {
-  return (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [(0, import_jsx_runtime13.jsx)("h5", { children: "Sources" }), (0, import_jsx_runtime13.jsxs)("ul", { children: [config.sources.map((s, i) => state.activeSource == s ? (0, import_jsx_runtime13.jsxs)("li", { className: activeClasses, children: [s, " <--"] }, i) : state.availableSources.includes(s) ? (0, import_jsx_runtime13.jsxs)("li", { className: availableClasses, children: [s, " (available)"] }, i) : (0, import_jsx_runtime13.jsxs)("li", { className: inactiveClasses, children: [s, " (inactive)"] }, i)), (0, import_jsx_runtime13.jsx)("li", { className: state.activeSource == "fallback" ? activeClasses : availableClasses, children: "fallback" }, "fallback")] })] });
+function InlineView11({ state, config }) {
+  return (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [(0, import_jsx_runtime15.jsx)("h5", { children: "Sources" }), (0, import_jsx_runtime15.jsxs)("ul", { children: [config.sources.map((s, i) => state.activeSource == s ? (0, import_jsx_runtime15.jsxs)("li", { className: activeClasses, children: [s, " <--"] }, i) : state.availableSources.includes(s) ? (0, import_jsx_runtime15.jsxs)("li", { className: availableClasses, children: [s, " (available)"] }, i) : (0, import_jsx_runtime15.jsxs)("li", { className: inactiveClasses, children: [s, " (inactive)"] }, i)), (0, import_jsx_runtime15.jsx)("li", { className: state.activeSource == "fallback" ? activeClasses : availableClasses, children: "fallback" }, "fallback")] })] });
 }
-var import_jsx_runtime13, activeClasses, availableClasses, inactiveClasses, inline_view_default6;
-var init_inline_view6 = __esm({
+var import_jsx_runtime15, activeClasses, availableClasses, inactiveClasses, inline_view_default8;
+var init_inline_view8 = __esm({
   "build/processor.cascadingSwitch/inline-view.js"() {
-    "use strict";
-    import_jsx_runtime13 = __toESM(require_jsx_runtime());
-    activeClasses = "active text-green-300 dark:text-green-300";
-    availableClasses = "available text-green-300 dark:text-green-300";
-    inactiveClasses = "inactive text-orange-300 dark:text-orange-300";
-    inline_view_default6 = InlineView9;
-  }
-});
-
-// build/processor.dynamicBug/bug-selection.js
-var bug_selection_exports = {};
-__export(bug_selection_exports, {
-  default: () => bug_selection_default
-});
-function BugSelection(props) {
-  const [loading, setLoading] = (0, import_react13.useState)(true);
-  (0, import_react13.useEffect)(() => {
-    const fn = async () => {
-      const result2 = await fetch("components/processor.dynamicBug/bugs");
-      if (result2.ok && result2.body) {
-        const bugs2 = await result2.json();
-        setBugs(bugs2);
-        setLoading(false);
-        if (props.defaultValue)
-          props.onChanged(props.defaultValue);
-      } else {
-        const text = await result2.text();
-        throw new Error(text);
-      }
-    };
-    fn().catch(console.error);
-  }, []);
-  const [bugs, setBugs] = (0, import_react13.useState)([]);
-  if (loading) {
-    return (0, import_jsx_runtime14.jsx)("div", { children: "Loading.." });
-  }
-  if (bugs.length == 0) {
-    return (0, import_jsx_runtime14.jsx)("div", { children: "No bugs loaded" });
-  }
-  return (0, import_jsx_runtime14.jsx)("div", { children: (0, import_jsx_runtime14.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime14.jsx)("option", { value: "", children: "---" }, "empty"), bugs.map((o, i) => {
-    return (0, import_jsx_runtime14.jsx)("option", { value: o, children: o }, i);
-  })] }) });
-  function myOnChange(e) {
-    props.onChanged(e.target.value);
-  }
-}
-var import_jsx_runtime14, import_react13, bug_selection_default;
-var init_bug_selection = __esm({
-  "build/processor.dynamicBug/bug-selection.js"() {
-    "use strict";
-    import_jsx_runtime14 = __toESM(require_jsx_runtime());
-    import_react13 = __toESM(require_react());
-    bug_selection_default = BugSelection;
-  }
-});
-
-// build/processor.dynamicBug/summary-view.js
-var summary_view_exports3 = {};
-__export(summary_view_exports3, {
-  default: () => summary_view_default3
-});
-function SummaryView5({ state, sendCommand, httpApi }) {
-  const [bug, setBug] = (0, import_react14.useState)(state.activeBug?.file);
-  const [position, setPosition] = (0, import_react14.useState)(state.activeBug?.position);
-  const [bugs, setBugs] = (0, import_react14.useState)([]);
-  const [fileToUpload, setFileToUpload] = (0, import_react14.useState)(void 0);
-  async function updateBugs() {
-    const result2 = await fetch("components/processor.dynamicBug/bugs");
-    if (result2.ok && result2.body) {
-      const bugs2 = await result2.json();
-      setBugs(bugs2);
-    } else {
-      const text = await result2.text();
-      throw new Error(text);
-    }
-  }
-  (0, import_react14.useEffect)(() => {
-    const fn = async () => {
-      await updateBugs();
-    };
-    fn().catch(console.error);
-  }, []);
-  function onFileChange(e) {
-    if (e.target.files?.[0])
-      setFileToUpload(e.target.files[0]);
-  }
-  return (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [(0, import_jsx_runtime15.jsx)("h2", { children: "Controls" }), (0, import_jsx_runtime15.jsx)("label", { htmlFor: "select-preview", className: "mt-2", children: "Source" }), (0, import_jsx_runtime15.jsxs)("select", { id: "select-bug", className: "mt-2 node-editor-select-input", onChange: (e) => {
-    setBug(e.currentTarget.value === "" ? void 0 : e.currentTarget.value);
-  }, children: [(0, import_jsx_runtime15.jsx)("option", { value: "", selected: bug === void 0, children: "---" }), (0, import_jsx_runtime15.jsx)("option", { value: "new", selected: bug === "new", children: "New" }), bugs.map((s, i) => (0, import_jsx_runtime15.jsx)("option", { selected: bug == s, value: s, children: s }, i))] }), (0, import_jsx_runtime15.jsx)("form", { style: { display: bug === "new" ? "block" : "none" }, onSubmit: (e) => e.preventDefault(), children: (0, import_jsx_runtime15.jsx)("input", { type: "file", id: "file", name: "filename", onChange: onFileChange }) }), (0, import_jsx_runtime15.jsxs)("select", { style: { display: bug ? "block" : "none" }, id: "select-position", className: "mt-2 node-editor-select-input", onChange: (e) => {
-    setPosition(e.currentTarget.value);
-  }, children: [(0, import_jsx_runtime15.jsx)("option", { value: "topleft", selected: position === "topleft", children: "Top Left" }), (0, import_jsx_runtime15.jsx)("option", { value: "topright", selected: position === "topright", children: "Top Right" }), (0, import_jsx_runtime15.jsx)("option", { value: "bottomleft", selected: position === "bottomleft", children: "Bottom Left" }), (0, import_jsx_runtime15.jsx)("option", { value: "bottomright", selected: position === "bottomright", children: "Bottom Right" })] }), bug != state.activeBug?.file || position != state.activeBug?.position || fileToUpload ? (0, import_jsx_runtime15.jsx)("button", { type: "button", className: "mt-2 mb-2 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", onClick: async (e) => {
-    e.preventDefault();
-    if (fileToUpload && bug === "new") {
-      const form = new FormData();
-      const url = httpApi.toString() + "/bugs";
-      form.append("file", fileToUpload);
-      await fetch(url, {
-        method: "POST",
-        body: form
-      });
-      setTimeout(async () => {
-        await updateBugs();
-        sendCommand({ type: "change-bug", file: fileToUpload.name, position });
-        setBug(fileToUpload.name);
-        setFileToUpload(void 0);
-        return;
-      }, 500);
-    } else {
-      sendCommand({ type: "change-bug", file: bug, position });
-    }
-  }, children: "Commit" }) : (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {})] });
-}
-var import_jsx_runtime15, import_react14, summary_view_default3;
-var init_summary_view3 = __esm({
-  "build/processor.dynamicBug/summary-view.js"() {
     "use strict";
     import_jsx_runtime15 = __toESM(require_jsx_runtime());
-    import_react14 = __toESM(require_react());
-    summary_view_default3 = SummaryView5;
+    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;
   }
 });
 
@@ -762,7 +915,7 @@ __export(rung_view_exports, {
   default: () => rung_view_default
 });
 function rung_view_default(rung) {
-  return (0, import_jsx_runtime16.jsx)("div", { className: "", children: rung.name });
+  return (0, import_jsx_runtime16.jsx)("div", { className: "text-gray-900 dark:text-white", children: rung.name });
 }
 var import_jsx_runtime16;
 var init_rung_view = __esm({
@@ -791,7 +944,7 @@ function CodecEditor(props) {
       target.style.height = target.scrollHeight + "px";
     }
   }, []);
-  return (0, import_jsx_runtime17.jsx)("textarea", { ref: textAreaRef, className: "w-full min-h-fit dark:text-white dark:bg-black", onChange: (e) => {
+  return (0, import_jsx_runtime17.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);
@@ -816,7 +969,7 @@ __export(codec_view_exports, {
   default: () => CodecEditor2
 });
 function CodecEditor2(props) {
-  return (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [props.width, "x", props.height] });
+  return (0, import_jsx_runtime18.jsxs)("div", { className: "text-gray-900 dark:text-white", children: [props.width, "x", props.height] });
 }
 var import_jsx_runtime18;
 var init_codec_view = __esm({
@@ -826,6 +979,384 @@ var init_codec_view = __esm({
   }
 });
 
+// build/processor.onscreenGraphic/image-selection.js
+var image_selection_exports = {};
+__export(image_selection_exports, {
+  default: () => image_selection_default
+});
+function GraphicSelection(props) {
+  const [loading, setLoading] = (0, import_react18.useState)(true);
+  (0, import_react18.useEffect)(() => {
+    const fn = async () => {
+      const result2 = await fetch("components/processor.onscreenGraphic/graphics");
+      if (result2.ok && result2.body) {
+        const graphics = await result2.json();
+        setGraphics(graphics);
+        setLoading(false);
+        if (props.defaultValue)
+          props.onChanged(props.defaultValue);
+      } else {
+        const text = await result2.text();
+        throw new Error(text);
+      }
+    };
+    fn().catch(console.error);
+  }, []);
+  const [graphcs, setGraphics] = (0, import_react18.useState)([]);
+  if (loading) {
+    return (0, import_jsx_runtime19.jsx)("div", { children: "Loading.." });
+  }
+  if (graphcs.length == 0) {
+    return (0, import_jsx_runtime19.jsx)("div", { children: "No graphics loaded" });
+  }
+  return (0, import_jsx_runtime19.jsx)("div", { children: (0, import_jsx_runtime19.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime19.jsx)("option", { value: "", children: "---" }, "empty"), graphcs.map((o, i) => {
+    return (0, import_jsx_runtime19.jsx)("option", { value: o, children: o }, i);
+  })] }) });
+  function myOnChange(e) {
+    props.onChanged(e.target.value);
+  }
+}
+var import_jsx_runtime19, import_react18, image_selection_default;
+var init_image_selection = __esm({
+  "build/processor.onscreenGraphic/image-selection.js"() {
+    "use strict";
+    import_jsx_runtime19 = __toESM(require_jsx_runtime());
+    import_react18 = __toESM(require_react());
+    image_selection_default = GraphicSelection;
+  }
+});
+
+// build/processor.onscreenGraphic/summary-view.js
+var summary_view_exports4 = {};
+__export(summary_view_exports4, {
+  default: () => summary_view_default4
+});
+function SummaryView7({ 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)([]);
+  const [fileToUpload, setFileToUpload] = (0, import_react19.useState)(void 0);
+  const [showFileInput, setShowFileInput] = (0, import_react19.useState)(false);
+  const [showUploadButton, setShowUploadButton] = (0, import_react19.useState)(false);
+  const [uploadStatus, setUploadStatus] = (0, import_react19.useState)({ success: false, message: null });
+  const [showDeleteDropdown, setShowDeleteDropdown] = (0, import_react19.useState)(false);
+  const [graphicToDelete, setGraphicToDelete] = (0, import_react19.useState)("");
+  const updateGraphics = (0, import_react19.useCallback)(async () => {
+    try {
+      const result2 = await fetch(`${urls.componentUrl}/graphics`);
+      if (result2.ok) {
+        const newGraphics = await result2.json();
+        setGraphics(newGraphics);
+      } else {
+        throw new Error(await result2.text());
+      }
+    } catch (error) {
+      console.error("Failed to update graphics:", error);
+      setUploadStatus({
+        success: false,
+        message: "Failed to update graphic list."
+      });
+    }
+  }, [urls.componentUrl]);
+  (0, import_react19.useEffect)(() => {
+    updateGraphics().catch(console.error);
+  }, [updateGraphics]);
+  const onFileChange = (e) => {
+    const file = e.target.files?.[0];
+    setFileToUpload(file);
+    setShowUploadButton(!!file);
+    setUploadStatus({ success: false, message: null });
+  };
+  const uploadFileHandle = async () => {
+    if (!fileToUpload)
+      return;
+    try {
+      const form = new FormData();
+      form.append("file", fileToUpload);
+      const response = await fetch(`${urls.componentUrl}/graphics`, {
+        method: "POST",
+        body: form
+      });
+      if (response.status === 409) {
+        const errorData = await response.json();
+        setUploadStatus({
+          success: false,
+          message: `${errorData.error}. Delete the existing graphic first if you want to replace it.`
+        });
+      } else if (!response.ok) {
+        throw new Error("Upload failed");
+      } else {
+        setFileToUpload(void 0);
+        setShowFileInput(false);
+        setUploadStatus({
+          success: true,
+          message: "Graphic uploaded successfully!"
+        });
+        await updateGraphics();
+      }
+    } catch (error) {
+      console.error("Failed to upload file:", error);
+      setUploadStatus({ success: false, message: "Failed to upload graphic." });
+    }
+    setTimeout(() => setUploadStatus({ success: false, message: null }), 5e3);
+  };
+  const uploadFile = () => {
+    void uploadFileHandle();
+  };
+  const deleteBugHandle = async () => {
+    if (!graphicToDelete)
+      return;
+    try {
+      console.log(`${urls.componentUrl}`);
+      const response = await fetch(`${urls.componentUrl}/graphic`, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ filename: graphicToDelete })
+      });
+      if (response.ok) {
+        setUploadStatus({
+          success: true,
+          message: "Graphic deleted successfully!"
+        });
+        await updateGraphics();
+        if (graphic === graphicToDelete) {
+          setGraphic(void 0);
+          sendCommand({
+            type: "change-graphic",
+            file: void 0,
+            position: void 0
+          });
+        }
+        setGraphicToDelete("");
+        setShowDeleteDropdown(false);
+      } else {
+        const errorData = await response.json();
+        setUploadStatus({
+          success: false,
+          message: errorData.error || "Failed to delete graphic"
+        });
+      }
+    } catch (error) {
+      console.error("Failed to delete graphic:", error);
+      setUploadStatus({ success: false, message: "Failed to delete graphic" });
+    }
+    setTimeout(() => setUploadStatus({ success: false, message: null }), 3e3);
+  };
+  const deleteBug = () => {
+    void deleteBugHandle();
+  };
+  const eqPosition = (l, r) => {
+    if (!r)
+      return false;
+    if (l.type === "named") {
+      if (r.type !== "named")
+        return false;
+      return l.position === r.position;
+    }
+    if (r.type === "named")
+      return false;
+    if (l.type !== r.type)
+      return false;
+    return l.x === r.x && l.y === r.y;
+  };
+  const graphicChanged = graphic !== state.activeGraphic?.file;
+  const stateChanged = graphicChanged || !eqPosition(position, state.activeGraphic?.position);
+  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_runtime20.jsxs)("div", { className: "space-y-3", children: [(0, import_jsx_runtime20.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime20.jsxs)("div", { children: [(0, import_jsx_runtime20.jsx)("label", { htmlFor: "select-graphic", className: "block text-gray-900 dark:text-white mb-1", children: "Source" }), (0, import_jsx_runtime20.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_runtime20.jsx)("option", { value: "", children: "---" }), graphics.map((s) => (0, import_jsx_runtime20.jsx)("option", { value: s, children: s }, s))] })] }), graphic && (0, import_jsx_runtime20.jsxs)("div", { children: [(0, import_jsx_runtime20.jsx)("label", { htmlFor: "select-position", className: "block text-gray-900 dark:text-white mb-1", children: "Graphic position" }), (0, import_jsx_runtime20.jsx)(PositionSelector, { initialPosition: position, onChange: setPosition, graphicChanged, ...state })] }), (0, import_jsx_runtime20.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_runtime20.jsx)("button", { type: "button", className: buttonClass, onClick: () => setShowFileInput(true), style: { marginBottom: "1rem" }, children: "Upload Graphic" }), showFileInput && (0, import_jsx_runtime20.jsxs)("form", { style: { display: "block", marginBottom: "1rem" }, children: [(0, import_jsx_runtime20.jsx)("input", { type: "file", id: "file", name: "filename", onChange: onFileChange, className: fileInputClass }), showUploadButton && (0, import_jsx_runtime20.jsx)("button", { type: "button", className: buttonClass, onClick: uploadFile, children: "Upload" })] }), (0, import_jsx_runtime20.jsx)("button", { type: "button", className: deleteButtonClass, onClick: () => setShowDeleteDropdown(!showDeleteDropdown), style: { marginBottom: "1rem" }, children: showDeleteDropdown ? "Hide Delete Options" : "Delete Graphics" }), showDeleteDropdown && (0, import_jsx_runtime20.jsxs)("div", { className: "mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg", children: [(0, import_jsx_runtime20.jsx)("h3", { className: "text-lg font-semibold mb-2 text-gray-900 dark:text-white", children: "Select Graphic to Delete" }), (0, import_jsx_runtime20.jsxs)("select", { className: "w-full mb-2 node-editor-select-input", value: graphicToDelete, onChange: (e) => setGraphicToDelete(e.target.value), children: [(0, import_jsx_runtime20.jsx)("option", { value: "", children: " Select a graphic" }), graphics.map((graphicName) => (0, import_jsx_runtime20.jsx)("option", { value: graphicName, children: graphicName }, graphicName))] }), (0, import_jsx_runtime20.jsx)("button", { onClick: deleteBug, disabled: !graphicToDelete, className: `${deleteButtonClass} ${!graphicToDelete ? "opacity-50 cursor-not-allowed" : ""}`, children: "Delete Selected Graphic" })] }), uploadStatus.message && (0, import_jsx_runtime20.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)
+    givenPosition = { type: "named", position: "topleft" };
+  if (givenPosition.type === "named") {
+    let xy;
+    if (givenPosition.position === "topleft") {
+      xy = { x: 0, y: 0 };
+    } else if (givenPosition.position === "topright") {
+      xy = { x: 100, y: 0 };
+    } else if (givenPosition.position === "bottomleft") {
+      xy = { x: 0, y: 100 };
+    } else if (givenPosition.position === "bottomright") {
+      xy = { x: 100, y: 100 };
+    } else if (givenPosition.position === "center") {
+      xy = { x: 50, y: 50 };
+    } else {
+      assertUnreachable12(givenPosition.position);
+    }
+    return { ...givenPosition, ...xy, xPct: xy.x, yPct: xy.y };
+  }
+  if (givenPosition.type === "coordinate") {
+    if (!currentVideo || !currentGraphic) {
+      return { ...givenPosition, xPct: 0, yPct: 0 };
+    }
+    const { width: videoWidth, height: videoHeight } = currentVideo;
+    const { width: graphicWidth, height: graphicHeight } = currentGraphic;
+    const maxX = videoWidth - graphicWidth;
+    const maxY = videoHeight - graphicHeight;
+    return {
+      ...givenPosition,
+      x: clamp(0, givenPosition.x, maxX),
+      xPct: clamp(0, givenPosition.x * 100 / maxX, 100),
+      y: clamp(0, givenPosition.y, maxY),
+      yPct: clamp(0, givenPosition.y * 100 / maxY, 100)
+    };
+  }
+  return { ...givenPosition, xPct: givenPosition.x, yPct: givenPosition.y };
+}
+function clamp(min, num, max) {
+  return num < min ? min : num > max ? max : num;
+}
+function assertUnreachable12(_) {
+  throw new Error("Didn't expect to get here");
+}
+var import_jsx_runtime20, import_react19, PositionSelector, summary_view_default4;
+var init_summary_view4 = __esm({
+  "build/processor.onscreenGraphic/summary-view.js"() {
+    "use strict";
+    import_jsx_runtime20 = __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);
+      const initialPosition = convertPos(givenPosition);
+      const [position, setLocalPosition] = (0, import_react19.useState)(initialPosition);
+      const setPosition = (v) => {
+        setLocalPosition(v);
+        onChange(v);
+      };
+      const [positionUnit, setPositionUnit] = (0, import_react19.useState)(position.type === "coordinate" ? "px" : "%");
+      const [isDragging, setIsDragging] = (0, import_react19.useState)(false);
+      const [dragStart, setDragStart] = (0, import_react19.useState)({ xPct: 0, yPct: 0, cx: 0, cy: 0 });
+      const previewAreaRef = (0, import_react19.useRef)(null);
+      const previewTargetRef = (0, import_react19.useRef)(null);
+      const handleMouseDown = (e) => {
+        setIsDragging(true);
+        setDragStart({
+          ...position,
+          cx: e.clientX,
+          cy: e.clientY
+        });
+        handleMouseMove(e);
+      };
+      const handleMouseMove = (e) => {
+        if (!isDragging)
+          return;
+        const boundingBox = previewAreaRef.current?.getBoundingClientRect() ?? { width: 0, height: 0 };
+        const bbTarget = previewTargetRef.current?.getBoundingClientRect() ?? { width: 0, height: 0 };
+        const clientWidth = boundingBox.width - bbTarget.width;
+        const clientHeight = boundingBox.height - bbTarget.height;
+        const newX = clamp(0, dragStart.xPct + (e.clientX - dragStart.cx) * (100 / clientWidth), 100);
+        const newY = clamp(0, dragStart.yPct + (e.clientY - dragStart.cy) * (100 / clientHeight), 100);
+        if (positionUnit === "px" && currentVideo && currentGraphic) {
+          const { width: videoWidth, height: videoHeight } = currentVideo;
+          const { width: graphicWidth, height: graphicHeight } = currentGraphic;
+          const maxX = videoWidth - graphicWidth;
+          const maxY = videoHeight - graphicHeight;
+          setPosition({
+            type: "coordinate",
+            x: newX * maxX / 100,
+            y: newY * maxY / 100,
+            xPct: newX,
+            yPct: newY
+          });
+        } else {
+          setPosition({
+            type: "percentage",
+            x: newX,
+            y: newY,
+            xPct: newX,
+            yPct: newY
+          });
+        }
+      };
+      const handleMouseUp = () => {
+        setIsDragging(false);
+      };
+      (0, import_react19.useEffect)(() => {
+        if (isDragging) {
+          window.addEventListener("mousemove", handleMouseMove);
+          window.addEventListener("mouseup", handleMouseUp);
+        }
+        return () => {
+          window.removeEventListener("mousemove", handleMouseMove);
+          window.removeEventListener("mouseup", handleMouseUp);
+        };
+      }, [isDragging]);
+      return (0, import_jsx_runtime20.jsxs)("div", { className: "relative w-full max-w-lg mx-auto mt-4 mb-8", children: [(0, import_jsx_runtime20.jsxs)("div", { className: "mb-4 flex items-center gap-2", children: [(0, import_jsx_runtime20.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Position Type:" }), (0, import_jsx_runtime20.jsxs)("select", { value: position.type, onChange: (e) => {
+        const newType = e.target.value;
+        if (newType === "named") {
+          setPosition(convertPos({ type: "named", position: "topleft" }));
+        } else {
+          setPositionUnit("%");
+          setPosition({ ...convertPos(position), type: "percentage" });
+        }
+      }, className: "node-editor-select-input", children: [(0, import_jsx_runtime20.jsx)("option", { value: "coordinate", children: "Custom Position" }), (0, import_jsx_runtime20.jsx)("option", { value: "named", children: "Preset Position" })] })] }), position.type === "named" ? (0, import_jsx_runtime20.jsx)("div", { className: "mb-4", children: (0, import_jsx_runtime20.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_runtime20.jsx)("option", { value: "topleft", children: "Top Left" }), (0, import_jsx_runtime20.jsx)("option", { value: "topright", children: "Top Right" }), (0, import_jsx_runtime20.jsx)("option", { value: "bottomleft", children: "Bottom Left" }), (0, import_jsx_runtime20.jsx)("option", { value: "bottomright", children: "Bottom Right" }), (0, import_jsx_runtime20.jsx)("option", { value: "center", children: "Centered" })] }) }) : (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [(0, import_jsx_runtime20.jsxs)("div", { className: "mb-4 flex items-center gap-2", children: [(0, import_jsx_runtime20.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Position Unit:" }), (0, import_jsx_runtime20.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;
+          const { width: graphicWidth, height: graphicHeight } = currentGraphic;
+          const maxX = videoWidth - graphicWidth;
+          const maxY = videoHeight - graphicHeight;
+          setPosition({
+            ...position,
+            type: "coordinate",
+            x: position.xPct * maxX / 100,
+            y: position.yPct * maxY / 100,
+            xStr: void 0,
+            yStr: void 0
+          });
+        } else if (e.target.value === "%") {
+          setPosition({
+            ...position,
+            type: "percentage",
+            x: position.xPct,
+            y: position.yPct,
+            xStr: void 0,
+            yStr: void 0
+          });
+        }
+      }, className: "node-editor-select-input", children: [(0, import_jsx_runtime20.jsx)("option", { value: "px", children: "Pixels" }), (0, import_jsx_runtime20.jsx)("option", { value: "%", children: "Percentage" })] })] }), (0, import_jsx_runtime20.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_runtime20.jsxs)("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-gray-500 dark:text-gray-400", children: [(0, import_jsx_runtime20.jsx)("span", { children: currentVideo ? "Video Preview Area" : "Video Dimensions Unknown" }), " ", currentVideo ? (0, import_jsx_runtime20.jsxs)("span", { children: [currentVideo.width, "x", currentVideo.height, "px"] }) : ""] }), (0, import_jsx_runtime20.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_runtime20.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_runtime20.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_runtime20.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_runtime20.jsxs)("div", { className: "mt-2 flex gap-4", children: [(0, import_jsx_runtime20.jsxs)("div", { children: [(0, import_jsx_runtime20.jsxs)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: ["X Position ", positionUnit] }), (0, import_jsx_runtime20.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",
+          x: newX,
+          xStr: e.target.value,
+          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_runtime20.jsxs)("div", { children: [(0, import_jsx_runtime20.jsxs)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: ["Y Position ", positionUnit] }), (0, import_jsx_runtime20.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",
+          x: position.x,
+          xStr: position.xStr,
+          y: newY,
+          yStr: e.target.value
+        }));
+      }, 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_default4 = SummaryView7;
+  }
+});
+
 // ../../node_modules/@kurkle/color/dist/color.esm.js
 function round(v) {
   return v + 0.5 | 0;
@@ -15144,14 +15675,14 @@ var init_auto = __esm({
   }
 });
 
-// build/util.latency/inline-view.js
-var inline_view_exports7 = {};
-__export(inline_view_exports7, {
-  default: () => inline_view_default7
+// build/util.stats.latency/inline-view.js
+var inline_view_exports9 = {};
+__export(inline_view_exports9, {
+  default: () => inline_view_default9
 });
-function InlineView10({ state, config: _2 }) {
-  const chartContainer = (0, import_react18.useRef)(null);
-  const [chartControl, setChartControl] = (0, import_react18.useState)(void 0);
+function InlineView12({ state, config: _2 }) {
+  const chartContainer = (0, import_react21.useRef)(null);
+  const [chartControl, setChartControl] = (0, import_react21.useState)(void 0);
   function makeDataSet(key, color2, values) {
     return {
       label: key,
@@ -15168,7 +15699,7 @@ function InlineView10({ state, config: _2 }) {
       datasets: [makeDataSet("latency", "rgba(255, 0, 0, 255)", state2.values)]
     };
   }
-  (0, import_react18.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!chartContainer.current)
       return;
     auto_default.defaults.color = "#FFF";
@@ -15206,237 +15737,47 @@ function InlineView10({ state, config: _2 }) {
       chart.update();
     }, 100);
   }, [chartContainer]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!chartControl)
       return;
     chartControl.data = makeData(state);
   }, [state]);
-  return (0, import_jsx_runtime19.jsx)("div", { className: "bg-gray-50 dark:bg-gray-700 rounded", style: { width: "360px", height: "200px", padding: "10px" }, children: (0, import_jsx_runtime19.jsx)("canvas", { className: "bg-gray-50 dark:bg-gray-700 rounded", ref: chartContainer }) });
+  return (0, import_jsx_runtime21.jsx)("div", { className: "bg-gray-50 dark:bg-gray-700 rounded", style: { width: "360px", height: "200px", padding: "10px" }, children: (0, import_jsx_runtime21.jsx)("canvas", { className: "bg-gray-50 dark:bg-gray-700 rounded", ref: chartContainer }) });
 }
-var import_jsx_runtime19, import_react18, inline_view_default7;
-var init_inline_view7 = __esm({
-  "build/util.latency/inline-view.js"() {
+var import_jsx_runtime21, import_react21, inline_view_default9;
+var init_inline_view9 = __esm({
+  "build/util.stats.latency/inline-view.js"() {
     "use strict";
-    import_jsx_runtime19 = __toESM(require_jsx_runtime());
-    import_react18 = __toESM(require_react());
+    import_jsx_runtime21 = __toESM(require_jsx_runtime());
+    import_react21 = __toESM(require_react());
     init_auto();
-    inline_view_default7 = InlineView10;
+    inline_view_default9 = InlineView12;
   }
 });
 
-// build/util.latency/source-node-selection.js
+// build/util.stats.latency/source-node-selection.js
 var source_node_selection_exports = {};
 __export(source_node_selection_exports, {
   default: () => source_node_selection_default
 });
 function SourceNodeSelection(props) {
-  return (0, import_jsx_runtime20.jsx)("div", { children: (0, import_jsx_runtime20.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime20.jsx)("option", { value: "", children: "---" }, "empty"), Object.values(props.latestDocument.components).map((o, i) => {
+  return (0, import_jsx_runtime22.jsx)("div", { children: (0, import_jsx_runtime22.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime22.jsx)("option", { value: "", children: "---" }, "empty"), Object.values(props.latestDocument.components).map((o, i) => {
     if (o.id == props.id)
-      return (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, {});
+      return (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, {});
     if (o.info.category === "output")
       return;
-    return (0, import_jsx_runtime20.jsx)("option", { value: o.id, children: o.config.displayName }, i);
+    return (0, import_jsx_runtime22.jsx)("option", { value: o.id, children: o.config.displayName }, i);
   })] }) });
   function myOnChange(e) {
     props.onChanged(e.target.value);
   }
 }
-var import_jsx_runtime20, source_node_selection_default;
+var import_jsx_runtime22, source_node_selection_default;
 var init_source_node_selection = __esm({
-  "build/util.latency/source-node-selection.js"() {
-    "use strict";
-    import_jsx_runtime20 = __toESM(require_jsx_runtime());
-    source_node_selection_default = SourceNodeSelection;
-  }
-});
-
-// build/util.ma35d/inline-view.js
-var inline_view_exports8 = {};
-__export(inline_view_exports8, {
-  default: () => inline_view_default8
-});
-function InlineView11({ state, config: _2 }) {
-  const chartContainer = (0, import_react20.useRef)(null);
-  const [chartControl, setChartControl] = (0, import_react20.useState)(void 0);
-  function makeDataSet(key, color2, values) {
-    return {
-      label: key,
-      fill: false,
-      borderColor: color2,
-      borderWidth: 1,
-      pointStyle: "dash",
-      data: values
-    };
-  }
-  function makeData(state2) {
-    return {
-      labels: new Array(state2.decoder.length).fill(0).map((_, i) => i).map((_) => ""),
-      datasets: [
-        makeDataSet("decoder", "rgba(255, 0, 0, 255)", state2.decoder),
-        makeDataSet("scaler", "rgba(0, 255, 0, 255)", state2.scaler),
-        makeDataSet("encoder", "rgba(0, 0, 255, 255)", state2.encoder)
-      ]
-    };
-  }
-  (0, import_react20.useEffect)(() => {
-    if (!chartContainer.current)
-      return;
-    auto_default.defaults.color = "#FFF";
-    const chart = new auto_default(chartContainer.current, {
-      type: "line",
-      options: {
-        plugins: {
-          legend: {
-            display: true
-          }
-        },
-        animation: false,
-        color: "#FFF",
-        scales: {
-          x: {
-            min: 0,
-            max: 200,
-            grid: {
-              display: false
-            }
-          },
-          y: {
-            min: 0,
-            max: 100,
-            grid: {
-              display: false
-            }
-          }
-        }
-      },
-      data: makeData(state)
-    });
-    setChartControl(chart);
-    setInterval(() => {
-      chart.update();
-    }, 100);
-  }, [chartContainer]);
-  (0, import_react20.useEffect)(() => {
-    if (!chartControl)
-      return;
-    chartControl.data = makeData(state);
-  }, [state]);
-  return (0, import_jsx_runtime21.jsx)("div", { className: "bg-gray-50 dark:bg-gray-700 rounded", style: { width: "360px", height: "200px", padding: "10px" }, children: (0, import_jsx_runtime21.jsx)("canvas", { className: "bg-gray-50 dark:bg-gray-700 rounded", ref: chartContainer }) });
-}
-var import_jsx_runtime21, import_react20, inline_view_default8;
-var init_inline_view8 = __esm({
-  "build/util.ma35d/inline-view.js"() {
-    "use strict";
-    import_jsx_runtime21 = __toESM(require_jsx_runtime());
-    import_react20 = __toESM(require_react());
-    init_auto();
-    inline_view_default8 = InlineView11;
-  }
-});
-
-// build/util.timestamps/inline-view.js
-var inline_view_exports9 = {};
-__export(inline_view_exports9, {
-  default: () => inline_view_default9
-});
-function InlineView12({ state, config: _2 }) {
-  const chartContainer = (0, import_react22.useRef)(null);
-  const [chartControl, setChartControl] = (0, import_react22.useState)(void 0);
-  (0, import_react22.useEffect)(() => {
-    if (!chartContainer.current)
-      return;
-    if (state.timestamps.length < 2)
-      return;
-    auto_default.defaults.color = "#FFF";
-    const chart = new auto_default(chartContainer.current, {
-      type: "line",
-      options: {
-        plugins: {
-          legend: {
-            display: false
-          }
-        },
-        // spanGaps: true,
-        animation: false,
-        // backgroundColor: 'rgba(0,0,0, 255)',
-        color: "#FFF",
-        // borderColor: '#FFF',
-        // aspectRatio: 1,
-        scales: {
-          x: {
-            min: 0,
-            max: 200,
-            grid: {
-              display: false
-            }
-          },
-          y: {
-            min: 0,
-            max: 5e3,
-            grid: {
-              display: false
-            }
-          }
-        }
-      },
-      data: {
-        labels: new Array(200).fill(0).map((_, i) => i).map((_) => ""),
-        datasets: state.timestamps.map((t) => {
-          const mapped = t.timestamps.map((f) => {
-            const elapsedWall = f.wall - t.startTimeMs;
-            const elapsedTime = (f.ts - t.startTimestamp) * 1e3;
-            return Math.abs(elapsedTime - elapsedWall);
-          });
-          return {
-            label: t.key,
-            fill: false,
-            borderColor: "rgba(255, 0, 0, 255)",
-            borderWidth: 1,
-            pointStyle: "dash",
-            // backgroundColor: 'rgba(255, 128, 128, 255)',
-            data: mapped
-          };
-        })
-      }
-    });
-    setChartControl(chart);
-    setInterval(() => {
-      chart.update();
-    }, 100);
-  }, [chartContainer]);
-  (0, import_react22.useEffect)(() => {
-    if (!chartControl)
-      return;
-    chartControl.data = {
-      labels: new Array(200).fill(0).map((_, i) => i).map((_) => ""),
-      datasets: state.timestamps.map((t) => {
-        const mapped = t.timestamps.map((f) => {
-          const elapsedWall = f.wall - t.startTimeMs;
-          const elapsedTime = (f.ts - t.startTimestamp) * 1e3;
-          return Math.abs(elapsedTime - elapsedWall);
-        });
-        return {
-          label: t.key,
-          fill: false,
-          borderColor: "rgba(255, 0, 0, 255)",
-          borderWidth: 1,
-          pointStyle: "dash",
-          // backgroundColor: 'rgba(255, 128, 128, 255)',
-          data: mapped
-        };
-      })
-    };
-  }, [state]);
-  return (0, import_jsx_runtime22.jsx)("div", { className: "bg-gray-50 dark:bg-gray-700 rounded", style: { width: "360px", height: "200px", padding: "10px" }, children: (0, import_jsx_runtime22.jsx)("canvas", { className: "bg-gray-50 dark:bg-gray-700 rounded", ref: chartContainer }) });
-}
-var import_jsx_runtime22, import_react22, inline_view_default9;
-var init_inline_view9 = __esm({
-  "build/util.timestamps/inline-view.js"() {
+  "build/util.stats.latency/source-node-selection.js"() {
     "use strict";
     import_jsx_runtime22 = __toESM(require_jsx_runtime());
-    import_react22 = __toESM(require_react());
-    init_auto();
-    inline_view_default9 = InlineView12;
+    source_node_selection_default = SourceNodeSelection;
   }
 });
 
@@ -15450,6 +15791,7 @@ function info_default({ defineComponent, Av, validation: { Z, Port, SourceName,
     identifier: "input.rtmp",
     category: "input",
     name: "RTMP Ingest",
+    description: "A component that listens for RTMP input on the address specified.",
     subscription: {
       accepts: void 0,
       produces: {
@@ -15494,7 +15836,7 @@ function info_default({ defineComponent, Av, validation: { Z, Port, SourceName,
     configForm: {
       form: {
         port: { help: "The port this RTMP input will listen on", hint: { type: "numeric", validation: Port, defaultValue: defaultPort, global: unique("port") } },
-        ssl: { help: "Optional: SSL", hint: { type: "boolean" } },
+        ssl: { help: "Optional: SSL", hint: { type: "boolean", optional: true } },
         appName: { help: "Name of the app", hint: { type: "text", validation: Z.string().min(1), defaultValue: "norsk" } },
         streamNames: {
           help: "List of stream names to assign to the accepted streams",
@@ -15519,6 +15861,7 @@ function info_default2({ defineComponent, Audio }) {
     identifier: "input.silence",
     category: "input",
     name: "Silence Generator",
+    description: "A component that produces silent audio streams with configurable sample rate and channel layout.",
     subscription: {
       produces: {
         type: "single-stream",
@@ -15527,14 +15870,14 @@ function info_default2({ defineComponent, Audio }) {
     },
     display: (desc) => {
       return {
-        sampleRate: desc.config.sampleRate.toString() + "khz",
+        sampleRate: desc.config.sampleRate.toString() + "Hz",
         channelLayout: desc.config.channelLayout.toString()
       };
     },
     configForm: {
       form: {
         sampleRate: {
-          help: "Samplerate in khz of the generated audio",
+          help: "Samplerate in Hz of the generated audio",
           hint: {
             type: "select",
             options: [
@@ -15566,6 +15909,7 @@ var result = ({ Z }) => ({
     help: "The latency value in the receiving direction of the socket (SRTO_RCVLATENCY)",
     hint: {
       type: "numeric",
+      optional: true,
       validation: Z.optional(Z.number())
     }
   },
@@ -15573,13 +15917,15 @@ var result = ({ Z }) => ({
     help: "The latency value provided by the sender side as a minimum value for the receiver (SRTO_PEERLATENCY)",
     hint: {
       type: "numeric",
+      optional: true,
       validation: Z.optional(Z.number())
     }
   },
   inputBandwidth: {
-    help: "Input bandwidth (SRTO_INPUTBW xxx",
+    help: "Input bandwidth (SRTO_INPUTBW)",
     hint: {
       type: "numeric",
+      optional: true,
       validation: Z.optional(Z.number())
     }
   },
@@ -15587,6 +15933,7 @@ var result = ({ Z }) => ({
     help: "Overhead bandwidth (SRTO_OHEADBW)",
     hint: {
       type: "numeric",
+      optional: true,
       validation: Z.optional(Z.number())
     }
   },
@@ -15594,6 +15941,7 @@ var result = ({ Z }) => ({
     help: "Max bandwidth (SRTO_MAXBW)",
     hint: {
       type: "numeric",
+      optional: true,
       validation: Z.optional(Z.number())
     }
   }
@@ -15603,7 +15951,7 @@ var srt_socket_options_default = result;
 // build/input.srt-caller/info.js
 var import_react2 = __toESM(require_react());
 function info_default3({ defineComponent, Av, validation }) {
-  const { Port, IpAddress, SourceName, SrtPassphrase, SrtStreamId } = validation;
+  const { Port, Hostname, SourceName, SrtPassphrase, SrtStreamId } = validation;
   const SocketConfiguration2 = import_react2.default.lazy(async () => {
     const views = await Promise.resolve().then(() => (init_srt_form_views(), srt_form_views_exports));
     return { default: views.SocketConfiguration };
@@ -15612,6 +15960,7 @@ function info_default3({ defineComponent, Av, validation }) {
     identifier: "input.srt-caller",
     category: "input",
     name: "SRT Ingest (Caller)",
+    description: "This component allows you to receive Secure Reliable Transport (SRT) streams by calling a remote SRT listener.",
     subscription: {
       accepts: void 0,
       produces: {
@@ -15622,16 +15971,16 @@ function info_default3({ defineComponent, Av, validation }) {
     display: (desc) => {
       return {
         port: desc.config.port.toString(),
-        ip: desc.config.ip
+        ip: desc.config.host
       };
     },
     configForm: {
       form: {
         port: { help: "The port this SRT input will connect to", hint: { type: "numeric", validation: Port, defaultValue: 5001 } },
-        ip: { help: "The IP address this SRT input will connect to", hint: { type: "text", validation: IpAddress, defaultValue: "0.0.0.0" } },
+        host: { help: "The IP address/hostname this SRT input will connect to", hint: { type: "text", validation: Hostname, defaultValue: "0.0.0.0" } },
         sourceName: { help: "Source name to identify this by", hint: { type: "text", validation: SourceName, defaultValue: "camera1" } },
-        passphrase: { help: "Optional: Authentication for this SRT input", hint: { type: "text", validation: SrtPassphrase } },
-        streamId: { help: "Optional: StreamId to use when calling the remote listener", hint: { type: "text", validation: SrtStreamId } },
+        passphrase: { help: "Optional: Authentication for this SRT input", hint: { type: "text", optional: true, validation: SrtPassphrase } },
+        streamId: { help: "Optional: StreamId to use when calling the remote listener", hint: { type: "text", optional: true, validation: SrtStreamId } },
         socketOptions: {
           help: "Socket Options",
           hint: {
@@ -15650,7 +15999,7 @@ var import_react3 = __toESM(require_react());
 var InlineView4 = import_react3.default.lazy(async () => Promise.resolve().then(() => (init_inline_view2(), inline_view_exports2)));
 var SummaryView4 = import_react3.default.lazy(async () => Promise.resolve().then(() => (init_summary_view2(), summary_view_exports2)));
 function info_default4({ defineComponent, Av, validation }) {
-  const { Z, Port, IpAddress, SourceName, SrtPassphrase, unique } = validation;
+  const { Z, Port, Hostname, SourceName, SrtPassphrase, unique } = validation;
   const SocketConfiguration2 = import_react3.default.lazy(async () => {
     const views = await Promise.resolve().then(() => (init_srt_form_views(), srt_form_views_exports));
     return { default: views.SocketConfiguration };
@@ -15659,6 +16008,7 @@ function info_default4({ defineComponent, Av, validation }) {
     identifier: "input.srt-listener",
     category: "input",
     name: "SRT Ingest (Listener)",
+    description: "This component handles media ingest via the SRT(Secure Reliable Transport) protocol. It acts as a listener, receiving media streams from remote SRT sources and is highly configurable, allowing for custom IP addresses, ports, and stream handling behaviours.",
     subscription: {
       accepts: void 0,
       produces: {
@@ -15679,7 +16029,7 @@ function info_default4({ defineComponent, Av, validation }) {
     display: (desc) => {
       return {
         port: desc.config.port.toString(),
-        ip: desc.config.ip
+        ip: desc.config.host
       };
     },
     runtime: {
@@ -15713,11 +16063,11 @@ function info_default4({ defineComponent, Av, validation }) {
             envOverride: true
           }
         },
-        ip: {
-          help: "The IP address this SRT input will listen on",
+        host: {
+          help: "The IP address/hostname this SRT input will listen on",
           hint: {
             type: "text",
-            validation: IpAddress,
+            validation: Hostname,
             defaultValue: "0.0.0.0",
             envOverride: true
           }
@@ -15726,6 +16076,7 @@ function info_default4({ defineComponent, Av, validation }) {
           help: "Optional: Authentication for this SRT input",
           hint: {
             type: "text",
+            optional: true,
             validation: SrtPassphrase,
             envOverride: true
           }
@@ -15767,11 +16118,12 @@ function assertUnreachable2(_) {
 }
 
 // build/input.udp-ts/info.js
-function info_default5({ defineComponent, Av, validation: { Z, Port, IpAddress, SourceName, unique } }) {
+function info_default5({ defineComponent, Av, validation: { Z, Port, Hostname, SourceName, unique } }) {
   return defineComponent({
     identifier: "input.udp-ts",
     category: "input",
     name: "UDP TS ingest",
+    description: "This component receives and processes MPEG Transport Streams (TS) over UDP.",
     subscription: {
       accepts: void 0,
       produces: {
@@ -15782,15 +16134,15 @@ function info_default5({ defineComponent, Av, validation: { Z, Port, IpAddress,
     display: (desc) => {
       return {
         port: desc.config.port.toString(),
-        ip: desc.config.ip
+        ip: desc.config.host
       };
     },
     configForm: {
       form: {
         port: { help: "The receiving port", hint: { type: "numeric", validation: Port, defaultValue: 5001, global: unique("port") } },
-        ip: { help: "The receiving IP address", hint: { type: "text", validation: IpAddress, defaultValue: "127.0.0.1" } },
+        host: { help: "The receiving IP address/hostname", hint: { type: "text", validation: Hostname, defaultValue: "127.0.0.1" } },
         sourceName: { help: "Source name to identify this by", hint: { type: "text", validation: SourceName, defaultValue: "udp-ts", global: unique("sourceName") } },
-        interface: { help: "Optional interface to bind to", hint: { type: "text", validation: Z.union([Z.string().min(2).max(32), Z.string().length(0)]).optional() } },
+        interface: { help: "Optional interface to bind to", hint: { type: "text", optional: true, validation: Z.union([Z.string().min(2).max(32), Z.string().length(0)]).optional() } },
         timeout: { help: "Timeout in milliseconds before determining the input is closed", hint: { type: "numeric", validation: Z.number().refine((value) => value > 0 && value < 6e5, "Timeout must be less than 10 minutes"), defaultValue: 1e3 } },
         rtpDecapsulate: { help: "Whether to expect the input TS to be encapsulated in RTP via RFC 2250 (default: false)", hint: { type: "boolean" } }
       }
@@ -15799,11 +16151,12 @@ function info_default5({ defineComponent, Av, validation: { Z, Port, IpAddress,
 }
 
 // build/input.videoTestCard/info.js
-function info_default6({ defineComponent, Video, validation: { SourceName }, common: { Resolutions, FrameRates } }) {
+function info_default6({ defineComponent, Video, validation: { SourceName, unique }, common: { Resolutions, FrameRates } }) {
   return defineComponent({
     identifier: "input.videoTestCard",
     category: "input",
     name: "Video Test Card",
+    description: "The Video Test Card component generates a test card video stream with customizable settings.",
     subscription: {
       accepts: void 0,
       produces: {
@@ -15820,9 +16173,18 @@ function info_default6({ defineComponent, Video, validation: { SourceName }, com
     },
     configForm: {
       form: {
-        resolution: { help: "The resolution of the test card stream", hint: { type: "select", options: Resolutions, defaultValue: { width: 1280, height: 720 } } },
-        frameRate: { help: "The frame rate of the test card stream", hint: { type: "select", options: FrameRates, defaultValue: { frames: 25, seconds: 1 } } },
-        sourceName: { help: "Source name to use for this test card stream", hint: { type: "text", validation: SourceName, defaultValue: "video" } },
+        resolution: {
+          help: "The resolution of the test card stream",
+          hint: { type: "select", options: Resolutions, defaultValue: { width: 1280, height: 720 } }
+        },
+        frameRate: {
+          help: "The frame rate of the test card stream",
+          hint: { type: "select", options: FrameRates, defaultValue: { frames: 25, seconds: 1 } }
+        },
+        sourceName: {
+          help: "Source name to use for this test card stream",
+          hint: { type: "text", validation: SourceName, defaultValue: "video", global: unique("sourceName") }
+        },
         pattern: {
           help: "The pattern on the test card stream",
           hint: {
@@ -15841,15 +16203,16 @@ function info_default6({ defineComponent, Video, validation: { SourceName }, com
 }
 
 // build/output.autoCmaf/info.js
-var import_react6 = __toESM(require_react());
-function info_default7({ defineComponent, All, validation: { Z, Hostname } }) {
-  const SummaryView6 = import_react6.default.lazy(async () => Promise.resolve().then(() => (init_summary(), summary_exports)));
-  const FullscreenView2 = import_react6.default.lazy(async () => Promise.resolve().then(() => (init_fullscreen(), fullscreen_exports)));
-  const SegmentConfiguration2 = import_react6.default.lazy(async () => {
+var import_config = __toESM(require_config());
+var import_react5 = __toESM(require_react());
+function info_default7(R) {
+  const { defineComponent, All, validation: { Z, Hostname } } = R;
+  const FullscreenView2 = import_react5.default.lazy(async () => Promise.resolve().then(() => (init_fullscreen(), fullscreen_exports)));
+  const SegmentConfiguration2 = import_react5.default.lazy(async () => {
     const views = await Promise.resolve().then(() => (init_form_views(), form_views_exports));
     return { default: views.SegmentConfiguration };
   });
-  const S3Destination2 = import_react6.default.lazy(async () => {
+  const S3Destination2 = import_react5.default.lazy(async () => {
     const views = await Promise.resolve().then(() => (init_form_views(), form_views_exports));
     return { default: views.S3Destination };
   });
@@ -15857,6 +16220,7 @@ function info_default7({ defineComponent, All, validation: { Z, Hostname } }) {
     identifier: "output.autoCmaf",
     category: "output",
     name: "Auto CMAF",
+    description: "This component handles the creation of CMAF outputs from multiple video and audio streams.",
     subscription: {
       // Again, accept anything
       // but reject the same stream twice
@@ -15867,10 +16231,36 @@ function info_default7({ defineComponent, All, validation: { Z, Hostname } }) {
       }
     },
     extraValidation: (ctx) => {
-      const audioStreams = ctx.subscriptions.filter((s) => s.streams.select.includes("audio"));
+      const audioStreams = ctx.subscriptions.filter((s) => s.validatedStreams.select.includes("audio"));
       if (audioStreams.length == 0) {
         ctx.addError("AutoCMAF requires at least one audio stream");
       }
+      const uniqueVideoStreamNodes = ctx.subscriptions.reduce((acc, s) => {
+        if (s.validatedStreams.select.includes("video")) {
+          if (!acc.includes(s.source)) {
+            acc.push(s.source);
+          }
+        }
+        return acc;
+      }, []);
+      if (uniqueVideoStreamNodes.length > 1) {
+        ctx.addWarning("More than one video source detected, did you mean to do this? (For example: Did you subscribe to both a source *and* a ladder?)");
+      }
+      if (ctx.config.drmProvider && ctx.config.__global) {
+        if (ctx.config.drmProvider === "ezdrm") {
+          if (!ctx.config.__global.ezdrmConfig?.token) {
+            ctx.addError("Provide EZDRM token in global configuration");
+          }
+        }
+        if (ctx.config.drmProvider === "axinom") {
+          if (!ctx.config.__global.axinomConfig?.tenantId) {
+            ctx.addError("Provide Axinom DRM Tenant ID in global configuration");
+          }
+          if (!ctx.config.__global.axinomConfig?.managementKey) {
+            ctx.addError("Provide Axinom DRM Management Key in global configuration");
+          }
+        }
+      }
     },
     display: (desc) => {
       return {
@@ -15878,22 +16268,35 @@ function info_default7({ defineComponent, All, validation: { Z, Hostname } }) {
       };
     },
     runtime: {
-      initialState: () => ({}),
+      initialState: () => ({
+        enabled: true
+      }),
       handleEvent(ev, state) {
         const evType = ev.type;
         switch (evType) {
           case "url-published":
             state.url = ev.url;
+            state.drmToken = ev.drmToken;
+            break;
+          case "output-enabled":
+            state.enabled = true;
+            break;
+          case "output-disabled":
+            state.enabled = false;
             break;
           default:
             assertUnreachable3(evType);
         }
         return { ...state };
       },
-      summary: SummaryView6,
+      //summary: SummaryView,
       fullscreen: FullscreenView2
     },
     configForm: {
+      global: {
+        ezdrmConfig: (0, import_config.GlobalEzDrmConfig)(R),
+        axinomConfig: (0, import_config.GlobalAxinomConfig)(R)
+      },
       form: {
         name: {
           help: "The name of the multivariant/dash playlist",
@@ -15961,6 +16364,7 @@ function info_default7({ defineComponent, All, validation: { Z, Hostname } }) {
                 help: "How many segments back should a player start",
                 hint: {
                   type: "numeric",
+                  optional: true,
                   validation: Z.number().min(3).max(10).int().optional()
                 }
               },
@@ -15968,6 +16372,7 @@ function info_default7({ defineComponent, All, validation: { Z, Hostname } }) {
                 help: "How many parts back should a player start",
                 hint: {
                   type: "numeric",
+                  optional: true,
                   validation: Z.number().min(3).max(10).int().optional()
                 }
               }
@@ -15985,12 +16390,11 @@ function info_default7({ defineComponent, All, validation: { Z, Hostname } }) {
                 help: "The hostname of the s3 bucket to push to",
                 hint: {
                   type: "text",
-                  defaultValue: "",
                   validation: Hostname
                 }
               },
               prefix: {
-                help: "The sub directory of the bucket to place playlists + segments into",
+                help: "The sub directory of the bucket to place playlists and segments into",
                 hint: {
                   type: "text",
                   defaultValue: ""
@@ -16005,6 +16409,23 @@ function info_default7({ defineComponent, All, validation: { Z, Hostname } }) {
               }
             }
           }
+        },
+        drmProvider: {
+          help: "Encrypt with a DRM provider (if configured globally)",
+          hint: {
+            type: "select",
+            optional: true,
+            options: [
+              {
+                display: "EZDRM",
+                value: "ezdrm"
+              },
+              {
+                display: "Axinom DRM",
+                value: "axinom"
+              }
+            ]
+          }
         }
       }
     }
@@ -16015,15 +16436,16 @@ function assertUnreachable3(_) {
 }
 
 // build/output.preview/info.js
-var import_react8 = __toESM(require_react());
-var import_config = __toESM(require_config());
+var import_react7 = __toESM(require_react());
+var import_config2 = __toESM(require_config());
 function info_default8(R) {
   const { defineComponent, Av, validation: { JitterBuffer } } = R;
-  const InlineView13 = import_react8.default.lazy(async () => Promise.resolve().then(() => (init_inline_view3(), inline_view_exports3)));
+  const InlineView13 = import_react7.default.lazy(async () => Promise.resolve().then(() => (init_inline_view3(), inline_view_exports3)));
   return defineComponent({
     identifier: "output.preview",
     category: "output",
     name: "Preview",
+    description: "Preview allows for the real-time preview of media streams. It provides a way to visualize and monitor the output from various media sources before final processing or distribution.",
     subscription: {
       accepts: {
         type: "single-stream",
@@ -16032,8 +16454,8 @@ function info_default8(R) {
       produces: void 0
     },
     extraValidation: (ctx) => {
-      const video = ctx.subscriptions.filter((s) => s.streams.select.includes("video"));
-      const audio = ctx.subscriptions.filter((s) => s.streams.select.includes("audio"));
+      const video = ctx.subscriptions.filter((s) => s.validatedStreams.select.includes("video"));
+      const audio = ctx.subscriptions.filter((s) => s.validatedStreams.select.includes("audio"));
       if (video.length == 1 && audio.length == 1)
         return;
       if (video.length == 0) {
@@ -16073,11 +16495,12 @@ function info_default8(R) {
     },
     configForm: {
       global: {
-        iceServers: (0, import_config.GlobalIceServers)(R),
-        hardware: (0, import_config.HardwareSelection)()
+        iceServers: (0, import_config2.GlobalIceServers)(R),
+        hardware: (0, import_config2.HardwareSelection)()
       },
       form: {
-        bufferDelayMs: { help: "How many milliseconds in the jitter buffer", hint: { type: "numeric", validation: JitterBuffer, defaultValue: 500 } }
+        bufferDelayMs: { help: "How many milliseconds in the jitter buffer", hint: { type: "numeric", validation: JitterBuffer, defaultValue: 500 } },
+        skipTranscode: { help: "Skip transcoding for WebRTC-ready streams", hint: { type: "boolean", defaultValue: false } }
       }
     }
   });
@@ -16087,13 +16510,14 @@ function assertUnreachable4(_) {
 }
 
 // build/output.rtmp/info.js
-var import_react9 = __toESM(require_react());
+var import_react8 = __toESM(require_react());
 function info_default9({ defineComponent, Av, validation: { Z, JitterBuffer } }) {
-  const InlineView13 = import_react9.default.lazy(async () => Promise.resolve().then(() => (init_inline_view4(), inline_view_exports4)));
+  const InlineView13 = import_react8.default.lazy(async () => Promise.resolve().then(() => (init_inline_view4(), inline_view_exports4)));
   return defineComponent({
     identifier: "output.rtmp",
     category: "output",
     name: "RTMP Egest",
+    description: "This component handles the output of RTMP (Real-Time Messaging Protocol) streams. It is used to connect to a remote RTMP server and manage the streaming of media. ",
     subscription: {
       // No validation?
       // Accept either *just* audio, or *just* video, or audio *and* video
@@ -16144,11 +16568,12 @@ function assertUnreachable5(_) {
 }
 
 // build/output.srt/info.js
-var import_react10 = __toESM(require_react());
+var import_react9 = __toESM(require_react());
+var import_util = __toESM(require_util());
 function info_default10(registration) {
   const { defineComponent, All, validation } = registration;
-  const { Port, IpAddress, JitterBuffer, SrtPassphrase, SrtStreamId } = validation;
-  const SocketConfiguration2 = import_react10.default.lazy(async () => {
+  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));
     return { default: views.SocketConfiguration };
   });
@@ -16156,6 +16581,7 @@ function info_default10(registration) {
     identifier: "output.srt",
     category: "output",
     name: "SRT 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: {
       // No validation?
       // Streams have to be unique? That's a stretch goal
@@ -16167,11 +16593,30 @@ function info_default10(registration) {
     display: (desc) => {
       return {
         port: desc.config.port?.toString() ?? "",
-        ip: desc.config.ip,
+        host: desc.config.host,
         mode: desc.config.mode,
         bufferDelayMs: desc.config.bufferDelayMs?.toString() ?? "none"
       };
     },
+    runtime: {
+      initialState: () => ({
+        enabled: true
+      }),
+      handleEvent(ev, state) {
+        const evType = ev.type;
+        switch (evType) {
+          case "output-enabled":
+            state.enabled = true;
+            break;
+          case "output-disabled":
+            state.enabled = false;
+            break;
+          default:
+            (0, import_util.assertUnreachable)(evType);
+        }
+        return { ...state };
+      }
+    },
     configForm: {
       form: {
         port: {
@@ -16187,7 +16632,7 @@ function info_default10(registration) {
             }
           }
         },
-        ip: { help: "The IP address this SRT output will connect to or listen on", hint: { type: "text", validation: IpAddress, defaultValue: "0.0.0.0" } },
+        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" } },
         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: {
@@ -16207,8 +16652,8 @@ function info_default10(registration) {
             ]
           }
         },
-        passphrase: { help: "Optional: Authentication for this SRT output", hint: { type: "text", validation: SrtPassphrase } },
-        streamId: { help: "Optional: StreamId to use when calling a remote listener", hint: { type: "text", validation: SrtStreamId } },
+        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: {
@@ -16226,11 +16671,12 @@ function info_default10(registration) {
 init_info();
 
 // build/output.udpTs/info.js
-function info_default12({ defineComponent, All, validation: { Port, IpAddress, JitterBuffer, Iface, Z } }) {
+function info_default12({ defineComponent, All, validation: { Port, Hostname, JitterBuffer, Iface, Z } }) {
   return defineComponent({
     identifier: "output.udpTs",
     category: "output",
     name: "UDP TS Egest",
+    description: "This component outputs multiple media streams over UDP in TS (Transport Stream) format. It accepts multiple input streams and sends them to a specified IP address and port.",
     subscription: {
       // Just works with no validation
       // although uniqueness again, stretch goal
@@ -16242,7 +16688,7 @@ function info_default12({ defineComponent, All, validation: { Port, IpAddress, J
     display: (desc) => {
       return {
         port: desc.config.port.toString(),
-        destinationIp: desc.config.destinationIp,
+        destinationIp: desc.config.destinationHost,
         interface: desc.config.interface,
         bufferDelayMs: desc.config.bufferDelayMs?.toString() ?? "none"
       };
@@ -16250,7 +16696,7 @@ function info_default12({ defineComponent, All, validation: { Port, IpAddress, J
     configForm: {
       form: {
         port: { help: "The port this UDP TS output will send to", hint: { type: "numeric", validation: Port, defaultValue: 8001 } },
-        destinationIp: { help: "The IP address this UDP TS output will send to", hint: { type: "text", validation: IpAddress, defaultValue: "127.0.0.1" } },
+        destinationHost: { help: "The IP address/Hostname this UDP TS output will send 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 } },
         interface: { help: "Which interface to bind to for publishing", hint: { type: "text", validation: Z.union([Z.string().length(0), Iface]), defaultValue: "any" } }
       }
@@ -16259,13 +16705,16 @@ function info_default12({ defineComponent, All, validation: { Port, IpAddress, J
 }
 
 // build/output.whep/info.js
-var import_config2 = __toESM(require_config());
+var import_config3 = __toESM(require_config());
+var import_react12 = __toESM(require_react());
 function info_default13(R) {
   const { defineComponent, Av, validation: { JitterBuffer } } = R;
+  const InlineView13 = import_react12.default.lazy(async () => Promise.resolve().then(() => (init_inline_view6(), inline_view_exports6)));
   return defineComponent({
     identifier: "output.whep",
     category: "output",
     name: "WHEP Egest",
+    description: "This component allows us to use WebRTC egress for outputs.",
     subscription: {
       // No validation?
       // Accept either *just* audio, or *just* video, or audio *and* video
@@ -16280,9 +16729,25 @@ function info_default13(R) {
     display: (_desc) => {
       return {};
     },
+    css: ["styles.css"],
+    runtime: {
+      initialState: () => ({}),
+      handleEvent(ev, state) {
+        const evType = ev.type;
+        switch (evType) {
+          case "url-published":
+            state.url = ev.url;
+            break;
+          default:
+            assertUnreachable8(evType);
+        }
+        return { ...state };
+      },
+      inline: InlineView13
+    },
     configForm: {
       global: {
-        iceServers: (0, import_config2.GlobalIceServers)(R)
+        iceServers: (0, import_config3.GlobalIceServers)(R)
       },
       form: {
         bufferDelayMs: { help: "How many milliseconds in the jitter buffer", hint: { type: "numeric", validation: JitterBuffer, defaultValue: 500 } }
@@ -16290,14 +16755,21 @@ function info_default13(R) {
     }
   });
 }
+function assertUnreachable8(_) {
+  throw new Error("Didn't expect to get here");
+}
 
 // build/processor.browserOverlay/info.js
-var import_config3 = __toESM(require_config());
+var import_config4 = __toESM(require_config());
+var import_react14 = __toESM(require_react());
+var SummaryView6 = import_react14.default.lazy(async () => Promise.resolve().then(() => (init_summary_view3(), summary_view_exports3)));
+var InlineView10 = import_react14.default.lazy(async () => Promise.resolve().then(() => (init_inline_view7(), inline_view_exports7)));
 function info_default14({ defineComponent, Video, validation: { Z } }) {
   return defineComponent({
-    identifier: "processor.transform.browserOverlay",
+    identifier: "processor.browserOverlay",
     category: "processor",
     name: "Browser Overlay",
+    description: "Capture a live URL and overlay onto a video",
     subscription: {
       // Only accept a single video stream
       accepts: {
@@ -16314,12 +16786,33 @@ function info_default14({ defineComponent, Video, validation: { Z } }) {
     },
     display: (desc) => {
       return {
-        url: desc.config?.url
+        url: desc.config.url
       };
     },
+    runtime: {
+      summary: SummaryView6,
+      inline: InlineView10,
+      initialState: () => ({
+        currentUrl: "",
+        enabled: true
+      }),
+      handleEvent: (ev, state) => {
+        const evType = ev.type;
+        switch (evType) {
+          case "url-changed":
+            return { ...state, currentUrl: ev.url };
+          case "enabled":
+            return { ...state, enabled: true };
+          case "disabled":
+            return { ...state, enabled: false };
+          default:
+            assertUnreachable9(evType);
+        }
+      }
+    },
     configForm: {
       global: {
-        hardware: (0, import_config3.HardwareSelection)()
+        hardware: (0, import_config4.HardwareSelection)()
       },
       form: {
         url: { help: "URL to render on top of the video", hint: { type: "text", validation: Z.string().url(), defaultValue: "" } }
@@ -16327,15 +16820,19 @@ function info_default14({ defineComponent, Video, validation: { Z } }) {
     }
   });
 }
+function assertUnreachable9(_) {
+  throw new Error("Didn't expect to get here");
+}
 
 // build/processor.cascadingSwitch/info.js
 function info_default15({ 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_view6(), inline_view_exports6)));
+  const InlineView13 = React14.lazy(async () => Promise.resolve().then(() => (init_inline_view8(), inline_view_exports8)));
   return defineComponent({
-    identifier: "processor.control.cascadingSwitch",
+    identifier: "processor.cascadingSwitch",
     category: "processor",
     name: "Cascading Switch",
+    description: "This component manages multiple A/V (audio and video) sources based on priority, allowing for the configuration of settings such as resolution, frame rate, sample rate, and channel layout.",
     subscription: {
       // This needs to change anyway
       // but it'll be the same as MCS
@@ -16350,10 +16847,10 @@ function info_default15({ defineComponent, Av, React: React14, common: { Resolut
     },
     extraValidation: function(ctx) {
       ctx.subscriptions.forEach((s) => {
-        if (!s.streams.select.includes("video")) {
+        if (!s.validatedStreams.select.includes("video")) {
           ctx.addError(`Subscription to ${s.source} is missing video`);
         }
-        if (!s.streams.select.includes("audio")) {
+        if (!s.validatedStreams.select.includes("audio")) {
           ctx.addError(`Subscription to ${s.source} is missing audio`);
         }
         if (s.streams.type == "take-all-streams") {
@@ -16409,7 +16906,7 @@ function info_default15({ defineComponent, Av, React: React14, common: { Resolut
             state.availableSources.splice(state.availableSources.indexOf(ev.source), 1);
             return { ...state };
           default:
-            assertUnreachable7(evType);
+            assertUnreachable10(evType);
         }
       },
       inline: InlineView13,
@@ -16460,96 +16957,22 @@ function info_default15({ defineComponent, Av, React: React14, common: { Resolut
     }
   });
 }
-function assertUnreachable7(_) {
-  throw new Error("Didn't expect to get here");
-}
-
-// build/processor.dynamicBug/info.js
-var import_config4 = __toESM(require_config());
-var import_react15 = __toESM(require_react());
-function info_default16({ defineComponent, Video }) {
-  const BugSelection2 = import_react15.default.lazy(async () => Promise.resolve().then(() => (init_bug_selection(), bug_selection_exports)));
-  const SummaryView6 = import_react15.default.lazy(async () => Promise.resolve().then(() => (init_summary_view3(), summary_view_exports3)));
-  return defineComponent({
-    identifier: "processor.dynamicBug",
-    category: "processor",
-    name: "Dynamic Bug",
-    subscription: {
-      // Only accept a single video stream
-      accepts: {
-        type: "single-stream",
-        media: Video
-      },
-      produces: {
-        type: "single-stream",
-        media: Video
-      }
-    },
-    extraValidation: function(ctx) {
-      ctx.requireVideo(1);
-    },
-    display: (desc) => {
-      return {
-        default: desc.config.defaultBug ?? "none"
-      };
-    },
-    runtime: {
-      summary: SummaryView6,
-      initialState: () => ({}),
-      handleEvent: (ev, state) => {
-        const evType = ev.type;
-        switch (evType) {
-          case "bug-changed":
-            return { ...state, activeBug: { file: ev.file, position: ev.position } };
-          default:
-            assertUnreachable8(evType);
-        }
-      }
-    },
-    configForm: {
-      global: {
-        hardware: (0, import_config4.HardwareSelection)()
-      },
-      form: {
-        defaultBug: {
-          help: "The default bug to render on the video (if any)",
-          hint: {
-            type: "custom",
-            component: BugSelection2
-          }
-        },
-        defaultPosition: {
-          help: "The default location to render the bug in",
-          hint: {
-            type: "select",
-            optional: true,
-            options: [
-              { value: "topleft", display: "Top Left" },
-              { value: "topright", display: "Top Right" },
-              { value: "bottomleft", display: "Bottom Left" },
-              { value: "bottomright", display: "Bottom Right" }
-            ]
-          }
-        }
-      }
-    }
-  });
-}
-function assertUnreachable8(_) {
+function assertUnreachable10(_) {
   throw new Error("Didn't expect to get here");
 }
 
 // build/processor.fixedLadder/info.js
 var import_react17 = __toESM(require_react());
 var import_config5 = __toESM(require_config());
-function info_default17({ defineComponent, Video }) {
+function info_default16({ defineComponent, Video }) {
   const RungView = import_react17.default.lazy(async () => Promise.resolve().then(() => (init_rung_view(), rung_view_exports)));
   const CodecEditor3 = import_react17.default.lazy(async () => Promise.resolve().then(() => (init_codec_editor(), codec_editor_exports)));
   const CodecView = import_react17.default.lazy(async () => Promise.resolve().then(() => (init_codec_view(), codec_view_exports)));
   return defineComponent({
-    identifier: "processor.transform.fixedLadder",
+    identifier: "processor.fixedLadder",
     category: "processor",
     name: "Encode Ladder",
+    description: "The Fixed Ladder Encoder is a processor component for encoding a single input video stream into multiple encoded renditions. It creates an encoding ladder, where each `rung` represents a different quality level or rendition of the original video, typically varying in resolution and bitrate.",
     subscription: {
       // Only accept a single video stream
       accepts: {
@@ -16665,6 +17088,7 @@ function info_default17({ defineComponent, Video }) {
       help: `Settings to use when encoding using ${mode} mode`,
       hint: {
         type: "form-item",
+        optional: true,
         view: CodecView,
         form: {
           width: {
@@ -16707,7 +17131,7 @@ function createSoftwareRung(rung) {
     case "h264_320x180":
       return createRungImpl({ name: rung, threads: 1, bitrate: 800 });
     default:
-      return assertUnreachable9(rung);
+      return assertUnreachable11(rung);
   }
 }
 function createMa35dRung(rung) {
@@ -16721,7 +17145,7 @@ function createMa35dRung(rung) {
     case "h264_320x180":
       return createMa35DH264RungImpl({ name: rung, bitrate: 1e3 });
     default:
-      return assertUnreachable9(rung);
+      return assertUnreachable11(rung);
   }
 }
 function createNvidiaRung(rung) {
@@ -16735,7 +17159,7 @@ function createNvidiaRung(rung) {
     case "h264_320x180":
       return createNvidiaRungImpl({ name: rung, bitrate: 8e5 });
     default:
-      return assertUnreachable9(rung);
+      return assertUnreachable11(rung);
   }
 }
 function createQuadraRung(rung) {
@@ -16749,7 +17173,7 @@ function createQuadraRung(rung) {
     case "h264_320x180":
       return createQuadraRungImpl({ name: rung, bitrate: 8e5 });
     default:
-      return assertUnreachable9(rung);
+      return assertUnreachable11(rung);
   }
 }
 function createLoganRung(rung) {
@@ -16763,7 +17187,7 @@ function createLoganRung(rung) {
     case "h264_320x180":
       return createLoganRungImpl({ name: rung, bitrate: 8e5 });
     default:
-      return assertUnreachable9(rung);
+      return assertUnreachable11(rung);
   }
 }
 function createRungImpl({ name, threads, bitrate }) {
@@ -16861,62 +17285,248 @@ function rungWidth(rungName) {
 function rungHeight(rungName) {
   return parseInt(rungName.split("_")[1].split(`x`)[1]);
 }
-function assertUnreachable9(_) {
+function assertUnreachable11(_) {
   throw new Error("Didn't expect to get here");
 }
 
-// build/processor.whisper-transcribe/info.js
-function info_default18({ defineComponent, Av, Subtitle, validation: { Z } }) {
+// build/processor.onscreenGraphic/info.js
+var import_config6 = __toESM(require_config());
+var import_react20 = __toESM(require_react());
+function info_default17({ defineComponent, Video }) {
+  const GraphicSelection2 = import_react20.default.lazy(async () => Promise.resolve().then(() => (init_image_selection(), image_selection_exports)));
+  const SummaryView8 = import_react20.default.lazy(async () => Promise.resolve().then(() => (init_summary_view4(), summary_view_exports4)));
   return defineComponent({
-    identifier: "processor.whisper-transcribe",
+    identifier: "processor.onscreenGraphic",
     category: "processor",
-    name: "Whisper Transcribe",
+    name: "Onscreen Graphic",
+    description: "Overlay graphics onto a video",
     subscription: {
+      // Only accept a single video stream
       accepts: {
         type: "single-stream",
-        media: Av
-        // video because we'll use the id of it..
+        media: Video
       },
       produces: {
-        media: Subtitle,
-        type: "single-stream"
+        type: "single-stream",
+        media: Video
       }
     },
     extraValidation: function(ctx) {
-      const video = ctx.videoInputs();
-      const audio = ctx.audioInputs();
-      if (video.length !== 1) {
-        ctx.addError("Whisper Transcribe requires a single video stream to use as a reference");
-      }
-      if (audio.length !== 1) {
-        ctx.addError("Whisper Transcribe requires a single audio stream to transcribe");
-      }
+      ctx.requireVideo(1);
     },
     display: (desc) => {
       return {
-        model: desc.config.model
+        default: desc.config.initialGraphic ?? "none"
       };
     },
+    runtime: {
+      summary: SummaryView8,
+      initialState: () => ({}),
+      handleEvent: (ev, state) => {
+        const evType = ev.type;
+        switch (evType) {
+          case "graphic-changed":
+            return { ...state, activeGraphic: { file: ev.file, position: ev.position } };
+          case "video-changed":
+            return { ...state, currentVideo: ev.currentVideo };
+          case "graphic-loaded":
+            return { ...state, currentGraphic: ev.currentGraphic };
+          default:
+            assertUnreachable13(evType);
+        }
+      }
+    },
+    configForm: {
+      global: {
+        hardware: (0, import_config6.HardwareSelection)()
+      },
+      form: {
+        initialGraphic: {
+          help: "The initial graphic to render on the video (if any)",
+          hint: {
+            type: "custom",
+            optional: true,
+            component: GraphicSelection2
+          }
+        },
+        initialPosition: {
+          help: "The initial location at which to render the graphic",
+          hint: {
+            type: "select",
+            optional: true,
+            options: [
+              { value: { type: "named", position: "topleft" }, display: "Top Left" },
+              { value: { type: "named", position: "topright" }, display: "Top Right" },
+              { value: { type: "named", position: "bottomleft" }, display: "Bottom Left" },
+              { value: { type: "named", position: "bottomright" }, display: "Bottom Right" },
+              { value: { type: "named", position: "center" }, display: "Centered" }
+            ]
+          }
+        }
+      }
+    }
+  });
+}
+function assertUnreachable13(_) {
+  throw new Error("Didn't expect to get here");
+}
+
+// build/processor.streamKeyOverride/info.js
+function info_default18({ defineComponent, All, validation: { Z } }) {
+  return defineComponent({
+    identifier: "processor.StreamKeyOverride",
+    category: "processor",
+    name: "Stream Key Override",
+    description: "Override stream keys for several streams at once, setting some components of the keys and optionally incrementing stream ID.",
+    subscription: {
+      accepts: {
+        type: "multi-stream",
+        media: All
+      },
+      produces: {
+        type: "fixed-list",
+        possibleMedia: All,
+        keys: (cfg, subs) => {
+          const outputs = subs.flatMap((sub) => {
+            const sourceNode = sub.document.components[sub.source];
+            if (!sourceNode)
+              return [];
+            const produces = sourceNode.info.subscription.produces;
+            if (produces?.type === "fixed-list") {
+              return produces.keys(sourceNode.config, sourceNode.subscriptions).map((sel) => ({ ...sel, key: `${sourceNode.id}-${sel.key}`, display: `${sourceNode.config.displayName}: ${sel.display}` }));
+            } else {
+              return [{ key: `${sourceNode.id}`, display: `${sourceNode.config.displayName}`, media: produces ? produces.media : All }];
+            }
+          });
+          if (cfg.output === "merged") {
+            const media = Array.from(new Set(outputs.flatMap((x) => x.media)));
+            return [{ key: `merged`, display: "Merged", media }];
+          }
+          return outputs;
+        },
+        selector: () => {
+          console.error("Use selectOutputs from process.streamKeyOverride/runtime.ts, not selector from info.ts");
+          return [];
+        }
+      }
+    },
+    display: ({ config }) => {
+      const disp = {};
+      disp.mode = config.mode || "simple";
+      disp.output = config.output || "individually-selectable";
+      if (config.sourceName) {
+        disp.sourceName = config.sourceName;
+      }
+      if (config.programNumber !== void 0) {
+        disp.programNumber = String(config.programNumber);
+      }
+      if (config.streamId !== void 0) {
+        disp.streamId = String(config.streamId);
+      }
+      if (config.renditionName) {
+        disp.renditionName = config.renditionName;
+      }
+      return disp;
+    },
+    extraValidation: (ctx) => {
+      const { config, subscriptions } = ctx;
+      if ((config.mode || "simple") == "simple" && config.sourceName && config.programNumber !== void 0 && config.streamId !== void 0 && config.renditionName) {
+        if (subscriptions.length > 1)
+          ctx.addError("A fully specified stream key override must only subscribe to one stream, or use a mode other than simple");
+      }
+      if (config.mode === "by-media-type" && config.streamId === void 0) {
+        ctx.addError("You must specify the starting streamId for a by-media-type stream key override");
+      }
+      if (config.output === "merged" && !config.sourceName) {
+        ctx.addError("You must specify a sourceName for a single merged output");
+      }
+    },
     configForm: {
       form: {
-        model: { help: "The ggml model path", hint: { type: "text", validation: Z.string().min(1, "Choosing a model is mandatory") } },
-        translate: { help: "Whether to translate the output to English", hint: { type: "boolean", defaultValue: false } },
-        language: { help: "Source language (otherwise automatic)", hint: { type: "text", validation: Z.union([Z.string().length(0), Z.string().min(1)]) } }
+        mode: {
+          help: "Multi-stream behavior",
+          hint: {
+            type: "select",
+            defaultValue: "simple",
+            options: [
+              {
+                display: "Override values directly",
+                value: "simple"
+              },
+              {
+                display: "Increment stream ID by media type (video, audio, ...)",
+                value: "by-media-type"
+              },
+              {
+                display: "Increment stream ID per program in order of subscription",
+                value: "in-order"
+              }
+            ]
+          }
+        },
+        output: {
+          help: "Output individual streams or a single merged stream",
+          hint: {
+            type: "select",
+            defaultValue: "individually-selectable",
+            options: [
+              {
+                display: "Individual inputs can be selected in the output",
+                value: "individually-selectable"
+              },
+              {
+                display: "The outputs are merged into a single stream",
+                value: "merged"
+              }
+            ]
+          }
+        },
+        sourceName: {
+          help: "Override source name",
+          hint: {
+            type: "text",
+            optional: true
+          }
+        },
+        programNumber: {
+          help: "Override program number",
+          hint: {
+            type: "numeric",
+            optional: true,
+            validation: Z.number().min(0).int().optional()
+          }
+        },
+        streamId: {
+          help: "Override stream ID",
+          hint: {
+            type: "numeric",
+            optional: true,
+            validation: Z.number().min(0).int().optional()
+          }
+        },
+        renditionName: {
+          help: "Override rendition name",
+          hint: {
+            type: "text",
+            optional: true
+          }
+        }
       }
     }
   });
 }
 
-// build/util.latency/info.js
-var import_react19 = __toESM(require_react());
+// build/util.stats.latency/info.js
+var import_react22 = __toESM(require_react());
 function info_default19(R) {
   const { defineComponent } = R;
-  const InlineView13 = import_react19.default.lazy(async () => Promise.resolve().then(() => (init_inline_view7(), inline_view_exports7)));
-  const SourceNodeSelection2 = import_react19.default.lazy(async () => Promise.resolve().then(() => (init_source_node_selection(), source_node_selection_exports)));
+  const InlineView13 = import_react22.default.lazy(async () => Promise.resolve().then(() => (init_inline_view9(), inline_view_exports9)));
+  const SourceNodeSelection2 = import_react22.default.lazy(async () => Promise.resolve().then(() => (init_source_node_selection(), source_node_selection_exports)));
   return defineComponent({
-    identifier: "util.latency-stats",
+    identifier: "util.stats.latency",
     category: "output",
     name: "Latency Probe",
+    description: "This component tracks and processes latency statistics within a media processing pipeline.",
     subscription: {
       accepts: void 0,
       produces: void 0
@@ -16939,7 +17549,7 @@ function info_default19(R) {
             break;
           }
           default:
-            assertUnreachable10(evType);
+            assertUnreachable14(evType);
         }
         return { ...state };
       },
@@ -16993,113 +17603,7 @@ function info_default19(R) {
     }
   });
 }
-function assertUnreachable10(_) {
-  throw new Error("Didn't expect to get here");
-}
-
-// build/util.ma35d/info.js
-var import_react21 = __toESM(require_react());
-function info_default20(R) {
-  const { defineComponent } = R;
-  const InlineView13 = import_react21.default.lazy(async () => Promise.resolve().then(() => (init_inline_view8(), inline_view_exports8)));
-  return defineComponent({
-    identifier: "util.ma35d-stats",
-    category: "output",
-    name: "MA35D Stats",
-    subscription: {
-      accepts: void 0,
-      produces: void 0
-    },
-    display: (_desc) => {
-      return {};
-    },
-    runtime: {
-      initialState: () => ({
-        decoder: new Array(200).fill(0),
-        scaler: new Array(200).fill(0),
-        encoder: new Array(200).fill(0)
-      }),
-      handleEvent(ev, state) {
-        const evType = ev.type;
-        switch (evType) {
-          case "new-stats": {
-            state.decoder.push(ev.decoder);
-            state.scaler.push(ev.scaler);
-            state.encoder.push(ev.encoder);
-            while (state.decoder.length > 200) {
-              state.decoder.splice(0, 1);
-              state.scaler.splice(0, 1);
-              state.encoder.splice(0, 1);
-            }
-            break;
-          }
-          default:
-            assertUnreachable11(evType);
-        }
-        return { ...state };
-      },
-      inline: InlineView13
-    },
-    configForm: {
-      form: {}
-    }
-  });
-}
-function assertUnreachable11(_) {
-  throw new Error("Didn't expect to get here");
-}
-
-// build/util.timestamps/info.js
-var import_react23 = __toESM(require_react());
-function info_default21(R) {
-  const { defineComponent, All } = R;
-  const InlineView13 = import_react23.default.lazy(async () => Promise.resolve().then(() => (init_inline_view9(), inline_view_exports9)));
-  return defineComponent({
-    identifier: "util.timestamps",
-    category: "output",
-    name: "Jitter",
-    subscription: {
-      accepts: {
-        type: "multi-stream",
-        media: All
-      },
-      produces: void 0
-    },
-    display: (_desc) => {
-      return {};
-    },
-    runtime: {
-      initialState: () => ({
-        timestamps: new Array(200).fill(0)
-      }),
-      handleEvent(ev, state) {
-        const evType = ev.type;
-        switch (evType) {
-          case "new-timestamp": {
-            const target = state.timestamps.find((e) => e.key === ev.key) ?? (() => {
-              const start = { key: ev.key, startTimeMs: (/* @__PURE__ */ new Date()).valueOf(), startTimestamp: ev.value, timestamps: [] };
-              state.timestamps.push(start);
-              return start;
-            })();
-            target.timestamps.push({ ts: ev.value, wall: ev.wallMs });
-            while (target.timestamps.length > 200) {
-              target.timestamps.splice(0, 1);
-            }
-            break;
-          }
-          default:
-            assertUnreachable12(evType);
-        }
-        return { ...state };
-      },
-      inline: InlineView13
-    },
-    configForm: {
-      form: {}
-    }
-  });
-}
-function assertUnreachable12(_) {
+function assertUnreachable14(_) {
   throw new Error("Didn't expect to get here");
 }
 
@@ -17136,8 +17640,6 @@ AllComponents.push((r) => info_default16(r));
 AllComponents.push((r) => info_default17(r));
 AllComponents.push((r) => info_default18(r));
 AllComponents.push((r) => info_default19(r));
-AllComponents.push((r) => info_default20(r));
-AllComponents.push((r) => info_default21(r));
 export {
   getNodeInfo as default
 };