@norskvideo/norsk-studio-built-ins 1.14.0 → 1.16.0

package/client/info.js

@@ -172,117 +172,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 +234,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;
@@ -382,6 +291,87 @@ 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,
+                  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,
+                  type: "text"
+                }
+              },
+              comKey: {
+                help: "Communication Key from your Axinom DRM account",
+                hint: {
+                  envOverride: true,
+                  type: "text"
+                }
+              }
+            },
+            view: AxinomConfigView
+          }
+        }
+      };
+    }
     function contractHardwareAcceleration(value, accepted) {
       if (!value)
         return void 0;
@@ -424,6 +414,129 @@ 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/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()) {
+      let widevineLicenseUrl;
+      const headers = {};
+      if (config.drmProvider === "ezdrm") {
+        if (config.__global?.ezdrmConfig?.pX || state.drmToken) {
+          widevineLicenseUrl = `https://widevine-dash.ezdrm.com/widevine-php/widevine-foreignkey.php?pX=${config.__global?.ezdrmConfig?.pX || state.drmToken}`;
+        }
+      }
+      if (config.drmProvider === "axinom") {
+        widevineLicenseUrl = `https://drm-widevine-licensing.axprod.net/AcquireLicense`;
+        headers["X-AxDrm-Message"] = state.drmToken;
+      }
+      const hls = new import_hls.default({
+        widevineLicenseUrl,
+        emeEnabled: !!widevineLicenseUrl,
+        licenseXhrSetup: (xhr) => {
+          for (const k in headers) {
+            const v = headers[k];
+            if (v !== void 0) {
+              xhr.setRequestHeader(k, v);
+            }
+          }
+        }
+      });
+      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());
+  }
+});
+
 // external-global-plugin:@norskvideo/webrtc-client
 var require_webrtc_client = __commonJS({
   "external-global-plugin:@norskvideo/webrtc-client"(exports, module) {
@@ -531,11 +644,12 @@ var init_inline_view5 = __esm({
 
 // 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 InlineView15 = import_react11.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: {
@@ -559,7 +673,7 @@ function info_default11({ defineComponent, All }) {
         }
         return { ...state };
       },
-      inline: InlineView13
+      inline: InlineView15
     },
     configForm: {
       form: {}
@@ -577,21 +691,73 @@ var init_info = __esm({
   }
 });
 
+// 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_react12.useState)(state.currentUrl);
+  const [enabled, setEnabled] = (0, import_react12.useState)(state.enabled);
+  const stateChanged = (0, import_react12.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_react12, summary_view_default3;
+var init_summary_view3 = __esm({
+  "build/processor.browserOverlay/summary-view.js"() {
+    "use strict";
+    import_jsx_runtime12 = __toESM(require_jsx_runtime());
+    import_react12 = __toESM(require_react());
+    summary_view_default3 = SummaryView5;
+  }
+});
+
+// build/processor.browserOverlay/inline-view.js
+var inline_view_exports6 = {};
+__export(inline_view_exports6, {
+  default: () => inline_view_default6
+});
+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_default6;
+var init_inline_view6 = __esm({
+  "build/processor.browserOverlay/inline-view.js"() {
+    "use strict";
+    import_jsx_runtime13 = __toESM(require_jsx_runtime());
+    inline_view_default6 = InlineView9;
+  }
+});
+
 // build/processor.cascadingSwitch/source-selection.js
 var source_selection_exports = {};
 __export(source_selection_exports, {
   default: () => source_selection_default
 });
 function OrderInput(props) {
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     props.onChanged(props.defaultValue ?? []);
   }, [props.defaultValue]);
-  const [value, setValue] = (0, import_react12.useState)(props.defaultValue ?? []);
+  const [value, setValue] = (0, import_react14.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,49 +779,119 @@ function OrderInput(props) {
     };
   }
 }
-var import_jsx_runtime12, import_react12, source_selection_default;
+var import_jsx_runtime14, import_react14, 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_react14 = __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_exports7 = {};
+__export(inline_view_exports7, {
+  default: () => inline_view_default7
 });
-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_default7;
+var init_inline_view7 = __esm({
   "build/processor.cascadingSwitch/inline-view.js"() {
     "use strict";
-    import_jsx_runtime13 = __toESM(require_jsx_runtime());
+    import_jsx_runtime15 = __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;
+    inline_view_default7 = InlineView11;
+  }
+});
+
+// build/processor.fixedLadder/rung-view.js
+var rung_view_exports = {};
+__export(rung_view_exports, {
+  default: () => rung_view_default
+});
+function rung_view_default(rung) {
+  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({
+  "build/processor.fixedLadder/rung-view.js"() {
+    "use strict";
+    import_jsx_runtime16 = __toESM(require_jsx_runtime());
+  }
+});
+
+// build/processor.fixedLadder/codec-editor.js
+var codec_editor_exports = {};
+__export(codec_editor_exports, {
+  default: () => CodecEditor
+});
+function CodecEditor(props) {
+  (0, import_react15.useEffect)(() => {
+    if (props.defaultValue)
+      props.onChanged(props.defaultValue);
+  }, [props.defaultValue]);
+  const textAreaRef = (0, import_react15.useRef)(null);
+  const [value, setValue] = (0, import_react15.useState)(props.defaultValue);
+  (0, import_react15.useEffect)(() => {
+    if (textAreaRef.current) {
+      const target = textAreaRef.current;
+      target.style.height = "";
+      target.style.height = target.scrollHeight + "px";
+    }
+  }, []);
+  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);
+      setValue(codec);
+      props.onChanged(codec);
+    } catch (e2) {
+    }
+  }, defaultValue: JSON.stringify(value, void 0, 2) });
+}
+var import_jsx_runtime17, import_react15;
+var init_codec_editor = __esm({
+  "build/processor.fixedLadder/codec-editor.js"() {
+    "use strict";
+    import_jsx_runtime17 = __toESM(require_jsx_runtime());
+    import_react15 = __toESM(require_react());
+  }
+});
+
+// build/processor.fixedLadder/codec-view.js
+var codec_view_exports = {};
+__export(codec_view_exports, {
+  default: () => CodecEditor2
+});
+function CodecEditor2(props) {
+  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({
+  "build/processor.fixedLadder/codec-view.js"() {
+    "use strict";
+    import_jsx_runtime18 = __toESM(require_jsx_runtime());
   }
 });
 
-// build/processor.dynamicBug/bug-selection.js
-var bug_selection_exports = {};
-__export(bug_selection_exports, {
-  default: () => bug_selection_default
+// build/processor.onscreenGraphic/image-selection.js
+var image_selection_exports = {};
+__export(image_selection_exports, {
+  default: () => image_selection_default
 });
-function BugSelection(props) {
-  const [loading, setLoading] = (0, import_react13.useState)(true);
-  (0, import_react13.useEffect)(() => {
+function GraphicSelection(props) {
+  const [loading, setLoading] = (0, import_react17.useState)(true);
+  (0, import_react17.useEffect)(() => {
     const fn = async () => {
-      const result2 = await fetch("components/processor.dynamicBug/bugs");
+      const result2 = await fetch("components/processor.onscreenGraphic/graphics");
       if (result2.ok && result2.body) {
-        const bugs2 = await result2.json();
-        setBugs(bugs2);
+        const graphics = await result2.json();
+        setGraphics(graphics);
         setLoading(false);
         if (props.defaultValue)
           props.onChanged(props.defaultValue);
@@ -666,65 +902,65 @@ function BugSelection(props) {
     };
     fn().catch(console.error);
   }, []);
-  const [bugs, setBugs] = (0, import_react13.useState)([]);
+  const [graphcs, setGraphics] = (0, import_react17.useState)([]);
   if (loading) {
-    return (0, import_jsx_runtime14.jsx)("div", { children: "Loading.." });
+    return (0, import_jsx_runtime19.jsx)("div", { children: "Loading.." });
   }
-  if (bugs.length == 0) {
-    return (0, import_jsx_runtime14.jsx)("div", { children: "No bugs loaded" });
+  if (graphcs.length == 0) {
+    return (0, import_jsx_runtime19.jsx)("div", { children: "No graphics 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);
+  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_runtime14, import_react13, bug_selection_default;
-var init_bug_selection = __esm({
-  "build/processor.dynamicBug/bug-selection.js"() {
+var import_jsx_runtime19, import_react17, image_selection_default;
+var init_image_selection = __esm({
+  "build/processor.onscreenGraphic/image-selection.js"() {
     "use strict";
-    import_jsx_runtime14 = __toESM(require_jsx_runtime());
-    import_react13 = __toESM(require_react());
-    bug_selection_default = BugSelection;
+    import_jsx_runtime19 = __toESM(require_jsx_runtime());
+    import_react17 = __toESM(require_react());
+    image_selection_default = GraphicSelection;
   }
 });
 
-// build/processor.dynamicBug/summary-view.js
-var summary_view_exports3 = {};
-__export(summary_view_exports3, {
-  default: () => summary_view_default3
+// build/processor.onscreenGraphic/summary-view.js
+var summary_view_exports4 = {};
+__export(summary_view_exports4, {
+  default: () => summary_view_default4
 });
-function SummaryView5({ state, sendCommand, urls }) {
-  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);
-  const [showFileInput, setShowFileInput] = (0, import_react14.useState)(false);
-  const [showUploadButton, setShowUploadButton] = (0, import_react14.useState)(false);
-  const [uploadStatus, setUploadStatus] = (0, import_react14.useState)({ success: false, message: null });
-  const [showDeleteDropdown, setShowDeleteDropdown] = (0, import_react14.useState)(false);
-  const [bugToDelete, setBugToDelete] = (0, import_react14.useState)("");
-  const updateBugs = (0, import_react14.useCallback)(async () => {
+function SummaryView7({ state, sendCommand, urls }) {
+  const [graphic, setGraphic] = (0, import_react18.useState)(state.activeGraphic?.file);
+  const [position, setPosition] = (0, import_react18.useState)(state.activeGraphic?.position);
+  const [graphics, setGraphics] = (0, import_react18.useState)([]);
+  const [fileToUpload, setFileToUpload] = (0, import_react18.useState)(void 0);
+  const [showFileInput, setShowFileInput] = (0, import_react18.useState)(false);
+  const [showUploadButton, setShowUploadButton] = (0, import_react18.useState)(false);
+  const [uploadStatus, setUploadStatus] = (0, import_react18.useState)({ success: false, message: null });
+  const [showDeleteDropdown, setShowDeleteDropdown] = (0, import_react18.useState)(false);
+  const [graphicToDelete, setGraphicToDelete] = (0, import_react18.useState)("");
+  const updateGraphics = (0, import_react18.useCallback)(async () => {
     try {
-      const result2 = await fetch(`${urls.componentUrl}/bugs`);
+      const result2 = await fetch(`${urls.componentUrl}/graphics`);
       if (result2.ok) {
-        const newBugs = await result2.json();
-        setBugs(newBugs);
+        const newGraphics = await result2.json();
+        setGraphics(newGraphics);
       } else {
         throw new Error(await result2.text());
       }
     } catch (error) {
-      console.error("Failed to update bugs:", error);
+      console.error("Failed to update graphics:", error);
       setUploadStatus({
         success: false,
-        message: "Failed to update bug list."
+        message: "Failed to update graphic list."
       });
     }
   }, [urls.componentUrl]);
-  (0, import_react14.useEffect)(() => {
-    updateBugs().catch(console.error);
-  }, [updateBugs]);
+  (0, import_react18.useEffect)(() => {
+    updateGraphics().catch(console.error);
+  }, [updateGraphics]);
   const onFileChange = (e) => {
     const file = e.target.files?.[0];
     setFileToUpload(file);
@@ -737,7 +973,7 @@ function SummaryView5({ state, sendCommand, urls }) {
     try {
       const form = new FormData();
       form.append("file", fileToUpload);
-      const response = await fetch(`${urls.componentUrl}/bugs`, {
+      const response = await fetch(`${urls.componentUrl}/graphics`, {
         method: "POST",
         body: form
       });
@@ -745,7 +981,7 @@ function SummaryView5({ state, sendCommand, urls }) {
         const errorData = await response.json();
         setUploadStatus({
           success: false,
-          message: `${errorData.error}. Delete the existing bug first if you want to replace it.`
+          message: `${errorData.error}. Delete the existing graphic first if you want to replace it.`
         });
       } else if (!response.ok) {
         throw new Error("Upload failed");
@@ -754,138 +990,68 @@ function SummaryView5({ state, sendCommand, urls }) {
         setShowFileInput(false);
         setUploadStatus({
           success: true,
-          message: "Bug uploaded successfully!"
+          message: "Graphic uploaded successfully!"
         });
-        await updateBugs();
+        await updateGraphics();
       }
     } catch (error) {
       console.error("Failed to upload file:", error);
-      setUploadStatus({ success: false, message: "Failed to upload bug." });
+      setUploadStatus({ success: false, message: "Failed to upload graphic." });
     }
     setTimeout(() => setUploadStatus({ success: false, message: null }), 5e3);
   };
   const deleteBug = async () => {
-    if (!bugToDelete)
+    if (!graphicToDelete)
       return;
     try {
-      const response = await fetch(`${urls.componentUrl}/bug`, {
+      const response = await fetch(`${urls.componentUrl}/graphic`, {
         method: "DELETE",
         headers: {
           "Content-Type": "application/json"
         },
-        body: JSON.stringify({ filename: bugToDelete })
+        body: JSON.stringify({ filename: graphicToDelete })
       });
       if (response.ok) {
         setUploadStatus({
           success: true,
-          message: "Bug deleted successfully!"
+          message: "Graphic deleted successfully!"
         });
-        await updateBugs();
-        if (bug === bugToDelete) {
-          setBug(void 0);
+        await updateGraphics();
+        if (graphic === graphicToDelete) {
+          setGraphic(void 0);
           sendCommand({
-            type: "change-bug",
+            type: "change-graphic",
             file: void 0,
             position: void 0
           });
         }
-        setBugToDelete("");
+        setGraphicToDelete("");
         setShowDeleteDropdown(false);
       } else {
         const errorData = await response.json();
         setUploadStatus({
           success: false,
-          message: errorData.error || "Failed to delete bug"
+          message: errorData.error || "Failed to delete graphic"
         });
       }
     } catch (error) {
-      console.error("Failed to delete bug:", error);
-      setUploadStatus({ success: false, message: "Failed to delete bug" });
+      console.error("Failed to delete graphic:", error);
+      setUploadStatus({ success: false, message: "Failed to delete graphic" });
     }
     setTimeout(() => setUploadStatus({ success: false, message: null }), 3e3);
-  };
-  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_runtime15.jsxs)("div", { className: "space-y-3", children: [(0, import_jsx_runtime15.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime15.jsxs)("div", { children: [(0, import_jsx_runtime15.jsx)("label", { htmlFor: "select-bug", className: "block text-gray-900 dark:text-white mb-1", children: "Source" }), (0, import_jsx_runtime15.jsxs)("select", { id: "select-bug", className: "w-full node-editor-select-input", value: bug || "", onChange: (e) => setBug(e.target.value || void 0), children: [(0, import_jsx_runtime15.jsx)("option", { value: "", children: "---" }), bugs.map((s) => (0, import_jsx_runtime15.jsx)("option", { value: s, children: s }, s))] })] }), bug && (0, import_jsx_runtime15.jsxs)("div", { children: [(0, import_jsx_runtime15.jsx)("label", { htmlFor: "select-position", className: "block text-gray-900 dark:text-white mb-1", children: "Position" }), (0, import_jsx_runtime15.jsxs)("select", { id: "select-position", className: "w-full node-editor-select-input", value: position, onChange: (e) => setPosition(e.target.value), children: [(0, import_jsx_runtime15.jsx)("option", { value: "topleft", children: "Top Left" }), (0, import_jsx_runtime15.jsx)("option", { value: "topright", children: "Top Right" }), (0, import_jsx_runtime15.jsx)("option", { value: "bottomleft", children: "Bottom Left" }), (0, import_jsx_runtime15.jsx)("option", { value: "bottomright", children: "Bottom Right" })] })] }), (bug !== state.activeBug?.file || position !== state.activeBug?.position) && (0, import_jsx_runtime15.jsx)("button", { type: "button", className: buttonClass, onClick: () => sendCommand({ type: "change-bug", file: bug, position }), children: "Commit" }), !showFileInput && !uploadStatus.success && (0, import_jsx_runtime15.jsx)("button", { type: "button", className: buttonClass, onClick: () => setShowFileInput(true), style: { marginBottom: "1rem" }, children: "Upload  Bug" }), showFileInput && (0, import_jsx_runtime15.jsxs)("form", { style: { display: "block", marginBottom: "1rem" }, children: [(0, import_jsx_runtime15.jsx)("input", { type: "file", id: "file", name: "filename", onChange: onFileChange, className: fileInputClass }), showUploadButton && (0, import_jsx_runtime15.jsx)("button", { type: "button", className: buttonClass, onClick: uploadFile, children: "Upload" })] }), (0, import_jsx_runtime15.jsx)("button", { type: "button", className: deleteButtonClass, onClick: () => setShowDeleteDropdown(!showDeleteDropdown), style: { marginBottom: "1rem" }, children: showDeleteDropdown ? "Hide Delete Options" : "Delete Bugs" }), showDeleteDropdown && (0, import_jsx_runtime15.jsxs)("div", { className: "mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg", children: [(0, import_jsx_runtime15.jsx)("h3", { className: "text-lg font-semibold mb-2 text-gray-900 dark:text-white", children: "Select Bug to Delete" }), (0, import_jsx_runtime15.jsxs)("select", { className: "w-full mb-2 node-editor-select-input", value: bugToDelete, onChange: (e) => setBugToDelete(e.target.value), children: [(0, import_jsx_runtime15.jsx)("option", { value: "", children: " Select a bug" }), bugs.map((bugName) => (0, import_jsx_runtime15.jsx)("option", { value: bugName, children: bugName }, bugName))] }), (0, import_jsx_runtime15.jsx)("button", { onClick: deleteBug, disabled: !bugToDelete, className: `${deleteButtonClass} ${!bugToDelete ? "opacity-50 cursor-not-allowed" : ""}`, children: "Delete Selected Bug" })] }), uploadStatus.message && (0, import_jsx_runtime15.jsx)("div", { className: `mt-2 text-center ${uploadStatus.success ? "text-green-600" : "text-red-600"}`, children: uploadStatus.message })] });
-}
-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;
-  }
-});
-
-// build/processor.fixedLadder/rung-view.js
-var rung_view_exports = {};
-__export(rung_view_exports, {
-  default: () => rung_view_default
-});
-function rung_view_default(rung) {
-  return (0, import_jsx_runtime16.jsx)("div", { className: "", children: rung.name });
-}
-var import_jsx_runtime16;
-var init_rung_view = __esm({
-  "build/processor.fixedLadder/rung-view.js"() {
-    "use strict";
-    import_jsx_runtime16 = __toESM(require_jsx_runtime());
-  }
-});
-
-// build/processor.fixedLadder/codec-editor.js
-var codec_editor_exports = {};
-__export(codec_editor_exports, {
-  default: () => CodecEditor
-});
-function CodecEditor(props) {
-  (0, import_react16.useEffect)(() => {
-    if (props.defaultValue)
-      props.onChanged(props.defaultValue);
-  }, [props.defaultValue]);
-  const textAreaRef = (0, import_react16.useRef)(null);
-  const [value, setValue] = (0, import_react16.useState)(props.defaultValue);
-  (0, import_react16.useEffect)(() => {
-    if (textAreaRef.current) {
-      const target = textAreaRef.current;
-      target.style.height = "";
-      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) => {
-    const target = e.currentTarget;
-    try {
-      const codec = JSON.parse(target.value);
-      setValue(codec);
-      props.onChanged(codec);
-    } catch (e2) {
-    }
-  }, defaultValue: JSON.stringify(value, void 0, 2) });
-}
-var import_jsx_runtime17, import_react16;
-var init_codec_editor = __esm({
-  "build/processor.fixedLadder/codec-editor.js"() {
-    "use strict";
-    import_jsx_runtime17 = __toESM(require_jsx_runtime());
-    import_react16 = __toESM(require_react());
-  }
-});
-
-// build/processor.fixedLadder/codec-view.js
-var codec_view_exports = {};
-__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] });
+  };
+  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: "Position" }), (0, import_jsx_runtime20.jsxs)("select", { id: "select-position", className: "w-full node-editor-select-input", value: position, onChange: (e) => setPosition(e.target.value), 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" })] })] }), (graphic !== state.activeGraphic?.file || position !== state.activeGraphic?.position) && (0, import_jsx_runtime20.jsx)("button", { type: "button", className: buttonClass, onClick: () => sendCommand({ type: "change-graphic", file: graphic, position }), 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 })] });
 }
-var import_jsx_runtime18;
-var init_codec_view = __esm({
-  "build/processor.fixedLadder/codec-view.js"() {
+var import_jsx_runtime20, import_react18, summary_view_default4;
+var init_summary_view4 = __esm({
+  "build/processor.onscreenGraphic/summary-view.js"() {
     "use strict";
-    import_jsx_runtime18 = __toESM(require_jsx_runtime());
+    import_jsx_runtime20 = __toESM(require_jsx_runtime());
+    import_react18 = __toESM(require_react());
+    summary_view_default4 = SummaryView7;
   }
 });
 
@@ -15214,13 +15380,13 @@ var init_auto = __esm({
 });
 
 // build/util.stats.latency/inline-view.js
-var inline_view_exports7 = {};
-__export(inline_view_exports7, {
-  default: () => inline_view_default7
+var inline_view_exports8 = {};
+__export(inline_view_exports8, {
+  default: () => inline_view_default8
 });
-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_react20.useRef)(null);
+  const [chartControl, setChartControl] = (0, import_react20.useState)(void 0);
   function makeDataSet(key, color2, values) {
     return {
       label: key,
@@ -15237,7 +15403,7 @@ function InlineView10({ state, config: _2 }) {
       datasets: [makeDataSet("latency", "rgba(255, 0, 0, 255)", state2.values)]
     };
   }
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!chartContainer.current)
       return;
     auto_default.defaults.color = "#FFF";
@@ -15275,21 +15441,21 @@ function InlineView10({ state, config: _2 }) {
       chart.update();
     }, 100);
   }, [chartContainer]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.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({
+var import_jsx_runtime21, import_react20, inline_view_default8;
+var init_inline_view8 = __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_react20 = __toESM(require_react());
     init_auto();
-    inline_view_default7 = InlineView10;
+    inline_view_default8 = InlineView12;
   }
 });
 
@@ -15299,34 +15465,34 @@ __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.stats.latency/source-node-selection.js"() {
     "use strict";
-    import_jsx_runtime20 = __toESM(require_jsx_runtime());
+    import_jsx_runtime22 = __toESM(require_jsx_runtime());
     source_node_selection_default = SourceNodeSelection;
   }
 });
 
 // build/util.stats.ma35d/inline-view.js
-var inline_view_exports8 = {};
-__export(inline_view_exports8, {
-  default: () => inline_view_default8
+var inline_view_exports9 = {};
+__export(inline_view_exports9, {
+  default: () => inline_view_default9
 });
-function InlineView11({ state, config: _2 }) {
-  const chartContainer = (0, import_react20.useRef)(null);
-  const [chartControl, setChartControl] = (0, import_react20.useState)(void 0);
+function InlineView13({ state, config: _2 }) {
+  const chartContainer = (0, import_react22.useRef)(null);
+  const [chartControl, setChartControl] = (0, import_react22.useState)(void 0);
   function makeDataSet(key, color2, values) {
     return {
       label: key,
@@ -15347,7 +15513,7 @@ function InlineView11({ state, config: _2 }) {
       ]
     };
   }
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!chartContainer.current)
       return;
     auto_default.defaults.color = "#FFF";
@@ -15385,33 +15551,33 @@ function InlineView11({ state, config: _2 }) {
       chart.update();
     }, 100);
   }, [chartContainer]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.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 }) });
+  return (0, import_jsx_runtime23.jsx)("div", { className: "bg-gray-50 dark:bg-gray-700 rounded", style: { width: "360px", height: "200px", padding: "10px" }, children: (0, import_jsx_runtime23.jsx)("canvas", { className: "bg-gray-50 dark:bg-gray-700 rounded", ref: chartContainer }) });
 }
-var import_jsx_runtime21, import_react20, inline_view_default8;
-var init_inline_view8 = __esm({
+var import_jsx_runtime23, import_react22, inline_view_default9;
+var init_inline_view9 = __esm({
   "build/util.stats.ma35d/inline-view.js"() {
     "use strict";
-    import_jsx_runtime21 = __toESM(require_jsx_runtime());
-    import_react20 = __toESM(require_react());
+    import_jsx_runtime23 = __toESM(require_jsx_runtime());
+    import_react22 = __toESM(require_react());
     init_auto();
-    inline_view_default8 = InlineView11;
+    inline_view_default9 = InlineView13;
   }
 });
 
 // build/util.timestamps/inline-view.js
-var inline_view_exports9 = {};
-__export(inline_view_exports9, {
-  default: () => inline_view_default9
+var inline_view_exports10 = {};
+__export(inline_view_exports10, {
+  default: () => inline_view_default10
 });
-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)(() => {
+function InlineView14({ state, config: _2 }) {
+  const chartContainer = (0, import_react24.useRef)(null);
+  const [chartControl, setChartControl] = (0, import_react24.useState)(void 0);
+  (0, import_react24.useEffect)(() => {
     if (!chartContainer.current)
       return;
     if (state.timestamps.length < 2)
@@ -15473,7 +15639,7 @@ function InlineView12({ state, config: _2 }) {
       chart.update();
     }, 100);
   }, [chartContainer]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!chartControl)
       return;
     chartControl.data = {
@@ -15496,16 +15662,16 @@ function InlineView12({ state, config: _2 }) {
       })
     };
   }, [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 }) });
+  return (0, import_jsx_runtime24.jsx)("div", { className: "bg-gray-50 dark:bg-gray-700 rounded", style: { width: "360px", height: "200px", padding: "10px" }, children: (0, import_jsx_runtime24.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({
+var import_jsx_runtime24, import_react24, inline_view_default10;
+var init_inline_view10 = __esm({
   "build/util.timestamps/inline-view.js"() {
     "use strict";
-    import_jsx_runtime22 = __toESM(require_jsx_runtime());
-    import_react22 = __toESM(require_react());
+    import_jsx_runtime24 = __toESM(require_jsx_runtime());
+    import_react24 = __toESM(require_react());
     init_auto();
-    inline_view_default9 = InlineView12;
+    inline_view_default10 = InlineView14;
   }
 });
 
@@ -15564,7 +15730,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",
@@ -15589,6 +15755,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",
@@ -15636,6 +15803,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())
     }
   },
@@ -15643,13 +15811,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())
     }
   },
@@ -15657,6 +15827,7 @@ var result = ({ Z }) => ({
     help: "Overhead bandwidth (SRTO_OHEADBW)",
     hint: {
       type: "numeric",
+      optional: true,
       validation: Z.optional(Z.number())
     }
   },
@@ -15664,6 +15835,7 @@ var result = ({ Z }) => ({
     help: "Max bandwidth (SRTO_MAXBW)",
     hint: {
       type: "numeric",
+      optional: true,
       validation: Z.optional(Z.number())
     }
   }
@@ -15673,7 +15845,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 };
@@ -15682,6 +15854,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: {
@@ -15692,16 +15865,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: {
@@ -15720,7 +15893,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 };
@@ -15729,6 +15902,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: {
@@ -15749,7 +15923,7 @@ function info_default4({ defineComponent, Av, validation }) {
     display: (desc) => {
       return {
         port: desc.config.port.toString(),
-        ip: desc.config.ip
+        ip: desc.config.host
       };
     },
     runtime: {
@@ -15783,11 +15957,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
           }
@@ -15796,6 +15970,7 @@ function info_default4({ defineComponent, Av, validation }) {
           help: "Optional: Authentication for this SRT input",
           hint: {
             type: "text",
+            optional: true,
             validation: SrtPassphrase,
             envOverride: true
           }
@@ -15837,11 +16012,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: {
@@ -15852,15 +16028,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" } }
       }
@@ -15874,6 +16050,7 @@ function info_default6({ defineComponent, Video, validation: { SourceName }, com
     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: {
@@ -15911,9 +16088,11 @@ function info_default6({ defineComponent, Video, validation: { SourceName }, com
 }
 
 // build/output.autoCmaf/info.js
+var import_config = __toESM(require_config());
 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)));
+function info_default7(R) {
+  const { defineComponent, All, validation: { Z, Hostname } } = R;
+  const SummaryView8 = 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 () => {
     const views = await Promise.resolve().then(() => (init_form_views(), form_views_exports));
@@ -15927,6 +16106,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
@@ -15941,6 +16121,32 @@ function info_default7({ defineComponent, All, validation: { Z, Hostname } }) {
       if (audioStreams.length == 0) {
         ctx.addError("AutoCMAF requires at least one audio stream");
       }
+      const uniqueVideoStreamNodes = ctx.subscriptions.reduce((acc, s) => {
+        if (s.streams.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 {
@@ -15954,16 +16160,21 @@ function info_default7({ defineComponent, All, validation: { Z, Hostname } }) {
         switch (evType) {
           case "url-published":
             state.url = ev.url;
+            state.drmToken = ev.drmToken;
             break;
           default:
             assertUnreachable3(evType);
         }
         return { ...state };
       },
-      summary: SummaryView6,
+      summary: SummaryView8,
       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",
@@ -16031,6 +16242,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()
                 }
               },
@@ -16038,6 +16250,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()
                 }
               }
@@ -16075,6 +16288,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"
+              }
+            ]
+          }
         }
       }
     }
@@ -16086,14 +16316,15 @@ function assertUnreachable3(_) {
 
 // build/output.preview/info.js
 var import_react8 = __toESM(require_react());
-var import_config = __toESM(require_config());
+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 InlineView15 = import_react8.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",
@@ -16139,12 +16370,12 @@ function info_default8(R) {
         }
         return { ...state };
       },
-      inline: InlineView13
+      inline: InlineView15
     },
     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 } }
@@ -16159,11 +16390,12 @@ function assertUnreachable4(_) {
 // build/output.rtmp/info.js
 var import_react9 = __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 InlineView15 = import_react9.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
@@ -16197,7 +16429,7 @@ function info_default9({ defineComponent, Av, validation: { Z, JitterBuffer } })
         }
         return { ...state };
       },
-      inline: InlineView13
+      inline: InlineView15
     },
     configForm: {
       form: {
@@ -16217,7 +16449,7 @@ function assertUnreachable5(_) {
 var import_react10 = __toESM(require_react());
 function info_default10(registration) {
   const { defineComponent, All, validation } = registration;
-  const { Port, IpAddress, JitterBuffer, SrtPassphrase, SrtStreamId } = validation;
+  const { Port, Hostname, JitterBuffer, SrtPassphrase, SrtStreamId } = validation;
   const SocketConfiguration2 = import_react10.default.lazy(async () => {
     const views = await Promise.resolve().then(() => (init_srt_form_views(), srt_form_views_exports));
     return { default: views.SocketConfiguration };
@@ -16226,6 +16458,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
@@ -16237,7 +16470,7 @@ 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"
       };
@@ -16257,7 +16490,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: {
@@ -16277,8 +16510,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: {
@@ -16296,11 +16529,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
@@ -16312,7 +16546,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"
       };
@@ -16320,7 +16554,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" } }
       }
@@ -16329,13 +16563,14 @@ 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());
 function info_default13(R) {
   const { defineComponent, Av, validation: { JitterBuffer } } = R;
   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
@@ -16352,7 +16587,7 @@ function info_default13(R) {
     },
     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 } }
@@ -16362,12 +16597,16 @@ function info_default13(R) {
 }
 
 // build/processor.browserOverlay/info.js
-var import_config3 = __toESM(require_config());
+var import_config4 = __toESM(require_config());
+var import_react13 = __toESM(require_react());
+var SummaryView6 = import_react13.default.lazy(async () => Promise.resolve().then(() => (init_summary_view3(), summary_view_exports3)));
+var InlineView10 = import_react13.default.lazy(async () => Promise.resolve().then(() => (init_inline_view6(), inline_view_exports6)));
 function info_default14({ defineComponent, Video, validation: { Z } }) {
   return defineComponent({
     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: {
@@ -16384,12 +16623,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:
+            assertUnreachable7(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: "" } }
@@ -16397,15 +16657,19 @@ function info_default14({ defineComponent, Video, validation: { Z } }) {
     }
   });
 }
+function assertUnreachable7(_) {
+  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)));
+function info_default15({ defineComponent, Av, React: React15, common: { Resolutions, FrameRates } }) {
+  const SourceSelection = React15.lazy(async () => Promise.resolve().then(() => (init_source_selection(), source_selection_exports)));
+  const InlineView15 = React15.lazy(async () => Promise.resolve().then(() => (init_inline_view7(), inline_view_exports7)));
   return defineComponent({
     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
@@ -16479,12 +16743,12 @@ function info_default15({ defineComponent, Av, React: React14, common: { Resolut
             state.availableSources.splice(state.availableSources.indexOf(ev.source), 1);
             return { ...state };
           default:
-            assertUnreachable7(evType);
+            assertUnreachable8(evType);
         }
       },
-      inline: InlineView13,
-      summary: InlineView13,
-      fullscreen: InlineView13
+      inline: InlineView15,
+      summary: InlineView15,
+      fullscreen: InlineView15
     },
     configForm: {
       form: {
@@ -16530,98 +16794,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",
-    description: "",
-    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.initialBug ?? "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: {
-        initialBug: {
-          help: "The initial bug to render on the video (if any)",
-          hint: {
-            type: "custom",
-            optional: true,
-            component: BugSelection2
-          }
-        },
-        initialPosition: {
-          help: "The initial location at which to render the bug",
-          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(_) {
   throw new Error("Didn't expect to get here");
 }
 
 // build/processor.fixedLadder/info.js
-var import_react17 = __toESM(require_react());
+var import_react16 = __toESM(require_react());
 var import_config5 = __toESM(require_config());
-function info_default17({ 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)));
+function info_default16({ defineComponent, Video }) {
+  const RungView = import_react16.default.lazy(async () => Promise.resolve().then(() => (init_rung_view(), rung_view_exports)));
+  const CodecEditor3 = import_react16.default.lazy(async () => Promise.resolve().then(() => (init_codec_editor(), codec_editor_exports)));
+  const CodecView = import_react16.default.lazy(async () => Promise.resolve().then(() => (init_codec_view(), codec_view_exports)));
   return defineComponent({
     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: {
@@ -16937,12 +17125,90 @@ function assertUnreachable9(_) {
   throw new Error("Didn't expect to get here");
 }
 
+// build/processor.onscreenGraphic/info.js
+var import_config6 = __toESM(require_config());
+var import_react19 = __toESM(require_react());
+function info_default17({ defineComponent, Video }) {
+  const GraphicSelection2 = import_react19.default.lazy(async () => Promise.resolve().then(() => (init_image_selection(), image_selection_exports)));
+  const SummaryView8 = import_react19.default.lazy(async () => Promise.resolve().then(() => (init_summary_view4(), summary_view_exports4)));
+  return defineComponent({
+    identifier: "processor.onscreenGraphic",
+    category: "processor",
+    name: "Onscreen Graphic",
+    description: "Overlay graphics onto a video",
+    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.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 } };
+          default:
+            assertUnreachable10(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: "topleft", display: "Top Left" },
+              { value: "topright", display: "Top Right" },
+              { value: "bottomleft", display: "Bottom Left" },
+              { value: "bottomright", display: "Bottom Right" }
+            ]
+          }
+        }
+      }
+    }
+  });
+}
+function assertUnreachable10(_) {
+  throw new Error("Didn't expect to get here");
+}
+
 // build/processor.whisper-transcribe/info.js
 function info_default18({ defineComponent, Av, Subtitle, validation: { Z } }) {
   return defineComponent({
     identifier: "processor.whisper-transcribe",
     category: "processor",
     name: "Whisper Transcribe",
+    description: "This component transcribes audio from a video stream.",
     subscription: {
       accepts: {
         type: "single-stream",
@@ -16972,23 +17238,24 @@ function info_default18({ defineComponent, Av, Subtitle, validation: { Z } }) {
     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)]) } }
+        translate: { help: "Whether to translate the output to English", hint: { type: "boolean", optional: true, defaultValue: false } },
+        language: { help: "Source language (otherwise automatic)", hint: { type: "text", optional: true, validation: Z.union([Z.string().length(0), Z.string().min(1)]) } }
       }
     }
   });
 }
 
 // build/util.stats.latency/info.js
-var import_react19 = __toESM(require_react());
+var import_react21 = __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 InlineView15 = import_react21.default.lazy(async () => Promise.resolve().then(() => (init_inline_view8(), inline_view_exports8)));
+  const SourceNodeSelection2 = import_react21.default.lazy(async () => Promise.resolve().then(() => (init_source_node_selection(), source_node_selection_exports)));
   return defineComponent({
     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
@@ -17011,11 +17278,11 @@ function info_default19(R) {
             break;
           }
           default:
-            assertUnreachable10(evType);
+            assertUnreachable11(evType);
         }
         return { ...state };
       },
-      inline: InlineView13
+      inline: InlineView15
     },
     configForm: {
       form: {
@@ -17065,19 +17332,20 @@ function info_default19(R) {
     }
   });
 }
-function assertUnreachable10(_) {
+function assertUnreachable11(_) {
   throw new Error("Didn't expect to get here");
 }
 
 // build/util.stats.ma35d/info.js
-var import_react21 = __toESM(require_react());
+var import_react23 = __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)));
+  const InlineView15 = import_react23.default.lazy(async () => Promise.resolve().then(() => (init_inline_view9(), inline_view_exports9)));
   return defineComponent({
     identifier: "util.stats.ma35d",
     category: "output",
     name: "MA35D Stats",
+    description: "Tracks and processes statistics for the AMD MA35D processor which is used for the encoding, scaling and decoding of media.",
     subscription: {
       accepts: void 0,
       produces: void 0
@@ -17106,30 +17374,31 @@ function info_default20(R) {
             break;
           }
           default:
-            assertUnreachable11(evType);
+            assertUnreachable12(evType);
         }
         return { ...state };
       },
-      inline: InlineView13
+      inline: InlineView15
     },
     configForm: {
       form: {}
     }
   });
 }
-function assertUnreachable11(_) {
+function assertUnreachable12(_) {
   throw new Error("Didn't expect to get here");
 }
 
 // build/util.timestamps/info.js
-var import_react23 = __toESM(require_react());
+var import_react25 = __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)));
+  const InlineView15 = import_react25.default.lazy(async () => Promise.resolve().then(() => (init_inline_view10(), inline_view_exports10)));
   return defineComponent({
     identifier: "util.timestamps",
     category: "output",
     name: "Jitter",
+    description: "A jitter utility which processes and tracks timestamps.",
     subscription: {
       accepts: {
         type: "multi-stream",
@@ -17160,18 +17429,18 @@ function info_default21(R) {
             break;
           }
           default:
-            assertUnreachable12(evType);
+            assertUnreachable13(evType);
         }
         return { ...state };
       },
-      inline: InlineView13
+      inline: InlineView15
     },
     configForm: {
       form: {}
     }
   });
 }
-function assertUnreachable12(_) {
+function assertUnreachable13(_) {
   throw new Error("Didn't expect to get here");
 }