@norskvideo/norsk-studio-built-ins 1.12.0-2025-02-04-9551fc82 → 1.12.0-2025-02-07-e66173eb

package/client/info.js

@@ -493,6 +493,39 @@ var require_config = __commonJS({
   }
 });
 
+// build/output.autoCmaf/summary-view.js
+var summary_view_exports3 = {};
+__export(summary_view_exports3, {
+  default: () => summary_view_default3
+});
+function SummaryView5({ state, sendCommand }) {
+  const handleEnableOutput = () => {
+    void enableOutput();
+  };
+  const enableOutput = async () => {
+    sendCommand({
+      type: "enable-output"
+    });
+  };
+  const handleDisableOutput = () => {
+    void disableOutput();
+  };
+  const disableOutput = async () => {
+    sendCommand({
+      type: "disable-output"
+    });
+  };
+  return (0, import_jsx_runtime6.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, import_jsx_runtime6.jsx)("span", { className: `inline-block w-2 h-2 rounded-full ${state.enabled ? "bg-blue-500" : "bg-red-500"}` }), (0, import_jsx_runtime6.jsxs)("span", { className: "text-sm", children: ["Status: ", state.enabled ? "Enabled" : "Disabled"] })] }), (0, import_jsx_runtime6.jsx)("div", { children: state.enabled ? (0, import_jsx_runtime6.jsx)("button", { onClick: handleDisableOutput, className: "px-3 py-1 text-sm bg-red-600 hover:bg-red-700 text-white rounded", children: "Disable Output" }) : (0, import_jsx_runtime6.jsx)("button", { onClick: handleEnableOutput, className: "px-3 py-1 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded", children: "Enable Output" }) })] }) });
+}
+var import_jsx_runtime6, summary_view_default3;
+var init_summary_view3 = __esm({
+  "build/output.autoCmaf/summary-view.js"() {
+    "use strict";
+    import_jsx_runtime6 = __toESM(require_jsx_runtime());
+    summary_view_default3 = SummaryView5;
+  }
+});
+
 // external-global-plugin:hls.js
 var require_hls = __commonJS({
   "external-global-plugin:hls.js"(exports, module) {
@@ -521,16 +554,16 @@ function FullscreenView({ state, config }) {
     }
   }, [state.url]);
   if (!url)
-    return (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: "..." });
+    return (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: "..." });
   {
   }
-  return (0, import_jsx_runtime6.jsx)("div", { children: (0, import_jsx_runtime6.jsx)("video", { controls: true, autoPlay: true, muted: true, id: `${id}-video` }) });
+  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_runtime6, import_react4, import_hls, fullscreen_default;
+var import_jsx_runtime7, import_react4, import_hls, fullscreen_default;
 var init_fullscreen = __esm({
   "build/output.autoCmaf/fullscreen.js"() {
     "use strict";
-    import_jsx_runtime6 = __toESM(require_jsx_runtime());
+    import_jsx_runtime7 = __toESM(require_jsx_runtime());
     import_react4 = __toESM(require_react());
     import_hls = __toESM(require_hls());
     fullscreen_default = FullscreenView;
@@ -544,16 +577,16 @@ __export(form_views_exports, {
   SegmentConfiguration: () => SegmentConfiguration
 });
 function S3Destination(destination) {
-  return (0, import_jsx_runtime7.jsxs)("div", { className: "grid grid-flow-row-dense grid-cols-3 text-sm", children: [(0, import_jsx_runtime7.jsx)("div", { className: "col-span-1", children: "Host" }), (0, import_jsx_runtime7.jsx)("div", { className: "col-span-2", children: destination.host }), (0, import_jsx_runtime7.jsx)("div", { className: "col-span-1", children: "Path" }), (0, import_jsx_runtime7.jsx)("div", { className: "col-span-2", children: destination.prefix }), (0, import_jsx_runtime7.jsx)("div", { className: "col-span-1", children: "Include Ads" }), (0, import_jsx_runtime7.jsx)("div", { className: "col-span-2", children: destination.includeAdInsertions ? "yes" : "no" })] });
+  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_runtime7.jsxs)("div", { className: "grid grid-flow-row-dense grid-cols-3 text-sm", children: [(0, import_jsx_runtime7.jsx)("div", { className: "col-span-1", children: "Segments" }), (0, import_jsx_runtime7.jsx)("div", { className: "col-span-2", children: cfg.defaultSegmentCount == 0 ? "all" : cfg.defaultSegmentCount }), (0, import_jsx_runtime7.jsx)("div", { className: "col-span-1", children: "Segment Target" }), (0, import_jsx_runtime7.jsxs)("div", { className: "col-span-2", children: [cfg.targetSegmentDuration, "s"] }), (0, import_jsx_runtime7.jsx)("div", { className: "col-span-1", children: "Part Target" }), (0, import_jsx_runtime7.jsxs)("div", { className: "col-span-2", children: [cfg.targetPartDuration, "s"] }), (0, import_jsx_runtime7.jsx)("div", { className: "col-span-1", children: "Retention" }), (0, import_jsx_runtime7.jsxs)("div", { className: "col-span-2", children: [cfg.retentionPeriod, "s"] })] });
+  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_runtime7;
+var import_jsx_runtime8;
 var init_form_views = __esm({
   "build/output.autoCmaf/form-views.js"() {
     "use strict";
-    import_jsx_runtime7 = __toESM(require_jsx_runtime());
+    import_jsx_runtime8 = __toESM(require_jsx_runtime());
   }
 });
 
@@ -611,7 +644,7 @@ function InlineView5({ state, config, raise }) {
   }, [config.showPreview]);
   raise && (0, import_react6.useEffect)(raise, []);
   if (!url)
-    return (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: "..." });
+    return (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: "..." });
   function percentage(levels) {
     if (!levels) {
       return 0;
@@ -621,15 +654,15 @@ function InlineView5({ state, config, raise }) {
     const snapped = Math.floor(capped * 10) * 10;
     return Math.max(0, 100 - snapped);
   }
-  return (0, import_jsx_runtime8.jsxs)("div", { className: "preview-outer-container", children: [(0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, import_jsx_runtime8.jsx)("input", { type: "checkbox", id: `video-toggle-${id}`, checked: showPreview, onChange: (e) => setShowPreview(e.target.checked), className: "h-4 w-4" }), (0, import_jsx_runtime8.jsx)("label", { htmlFor: `video-toggle-${id}`, className: "text-sm", children: "Show Preview" })] }), showPreview ? (0, import_jsx_runtime8.jsx)("div", { className: "preview-video", id: `preview-${id}`, children: (0, import_jsx_runtime8.jsx)("style", { children: `
+  return (0, import_jsx_runtime9.jsxs)("div", { className: "preview-outer-container", children: [(0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, import_jsx_runtime9.jsx)("input", { type: "checkbox", id: `video-toggle-${id}`, checked: showPreview, onChange: (e) => setShowPreview(e.target.checked), className: "h-4 w-4" }), (0, import_jsx_runtime9.jsx)("label", { htmlFor: `video-toggle-${id}`, className: "text-sm", children: "Show Preview" })] }), showPreview ? (0, import_jsx_runtime9.jsx)("div", { className: "preview-video", id: `preview-${id}`, children: (0, import_jsx_runtime9.jsx)("style", { children: `
             #preview-${id} video::-webkit-media-controls-play-button { display: none; },
-          ` }) }) : (0, import_jsx_runtime8.jsx)("div", { className: "preview-video bg-black flex items-center justify-center text-white h-full", children: "Preview turned off" }), (0, import_jsx_runtime8.jsx)("div", { className: "preview-levels", children: (0, import_jsx_runtime8.jsx)("div", { className: `preview-level clip-${percentage(state.levels)}-preview` }) })] });
+          ` }) }) : (0, import_jsx_runtime9.jsx)("div", { className: "preview-video bg-black flex items-center justify-center text-white h-full", children: "Preview turned off" }), (0, import_jsx_runtime9.jsx)("div", { className: "preview-levels", children: (0, import_jsx_runtime9.jsx)("div", { className: `preview-level clip-${percentage(state.levels)}-preview` }) })] });
 }
-var import_jsx_runtime8, import_react6, import_webrtc_client, inline_view_default3;
+var import_jsx_runtime9, import_react6, import_webrtc_client, inline_view_default3;
 var init_inline_view3 = __esm({
   "build/output.preview/inline-view.js"() {
     "use strict";
-    import_jsx_runtime8 = __toESM(require_jsx_runtime());
+    import_jsx_runtime9 = __toESM(require_jsx_runtime());
     import_react6 = __toESM(require_react());
     import_webrtc_client = __toESM(require_webrtc_client());
     inline_view_default3 = InlineView5;
@@ -642,15 +675,15 @@ __export(inline_view_exports4, {
   default: () => inline_view_default4
 });
 function InlineView6({ state, config }) {
-  const connected = (0, import_jsx_runtime9.jsx)("div", { className: "active text-green-500 dark:text-green-300", children: "Connected and publishing" });
-  const disconnected = (0, import_jsx_runtime9.jsxs)("div", { className: "inactive text-orange-500 dark:text-orange-300", children: ["Disconnected ", state.connectRetries > 0 ? `- retrying(${state.connectRetries})` : ""] });
-  return (0, import_jsx_runtime9.jsx)("div", { className: "rtmp-output", id: `rtmp-output-${config.id}`, children: state.connected ? connected : disconnected });
+  const connected = (0, import_jsx_runtime10.jsx)("div", { className: "active text-green-500 dark:text-green-300", children: "Connected and publishing" });
+  const disconnected = (0, import_jsx_runtime10.jsxs)("div", { className: "inactive text-orange-500 dark:text-orange-300", children: ["Disconnected ", state.connectRetries > 0 ? `- retrying(${state.connectRetries})` : ""] });
+  return (0, import_jsx_runtime10.jsx)("div", { className: "rtmp-output", id: `rtmp-output-${config.id}`, children: state.connected ? connected : disconnected });
 }
-var import_jsx_runtime9, inline_view_default4;
+var import_jsx_runtime10, inline_view_default4;
 var init_inline_view4 = __esm({
   "build/output.rtmp/inline-view.js"() {
     "use strict";
-    import_jsx_runtime9 = __toESM(require_jsx_runtime());
+    import_jsx_runtime10 = __toESM(require_jsx_runtime());
     inline_view_default4 = InlineView6;
   }
 });
@@ -737,23 +770,23 @@ __export(inline_view_exports5, {
 });
 function InlineView7({ state }) {
   if (!state.previous)
-    return (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
+    return (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
   const format = (stat) => Math.floor(stat).toLocaleString("en-US", { maximumFractionDigits: 0 });
-  return (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: state.previous.allStreams.map((s, i) => {
+  return (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: state.previous.allStreams.map((s, i) => {
     const metaCase = s.metadata.case;
     switch (metaCase) {
       case "audio":
-        return (0, import_jsx_runtime10.jsxs)("div", { children: [(0, import_jsx_runtime10.jsxs)("div", { children: ["StreamKey: ", streamKey(s.streamKey)] }), (0, import_jsx_runtime10.jsxs)("div", { children: ["Bitrate: ", format(s.bitrate), "bps"] })] }, i);
+        return (0, import_jsx_runtime11.jsxs)("div", { children: [(0, import_jsx_runtime11.jsxs)("div", { children: ["StreamKey: ", streamKey(s.streamKey)] }), (0, import_jsx_runtime11.jsxs)("div", { children: ["Bitrate: ", format(s.bitrate), "bps"] })] }, i);
       case "video":
-        return (0, import_jsx_runtime10.jsxs)("div", { children: [(0, import_jsx_runtime10.jsxs)("div", { children: ["StreamKey: ", streamKey(s.streamKey)] }), (0, import_jsx_runtime10.jsxs)("div", { children: ["Bitrate: ", format(s.bitrate), "bps"] })] }, i);
+        return (0, import_jsx_runtime11.jsxs)("div", { children: [(0, import_jsx_runtime11.jsxs)("div", { children: ["StreamKey: ", streamKey(s.streamKey)] }), (0, import_jsx_runtime11.jsxs)("div", { children: ["Bitrate: ", format(s.bitrate), "bps"] })] }, i);
       case "ancillary":
-        return (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
+        return (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
       case "subtitle":
-        return (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
+        return (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
       case "playlist":
-        return (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
+        return (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
       case void 0:
-        return (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
+        return (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
       default:
         assertUnreachable7(metaCase);
     }
@@ -762,11 +795,11 @@ function InlineView7({ state }) {
 function streamKey(streamKey2) {
   return streamKey2.streamId.toString();
 }
-var import_jsx_runtime10, inline_view_default5;
+var import_jsx_runtime11, inline_view_default5;
 var init_inline_view5 = __esm({
   "build/output.statistics/inline-view.js"() {
     "use strict";
-    import_jsx_runtime10 = __toESM(require_jsx_runtime());
+    import_jsx_runtime11 = __toESM(require_jsx_runtime());
     init_info();
     inline_view_default5 = InlineView7;
   }
@@ -824,11 +857,11 @@ var init_info = __esm({
 });
 
 // build/output.whep/summary-view.js
-var summary_view_exports3 = {};
-__export(summary_view_exports3, {
-  default: () => summary_view_default3
+var summary_view_exports4 = {};
+__export(summary_view_exports4, {
+  default: () => summary_view_default4
 });
-function SummaryView5({ state, sendCommand }) {
+function SummaryView6({ state, sendCommand }) {
   const handleEnableOutput = () => {
     void enableOutput();
   };
@@ -845,14 +878,14 @@ function SummaryView5({ state, sendCommand }) {
       type: "disable-output"
     });
   };
-  return (0, import_jsx_runtime11.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, import_jsx_runtime11.jsx)("span", { className: `inline-block w-2 h-2 rounded-full ${state.enabled ? "bg-blue-500" : "bg-red-500"}` }), (0, import_jsx_runtime11.jsxs)("span", { className: "text-sm", children: ["Status: ", state.enabled ? "Enabled" : "Disabled"] })] }), (0, import_jsx_runtime11.jsx)("div", { children: state.enabled ? (0, import_jsx_runtime11.jsx)("button", { onClick: handleDisableOutput, className: "px-3 py-1 text-sm bg-red-600 hover:bg-red-700 text-white rounded", children: "Disable Output" }) : (0, import_jsx_runtime11.jsx)("button", { onClick: handleEnableOutput, className: "px-3 py-1 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded", children: "Enable Output" }) })] }) });
+  return (0, import_jsx_runtime12.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, import_jsx_runtime12.jsx)("span", { className: `inline-block w-2 h-2 rounded-full ${state.enabled ? "bg-blue-500" : "bg-red-500"}` }), (0, import_jsx_runtime12.jsxs)("span", { className: "text-sm", children: ["Status: ", state.enabled ? "Enabled" : "Disabled"] })] }), (0, import_jsx_runtime12.jsx)("div", { children: state.enabled ? (0, import_jsx_runtime12.jsx)("button", { onClick: handleDisableOutput, className: "px-3 py-1 text-sm bg-red-600 hover:bg-red-700 text-white rounded", children: "Disable Output" }) : (0, import_jsx_runtime12.jsx)("button", { onClick: handleEnableOutput, className: "px-3 py-1 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded", children: "Enable Output" }) })] }) });
 }
-var import_jsx_runtime11, summary_view_default3;
-var init_summary_view3 = __esm({
+var import_jsx_runtime12, summary_view_default4;
+var init_summary_view4 = __esm({
   "build/output.whep/summary-view.js"() {
     "use strict";
-    import_jsx_runtime11 = __toESM(require_jsx_runtime());
-    summary_view_default3 = SummaryView5;
+    import_jsx_runtime12 = __toESM(require_jsx_runtime());
+    summary_view_default4 = SummaryView6;
   }
 });
 
@@ -903,19 +936,19 @@ function InlineView8({ state, config, raise }) {
   }, [config.showPreview]);
   raise && (0, import_react11.useEffect)(raise, []);
   if (!url)
-    return (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: "..." });
+    return (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: "..." });
   const videoStyles = `
     #whep-${id} video::-webkit-media-controls-play-button { 
       display: none; 
     }
   `;
-  return (0, import_jsx_runtime12.jsxs)("div", { className: "whep-container", children: [(0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, import_jsx_runtime12.jsx)("input", { type: "checkbox", id: `video-toggle-${id}`, checked: showPreview, onChange: (e) => setShowPreview(e.target.checked), className: "h-4 w-4" }), (0, import_jsx_runtime12.jsx)("label", { htmlFor: `video-toggle-${id}`, className: "text-sm", children: "Show Preview" })] }), showPreview ? (0, import_jsx_runtime12.jsx)("div", { className: "whep-video", id: `whep-${id}`, children: (0, import_jsx_runtime12.jsx)("style", { children: videoStyles }) }) : (0, import_jsx_runtime12.jsx)("div", { className: "whep-video bg-black flex items-center justify-center text-white h-full", children: "Preview turned off" })] });
+  return (0, import_jsx_runtime13.jsxs)("div", { className: "whep-container", children: [(0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, import_jsx_runtime13.jsx)("input", { type: "checkbox", id: `video-toggle-${id}`, checked: showPreview, onChange: (e) => setShowPreview(e.target.checked), className: "h-4 w-4" }), (0, import_jsx_runtime13.jsx)("label", { htmlFor: `video-toggle-${id}`, className: "text-sm", children: "Show Preview" })] }), showPreview ? (0, import_jsx_runtime13.jsx)("div", { className: "whep-video", id: `whep-${id}`, children: (0, import_jsx_runtime13.jsx)("style", { children: videoStyles }) }) : (0, import_jsx_runtime13.jsx)("div", { className: "whep-video bg-black flex items-center justify-center text-white h-full", children: "Preview turned off" })] });
 }
-var import_jsx_runtime12, import_react11, import_webrtc_client2, inline_view_default6;
+var import_jsx_runtime13, import_react11, import_webrtc_client2, inline_view_default6;
 var init_inline_view6 = __esm({
   "build/output.whep/inline-view.js"() {
     "use strict";
-    import_jsx_runtime12 = __toESM(require_jsx_runtime());
+    import_jsx_runtime13 = __toESM(require_jsx_runtime());
     import_react11 = __toESM(require_react());
     import_webrtc_client2 = __toESM(require_webrtc_client());
     inline_view_default6 = InlineView8;
@@ -923,18 +956,18 @@ var init_inline_view6 = __esm({
 });
 
 // build/processor.browserOverlay/summary-view.js
-var summary_view_exports4 = {};
-__export(summary_view_exports4, {
-  default: () => summary_view_default4
+var summary_view_exports5 = {};
+__export(summary_view_exports5, {
+  default: () => summary_view_default5
 });
-function SummaryView7({ state, sendCommand }) {
+function SummaryView8({ state, sendCommand }) {
   const [url, setUrl] = (0, import_react13.useState)(state.currentUrl);
   const [enabled, setEnabled] = (0, import_react13.useState)(state.enabled);
   const stateChanged = (0, import_react13.useMemo)(() => {
     return url !== state.currentUrl || enabled !== state.enabled;
   }, [url, enabled]);
   const buttonClass = "mt-2 mb-5 text-white w-full justify-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800";
-  return (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-3 mb-5", children: [(0, import_jsx_runtime13.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime13.jsxs)("div", { className: "mb-5", children: [(0, import_jsx_runtime13.jsx)("label", { htmlFor: "url", className: "mb-2 mr-2 text-sm font-medium text-gray-900 dark:text-white", children: "URL" }), (0, import_jsx_runtime13.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_runtime13.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime13.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [(0, import_jsx_runtime13.jsx)("span", { className: "me-3 text-sm font-medium text-gray-900 dark:text-gray-300", children: "Enabled" }), (0, import_jsx_runtime13.jsx)("input", { type: "checkbox", checked: enabled, onChange: (e) => setEnabled(e.target.checked), 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" })] }) }), (0, import_jsx_runtime13.jsx)("button", { type: "button", className: `${buttonClass} ${!stateChanged ? "opacity-50 cursor-not-allowed" : ""}`, disabled: !stateChanged, onClick: () => {
+  return (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-3 mb-5", children: [(0, import_jsx_runtime14.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime14.jsxs)("div", { className: "mb-5", children: [(0, import_jsx_runtime14.jsx)("label", { htmlFor: "url", className: "mb-2 mr-2 text-sm font-medium text-gray-900 dark:text-white", children: "URL" }), (0, import_jsx_runtime14.jsx)("input", { type: "email", id: "url", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500", value: url, onChange: (e) => setUrl(e.target.value), required: true })] }), (0, import_jsx_runtime14.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime14.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [(0, import_jsx_runtime14.jsx)("span", { className: "me-3 text-sm font-medium text-gray-900 dark:text-gray-300", children: "Enabled" }), (0, import_jsx_runtime14.jsx)("input", { type: "checkbox", checked: enabled, onChange: (e) => setEnabled(e.target.checked), className: "sr-only peer" }), (0, import_jsx_runtime14.jsx)("div", { className: "relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600" })] }) }), (0, import_jsx_runtime14.jsx)("button", { type: "button", className: `${buttonClass} ${!stateChanged ? "opacity-50 cursor-not-allowed" : ""}`, disabled: !stateChanged, onClick: () => {
     if (url !== state.currentUrl) {
       sendCommand({ type: "change-url", url });
     }
@@ -947,13 +980,13 @@ function SummaryView7({ state, sendCommand }) {
     }
   }, children: "Commit" })] });
 }
-var import_jsx_runtime13, import_react13, summary_view_default4;
-var init_summary_view4 = __esm({
+var import_jsx_runtime14, import_react13, summary_view_default5;
+var init_summary_view5 = __esm({
   "build/processor.browserOverlay/summary-view.js"() {
     "use strict";
-    import_jsx_runtime13 = __toESM(require_jsx_runtime());
+    import_jsx_runtime14 = __toESM(require_jsx_runtime());
     import_react13 = __toESM(require_react());
-    summary_view_default4 = SummaryView7;
+    summary_view_default5 = SummaryView8;
   }
 });
 
@@ -963,13 +996,13 @@ __export(inline_view_exports7, {
   default: () => inline_view_default7
 });
 function InlineView9({ state, config }) {
-  return (0, import_jsx_runtime14.jsx)("div", { id: `browser-overlay-${config.id}`, children: (0, import_jsx_runtime14.jsxs)("div", { className: "w-64 grid grid-cols-[min-content,1fr] gap-2", children: [(0, import_jsx_runtime14.jsx)("div", { children: "URL:" }), (0, import_jsx_runtime14.jsx)("div", { className: "truncate", children: state.currentUrl }), (0, import_jsx_runtime14.jsx)("div", { children: "Enabled:" }), (0, import_jsx_runtime14.jsx)("div", { children: (0, import_jsx_runtime14.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [(0, import_jsx_runtime14.jsx)("input", { type: "checkbox", checked: state.enabled, disabled: true, className: "sr-only peer" }), (0, import_jsx_runtime14.jsx)("div", { className: "relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600" })] }) })] }) });
+  return (0, import_jsx_runtime15.jsx)("div", { id: `browser-overlay-${config.id}`, children: (0, import_jsx_runtime15.jsxs)("div", { className: "w-64 grid grid-cols-[min-content,1fr] gap-2", children: [(0, import_jsx_runtime15.jsx)("div", { children: "URL:" }), (0, import_jsx_runtime15.jsx)("div", { className: "truncate", children: state.currentUrl }), (0, import_jsx_runtime15.jsx)("div", { children: "Enabled:" }), (0, import_jsx_runtime15.jsx)("div", { children: (0, import_jsx_runtime15.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [(0, import_jsx_runtime15.jsx)("input", { type: "checkbox", checked: state.enabled, disabled: true, className: "sr-only peer" }), (0, import_jsx_runtime15.jsx)("div", { className: "relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600" })] }) })] }) });
 }
-var import_jsx_runtime14, inline_view_default7;
+var import_jsx_runtime15, inline_view_default7;
 var init_inline_view7 = __esm({
   "build/processor.browserOverlay/inline-view.js"() {
     "use strict";
-    import_jsx_runtime14 = __toESM(require_jsx_runtime());
+    import_jsx_runtime15 = __toESM(require_jsx_runtime());
     inline_view_default7 = InlineView9;
   }
 });
@@ -985,10 +1018,10 @@ function OrderInput(props) {
   }, [props.defaultValue]);
   const [value, setValue] = (0, import_react15.useState)(props.defaultValue ?? []);
   if (value.length == 0) {
-    return (0, import_jsx_runtime15.jsx)("p", { className: "node-editor-helper-text", children: "Sources will appear here when subscriptions have been added to this node" });
+    return (0, import_jsx_runtime16.jsx)("p", { className: "node-editor-helper-text", children: "Sources will appear here when subscriptions have been added to this node" });
   } else {
-    return (0, import_jsx_runtime15.jsx)("div", { id: props.id, children: (0, import_jsx_runtime15.jsx)("ul", { children: value.map((v, ix) => {
-      return (0, import_jsx_runtime15.jsxs)("li", { className: "flex", children: [(0, import_jsx_runtime15.jsx)("span", { className: "node-editor-label flex-grow", children: v }), ix == 0 ? (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {}) : (0, import_jsx_runtime15.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_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18" }) }), ix == value.length - 1 ? (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {}) : (0, import_jsx_runtime15.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_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3" }) })] }, v);
+    return (0, import_jsx_runtime16.jsx)("div", { id: props.id, children: (0, import_jsx_runtime16.jsx)("ul", { children: value.map((v, ix) => {
+      return (0, import_jsx_runtime16.jsxs)("li", { className: "flex", children: [(0, import_jsx_runtime16.jsx)("span", { className: "node-editor-label flex-grow", children: v }), ix == 0 ? (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}) : (0, import_jsx_runtime16.jsx)("svg", { onClick: moveUp(ix), xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, className: "w-4 h-6 shrink cursor-pointer stroke-gray-700 dark:stroke-gray-50", children: (0, import_jsx_runtime16.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18" }) }), ix == value.length - 1 ? (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}) : (0, import_jsx_runtime16.jsx)("svg", { onClick: moveDown(ix), xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, className: "w-4 h-6 shrink cursor-pointer stroke-gray-700 dark:stroke-gray-50", children: (0, import_jsx_runtime16.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3" }) })] }, v);
     }) }) });
   }
   function moveUp(ix) {
@@ -1010,11 +1043,11 @@ function OrderInput(props) {
     };
   }
 }
-var import_jsx_runtime15, import_react15, source_selection_default;
+var import_jsx_runtime16, import_react15, source_selection_default;
 var init_source_selection = __esm({
   "build/processor.cascadingSwitch/source-selection.js"() {
     "use strict";
-    import_jsx_runtime15 = __toESM(require_jsx_runtime());
+    import_jsx_runtime16 = __toESM(require_jsx_runtime());
     import_react15 = __toESM(require_react());
     source_selection_default = OrderInput;
   }
@@ -1026,13 +1059,13 @@ __export(inline_view_exports8, {
   default: () => inline_view_default8
 });
 function InlineView11({ state, config }) {
-  return (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [(0, import_jsx_runtime16.jsx)("h5", { children: "Sources" }), (0, import_jsx_runtime16.jsxs)("ul", { children: [config.sources.map((s, i) => state.activeSource == s ? (0, import_jsx_runtime16.jsxs)("li", { className: activeClasses, children: [s, " <--"] }, i) : state.availableSources.includes(s) ? (0, import_jsx_runtime16.jsxs)("li", { className: availableClasses, children: [s, " (available)"] }, i) : (0, import_jsx_runtime16.jsxs)("li", { className: inactiveClasses, children: [s, " (inactive)"] }, i)), (0, import_jsx_runtime16.jsx)("li", { className: state.activeSource == "fallback" ? activeClasses : availableClasses, children: "fallback" }, "fallback")] })] });
+  return (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [(0, import_jsx_runtime17.jsx)("h5", { children: "Sources" }), (0, import_jsx_runtime17.jsxs)("ul", { children: [config.sources.map((s, i) => state.activeSource == s ? (0, import_jsx_runtime17.jsxs)("li", { className: activeClasses, children: [s, " <--"] }, i) : state.availableSources.includes(s) ? (0, import_jsx_runtime17.jsxs)("li", { className: availableClasses, children: [s, " (available)"] }, i) : (0, import_jsx_runtime17.jsxs)("li", { className: inactiveClasses, children: [s, " (inactive)"] }, i)), (0, import_jsx_runtime17.jsx)("li", { className: state.activeSource == "fallback" ? activeClasses : availableClasses, children: "fallback" }, "fallback")] })] });
 }
-var import_jsx_runtime16, activeClasses, availableClasses, inactiveClasses, inline_view_default8;
+var import_jsx_runtime17, activeClasses, availableClasses, inactiveClasses, inline_view_default8;
 var init_inline_view8 = __esm({
   "build/processor.cascadingSwitch/inline-view.js"() {
     "use strict";
-    import_jsx_runtime16 = __toESM(require_jsx_runtime());
+    import_jsx_runtime17 = __toESM(require_jsx_runtime());
     activeClasses = "active text-green-500 dark:text-green-300";
     availableClasses = "available text-green-500 dark:text-green-300";
     inactiveClasses = "inactive text-orange-500 dark:text-orange-300";
@@ -1046,13 +1079,13 @@ __export(rung_view_exports, {
   default: () => rung_view_default
 });
 function rung_view_default(rung) {
-  return (0, import_jsx_runtime17.jsx)("div", { className: "text-gray-900 dark:text-white", children: rung.name });
+  return (0, import_jsx_runtime18.jsx)("div", { className: "text-gray-900 dark:text-white", children: rung.name });
 }
-var import_jsx_runtime17;
+var import_jsx_runtime18;
 var init_rung_view = __esm({
   "build/processor.fixedLadder/rung-view.js"() {
     "use strict";
-    import_jsx_runtime17 = __toESM(require_jsx_runtime());
+    import_jsx_runtime18 = __toESM(require_jsx_runtime());
   }
 });
 
@@ -1075,7 +1108,7 @@ function CodecEditor(props) {
       target.style.height = target.scrollHeight + "px";
     }
   }, []);
-  return (0, import_jsx_runtime18.jsx)("textarea", { ref: textAreaRef, className: "w-full min-h-fit bg-white text-gray-900 dark:text-white dark:bg-black", onChange: (e) => {
+  return (0, import_jsx_runtime19.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);
@@ -1085,11 +1118,11 @@ function CodecEditor(props) {
     }
   }, defaultValue: JSON.stringify(value, void 0, 2) });
 }
-var import_jsx_runtime18, import_react16;
+var import_jsx_runtime19, import_react16;
 var init_codec_editor = __esm({
   "build/processor.fixedLadder/codec-editor.js"() {
     "use strict";
-    import_jsx_runtime18 = __toESM(require_jsx_runtime());
+    import_jsx_runtime19 = __toESM(require_jsx_runtime());
     import_react16 = __toESM(require_react());
   }
 });
@@ -1100,13 +1133,13 @@ __export(codec_view_exports, {
   default: () => CodecEditor2
 });
 function CodecEditor2(props) {
-  return (0, import_jsx_runtime19.jsxs)("div", { className: "text-gray-900 dark:text-white", children: [props.width, "x", props.height] });
+  return (0, import_jsx_runtime20.jsxs)("div", { className: "text-gray-900 dark:text-white", children: [props.width, "x", props.height] });
 }
-var import_jsx_runtime19;
+var import_jsx_runtime20;
 var init_codec_view = __esm({
   "build/processor.fixedLadder/codec-view.js"() {
     "use strict";
-    import_jsx_runtime19 = __toESM(require_jsx_runtime());
+    import_jsx_runtime20 = __toESM(require_jsx_runtime());
   }
 });
 
@@ -1135,34 +1168,34 @@ function GraphicSelection(props) {
   }, []);
   const [graphcs, setGraphics] = (0, import_react18.useState)([]);
   if (loading) {
-    return (0, import_jsx_runtime20.jsx)("div", { children: "Loading.." });
+    return (0, import_jsx_runtime21.jsx)("div", { children: "Loading.." });
   }
   if (graphcs.length == 0) {
-    return (0, import_jsx_runtime20.jsx)("div", { children: "No graphics loaded" });
+    return (0, import_jsx_runtime21.jsx)("div", { children: "No graphics loaded" });
   }
-  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"), graphcs.map((o, i) => {
-    return (0, import_jsx_runtime20.jsx)("option", { value: o, children: o }, i);
+  return (0, import_jsx_runtime21.jsx)("div", { children: (0, import_jsx_runtime21.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime21.jsx)("option", { value: "", children: "---" }, "empty"), graphcs.map((o, i) => {
+    return (0, import_jsx_runtime21.jsx)("option", { value: o, children: o }, i);
   })] }) });
   function myOnChange(e) {
     props.onChanged(e.target.value);
   }
 }
-var import_jsx_runtime20, import_react18, image_selection_default;
+var import_jsx_runtime21, import_react18, image_selection_default;
 var init_image_selection = __esm({
   "build/processor.onscreenGraphic/image-selection.js"() {
     "use strict";
-    import_jsx_runtime20 = __toESM(require_jsx_runtime());
+    import_jsx_runtime21 = __toESM(require_jsx_runtime());
     import_react18 = __toESM(require_react());
     image_selection_default = GraphicSelection;
   }
 });
 
 // build/processor.onscreenGraphic/summary-view.js
-var summary_view_exports5 = {};
-__export(summary_view_exports5, {
-  default: () => summary_view_default5
+var summary_view_exports6 = {};
+__export(summary_view_exports6, {
+  default: () => summary_view_default6
 });
-function SummaryView9({ state, sendCommand, urls }) {
+function SummaryView10({ state, sendCommand, urls }) {
   const [graphic, setGraphic] = (0, import_react19.useState)(state.activeGraphic?.file);
   const [position, setPosition] = (0, import_react19.useState)(state.activeGraphic?.position ?? { type: "named", position: "topleft" });
   const [graphics, setGraphics] = (0, import_react19.useState)([]);
@@ -1297,7 +1330,7 @@ function SummaryView9({ state, sendCommand, urls }) {
   const buttonClass = "mt-2 mb-5 text-white w-full justify-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800";
   const deleteButtonClass = "mt-2 text-white w-full justify-center bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-700 dark:hover:bg-red-800 dark:focus:ring-red-900";
   const fileInputClass = "block w-full text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400";
-  return (0, import_jsx_runtime21.jsxs)("div", { className: "space-y-3", children: [(0, import_jsx_runtime21.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime21.jsxs)("div", { children: [(0, import_jsx_runtime21.jsx)("label", { htmlFor: "select-graphic", className: "block text-gray-900 dark:text-white mb-1", children: "Source" }), (0, import_jsx_runtime21.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_runtime21.jsx)("option", { value: "", children: "---" }), graphics.map((s) => (0, import_jsx_runtime21.jsx)("option", { value: s, children: s }, s))] })] }), graphic && (0, import_jsx_runtime21.jsxs)("div", { children: [(0, import_jsx_runtime21.jsx)("label", { htmlFor: "select-position", className: "block text-gray-900 dark:text-white mb-1", children: "Graphic position" }), (0, import_jsx_runtime21.jsx)(PositionSelector, { initialPosition: position, onChange: setPosition, graphicChanged, ...state })] }), (0, import_jsx_runtime21.jsx)("button", { type: "button", className: `${buttonClass} ${!stateChanged ? "opacity-50 cursor-not-allowed" : ""}`, onClick: () => sendCommand({ type: "change-graphic", file: graphic, position }), disabled: !stateChanged, children: "Commit" }), !showFileInput && !uploadStatus.success && (0, import_jsx_runtime21.jsx)("button", { type: "button", className: buttonClass, onClick: () => setShowFileInput(true), style: { marginBottom: "1rem" }, children: "Upload Graphic" }), showFileInput && (0, import_jsx_runtime21.jsxs)("form", { style: { display: "block", marginBottom: "1rem" }, children: [(0, import_jsx_runtime21.jsx)("input", { type: "file", id: "file", name: "filename", onChange: onFileChange, className: fileInputClass }), showUploadButton && (0, import_jsx_runtime21.jsx)("button", { type: "button", className: buttonClass, onClick: uploadFile, children: "Upload" })] }), (0, import_jsx_runtime21.jsx)("button", { type: "button", className: deleteButtonClass, onClick: () => setShowDeleteDropdown(!showDeleteDropdown), style: { marginBottom: "1rem" }, children: showDeleteDropdown ? "Hide Delete Options" : "Delete Graphics" }), showDeleteDropdown && (0, import_jsx_runtime21.jsxs)("div", { className: "mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg", children: [(0, import_jsx_runtime21.jsx)("h3", { className: "text-lg font-semibold mb-2 text-gray-900 dark:text-white", children: "Select Graphic to Delete" }), (0, import_jsx_runtime21.jsxs)("select", { className: "w-full mb-2 node-editor-select-input", value: graphicToDelete, onChange: (e) => setGraphicToDelete(e.target.value), children: [(0, import_jsx_runtime21.jsx)("option", { value: "", children: " Select a graphic" }), graphics.map((graphicName) => (0, import_jsx_runtime21.jsx)("option", { value: graphicName, children: graphicName }, graphicName))] }), (0, import_jsx_runtime21.jsx)("button", { onClick: deleteBug, disabled: !graphicToDelete, className: `${deleteButtonClass} ${!graphicToDelete ? "opacity-50 cursor-not-allowed" : ""}`, children: "Delete Selected Graphic" })] }), uploadStatus.message && (0, import_jsx_runtime21.jsx)("div", { className: `mt-2 text-center ${uploadStatus.success ? "text-green-600" : "text-red-600"}`, children: uploadStatus.message })] });
+  return (0, import_jsx_runtime22.jsxs)("div", { className: "space-y-3", children: [(0, import_jsx_runtime22.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime22.jsxs)("div", { children: [(0, import_jsx_runtime22.jsx)("label", { htmlFor: "select-graphic", className: "block text-gray-900 dark:text-white mb-1", children: "Source" }), (0, import_jsx_runtime22.jsxs)("select", { id: "select-graphic", className: "w-full node-editor-select-input", value: graphic || "", onChange: (e) => setGraphic(e.target.value || void 0), children: [(0, import_jsx_runtime22.jsx)("option", { value: "", children: "---" }), graphics.map((s) => (0, import_jsx_runtime22.jsx)("option", { value: s, children: s }, s))] })] }), graphic && (0, import_jsx_runtime22.jsxs)("div", { children: [(0, import_jsx_runtime22.jsx)("label", { htmlFor: "select-position", className: "block text-gray-900 dark:text-white mb-1", children: "Graphic position" }), (0, import_jsx_runtime22.jsx)(PositionSelector, { initialPosition: position, onChange: setPosition, graphicChanged, ...state })] }), (0, import_jsx_runtime22.jsx)("button", { type: "button", className: `${buttonClass} ${!stateChanged ? "opacity-50 cursor-not-allowed" : ""}`, onClick: () => sendCommand({ type: "change-graphic", file: graphic, position }), disabled: !stateChanged, children: "Commit" }), !showFileInput && !uploadStatus.success && (0, import_jsx_runtime22.jsx)("button", { type: "button", className: buttonClass, onClick: () => setShowFileInput(true), style: { marginBottom: "1rem" }, children: "Upload Graphic" }), showFileInput && (0, import_jsx_runtime22.jsxs)("form", { style: { display: "block", marginBottom: "1rem" }, children: [(0, import_jsx_runtime22.jsx)("input", { type: "file", id: "file", name: "filename", onChange: onFileChange, className: fileInputClass }), showUploadButton && (0, import_jsx_runtime22.jsx)("button", { type: "button", className: buttonClass, onClick: uploadFile, children: "Upload" })] }), (0, import_jsx_runtime22.jsx)("button", { type: "button", className: deleteButtonClass, onClick: () => setShowDeleteDropdown(!showDeleteDropdown), style: { marginBottom: "1rem" }, children: showDeleteDropdown ? "Hide Delete Options" : "Delete Graphics" }), showDeleteDropdown && (0, import_jsx_runtime22.jsxs)("div", { className: "mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg", children: [(0, import_jsx_runtime22.jsx)("h3", { className: "text-lg font-semibold mb-2 text-gray-900 dark:text-white", children: "Select Graphic to Delete" }), (0, import_jsx_runtime22.jsxs)("select", { className: "w-full mb-2 node-editor-select-input", value: graphicToDelete, onChange: (e) => setGraphicToDelete(e.target.value), children: [(0, import_jsx_runtime22.jsx)("option", { value: "", children: " Select a graphic" }), graphics.map((graphicName) => (0, import_jsx_runtime22.jsx)("option", { value: graphicName, children: graphicName }, graphicName))] }), (0, import_jsx_runtime22.jsx)("button", { onClick: deleteBug, disabled: !graphicToDelete, className: `${deleteButtonClass} ${!graphicToDelete ? "opacity-50 cursor-not-allowed" : ""}`, children: "Delete Selected Graphic" })] }), uploadStatus.message && (0, import_jsx_runtime22.jsx)("div", { className: `mt-2 text-center ${uploadStatus.success ? "text-green-600" : "text-red-600"}`, children: uploadStatus.message })] });
 }
 function convertPosition(givenPosition, currentVideo, currentGraphic) {
   if (!givenPosition)
@@ -1343,11 +1376,11 @@ function clamp(min, num, max) {
 function assertUnreachable12(_) {
   throw new Error("Didn't expect to get here");
 }
-var import_jsx_runtime21, import_react19, PositionSelector, summary_view_default5;
-var init_summary_view5 = __esm({
+var import_jsx_runtime22, import_react19, PositionSelector, summary_view_default6;
+var init_summary_view6 = __esm({
   "build/processor.onscreenGraphic/summary-view.js"() {
     "use strict";
-    import_jsx_runtime21 = __toESM(require_jsx_runtime());
+    import_jsx_runtime22 = __toESM(require_jsx_runtime());
     import_react19 = __toESM(require_react());
     PositionSelector = ({ initialPosition: givenPosition = { type: "named", position: "topleft" }, onChange, currentVideo, currentGraphic, graphicChanged }) => {
       const convertPos = (pos) => convertPosition(pos, currentVideo, currentGraphic);
@@ -1415,7 +1448,7 @@ var init_summary_view5 = __esm({
           window.removeEventListener("mouseup", handleMouseUp);
         };
       }, [isDragging]);
-      return (0, import_jsx_runtime21.jsxs)("div", { className: "relative w-full max-w-lg mx-auto mt-4 mb-8", children: [(0, import_jsx_runtime21.jsxs)("div", { className: "mb-4 flex items-center gap-2", children: [(0, import_jsx_runtime21.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Position Type:" }), (0, import_jsx_runtime21.jsxs)("select", { value: position.type, onChange: (e) => {
+      return (0, import_jsx_runtime22.jsxs)("div", { className: "relative w-full max-w-lg mx-auto mt-4 mb-8", children: [(0, import_jsx_runtime22.jsxs)("div", { className: "mb-4 flex items-center gap-2", children: [(0, import_jsx_runtime22.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Position Type:" }), (0, import_jsx_runtime22.jsxs)("select", { value: position.type, onChange: (e) => {
         const newType = e.target.value;
         if (newType === "named") {
           setPosition(convertPos({ type: "named", position: "topleft" }));
@@ -1423,12 +1456,12 @@ var init_summary_view5 = __esm({
           setPositionUnit("%");
           setPosition({ ...convertPos(position), type: "percentage" });
         }
-      }, className: "node-editor-select-input", children: [(0, import_jsx_runtime21.jsx)("option", { value: "coordinate", children: "Custom Position" }), (0, import_jsx_runtime21.jsx)("option", { value: "named", children: "Preset Position" })] })] }), position.type === "named" ? (0, import_jsx_runtime21.jsx)("div", { className: "mb-4", children: (0, import_jsx_runtime21.jsxs)("select", { value: position.position, onChange: (e) => {
+      }, className: "node-editor-select-input", children: [(0, import_jsx_runtime22.jsx)("option", { value: "coordinate", children: "Custom Position" }), (0, import_jsx_runtime22.jsx)("option", { value: "named", children: "Preset Position" })] })] }), position.type === "named" ? (0, import_jsx_runtime22.jsx)("div", { className: "mb-4", children: (0, import_jsx_runtime22.jsxs)("select", { value: position.position, onChange: (e) => {
         setPosition(convertPos({
           type: "named",
           position: e.target.value
         }));
-      }, className: "w-full node-editor-select-input", children: [(0, import_jsx_runtime21.jsx)("option", { value: "topleft", children: "Top Left" }), (0, import_jsx_runtime21.jsx)("option", { value: "topright", children: "Top Right" }), (0, import_jsx_runtime21.jsx)("option", { value: "bottomleft", children: "Bottom Left" }), (0, import_jsx_runtime21.jsx)("option", { value: "bottomright", children: "Bottom Right" }), (0, import_jsx_runtime21.jsx)("option", { value: "center", children: "Centered" })] }) }) : (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [(0, import_jsx_runtime21.jsxs)("div", { className: "mb-4 flex items-center gap-2", children: [(0, import_jsx_runtime21.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Position Unit:" }), (0, import_jsx_runtime21.jsxs)("select", { value: positionUnit, onChange: (e) => {
+      }, className: "w-full node-editor-select-input", children: [(0, import_jsx_runtime22.jsx)("option", { value: "topleft", children: "Top Left" }), (0, import_jsx_runtime22.jsx)("option", { value: "topright", children: "Top Right" }), (0, import_jsx_runtime22.jsx)("option", { value: "bottomleft", children: "Bottom Left" }), (0, import_jsx_runtime22.jsx)("option", { value: "bottomright", children: "Bottom Right" }), (0, import_jsx_runtime22.jsx)("option", { value: "center", children: "Centered" })] }) }) : (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [(0, import_jsx_runtime22.jsxs)("div", { className: "mb-4 flex items-center gap-2", children: [(0, import_jsx_runtime22.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Position Unit:" }), (0, import_jsx_runtime22.jsxs)("select", { value: positionUnit, onChange: (e) => {
         setPositionUnit(e.target.value);
         if (e.target.value === "px" && position.type !== "coordinate" && currentVideo && currentGraphic) {
           const { width: videoWidth, height: videoHeight } = currentVideo;
@@ -1453,18 +1486,18 @@ var init_summary_view5 = __esm({
             yStr: void 0
           });
         }
-      }, className: "node-editor-select-input", children: [(0, import_jsx_runtime21.jsx)("option", { value: "px", children: "Pixels" }), (0, import_jsx_runtime21.jsx)("option", { value: "%", children: "Percentage" })] })] }), (0, import_jsx_runtime21.jsxs)("div", { className: "relative bg-gray-200 dark:bg-gray-700 rounded-lg", style: {
+      }, className: "node-editor-select-input", children: [(0, import_jsx_runtime22.jsx)("option", { value: "px", children: "Pixels" }), (0, import_jsx_runtime22.jsx)("option", { value: "%", children: "Percentage" })] })] }), (0, import_jsx_runtime22.jsxs)("div", { className: "relative bg-gray-200 dark:bg-gray-700 rounded-lg", style: {
         width: "100%",
         userSelect: "none",
         aspectRatio: currentVideo ? `${currentVideo.width} / ${currentVideo.height}` : `3 / 2`
-      }, ref: previewAreaRef, children: [(0, import_jsx_runtime21.jsxs)("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-gray-500 dark:text-gray-400", children: [(0, import_jsx_runtime21.jsx)("span", { children: currentVideo ? "Video Preview Area" : "Video Dimensions Unknown" }), " ", currentVideo ? (0, import_jsx_runtime21.jsxs)("span", { children: [currentVideo.width, "x", currentVideo.height, "px"] }) : ""] }), (0, import_jsx_runtime21.jsx)("div", { className: `absolute cursor-move ${currentGraphic && !graphicChanged ? "" : "p-2"} rounded-lg bg-primary-500 bg-opacity-50 hover:bg-opacity-75 transition-colors
+      }, ref: previewAreaRef, children: [(0, import_jsx_runtime22.jsxs)("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-gray-500 dark:text-gray-400", children: [(0, import_jsx_runtime22.jsx)("span", { children: currentVideo ? "Video Preview Area" : "Video Dimensions Unknown" }), " ", currentVideo ? (0, import_jsx_runtime22.jsxs)("span", { children: [currentVideo.width, "x", currentVideo.height, "px"] }) : ""] }), (0, import_jsx_runtime22.jsx)("div", { className: `absolute cursor-move ${currentGraphic && !graphicChanged ? "" : "p-2"} rounded-lg bg-primary-500 bg-opacity-50 hover:bg-opacity-75 transition-colors
                 ${isDragging ? "bg-opacity-75" : ""}`, style: {
         left: `${position.xPct}%`,
         top: `${position.yPct}%`,
         transform: `translate(-${position.xPct}%, -${position.yPct}%)`,
         aspectRatio: currentGraphic && !graphicChanged ? `${currentGraphic.width} / ${currentGraphic.height}` : `1`,
         width: currentGraphic && currentVideo && !graphicChanged ? currentGraphic.width / currentVideo.width * 100 + "%" : void 0
-      }, onMouseDown: handleMouseDown, ref: previewTargetRef, children: (0, import_jsx_runtime21.jsx)("svg", { className: `${currentGraphic && !graphicChanged ? "w-full h-full" : "w-6 h-6"} text-white`, "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: (0, import_jsx_runtime21.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 6v12m-6-6h12m-6-6 1.5 1.5M12 6l-1.5 1.5m1.5 10.5L10.5 16.5M12 18l1.5-1.5M6 12l1.5-1.5M7.5 13.5 6 12m12 0-1.5-1.5M16.5 13.5 18 12" }) }) })] }), (0, import_jsx_runtime21.jsxs)("div", { className: "mt-2 text-sm text-gray-600 dark:text-gray-300 text-center", children: ["Position:", " ", position.type === "percentage" ? `${position.xPct.toFixed(1)}%, ${position.yPct.toFixed(1)}%` : `${Math.round(position.x)}px, ${Math.round(position.y)}px`] }), (0, import_jsx_runtime21.jsxs)("div", { className: "mt-2 flex gap-4", children: [(0, import_jsx_runtime21.jsxs)("div", { children: [(0, import_jsx_runtime21.jsxs)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: ["X Position ", positionUnit] }), (0, import_jsx_runtime21.jsx)("input", { type: "number", step: positionUnit === "%" ? "0.1" : "1", value: position.xStr ?? (positionUnit === "%" ? position.xPct.toFixed(1) : Math.round(position.x)), onChange: (e) => {
+      }, onMouseDown: handleMouseDown, ref: previewTargetRef, children: (0, import_jsx_runtime22.jsx)("svg", { className: `${currentGraphic && !graphicChanged ? "w-full h-full" : "w-6 h-6"} text-white`, "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: (0, import_jsx_runtime22.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 6v12m-6-6h12m-6-6 1.5 1.5M12 6l-1.5 1.5m1.5 10.5L10.5 16.5M12 18l1.5-1.5M6 12l1.5-1.5M7.5 13.5 6 12m12 0-1.5-1.5M16.5 13.5 18 12" }) }) })] }), (0, import_jsx_runtime22.jsxs)("div", { className: "mt-2 text-sm text-gray-600 dark:text-gray-300 text-center", children: ["Position:", " ", position.type === "percentage" ? `${position.xPct.toFixed(1)}%, ${position.yPct.toFixed(1)}%` : `${Math.round(position.x)}px, ${Math.round(position.y)}px`] }), (0, import_jsx_runtime22.jsxs)("div", { className: "mt-2 flex gap-4", children: [(0, import_jsx_runtime22.jsxs)("div", { children: [(0, import_jsx_runtime22.jsxs)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: ["X Position ", positionUnit] }), (0, import_jsx_runtime22.jsx)("input", { type: "number", step: positionUnit === "%" ? "0.1" : "1", value: position.xStr ?? (positionUnit === "%" ? position.xPct.toFixed(1) : Math.round(position.x)), onChange: (e) => {
         const newX = Number(e.target.value);
         setPosition(convertPos({
           type: positionUnit === "%" ? "percentage" : "coordinate",
@@ -1473,7 +1506,7 @@ var init_summary_view5 = __esm({
           y: position.y,
           yStr: position.yStr
         }));
-      }, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600" })] }), (0, import_jsx_runtime21.jsxs)("div", { children: [(0, import_jsx_runtime21.jsxs)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: ["Y Position ", positionUnit] }), (0, import_jsx_runtime21.jsx)("input", { type: "number", step: positionUnit === "%" ? "0.1" : "1", value: position.yStr ?? (positionUnit === "%" ? position.yPct.toFixed(1) : Math.round(position.y)), onChange: (e) => {
+      }, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600" })] }), (0, import_jsx_runtime22.jsxs)("div", { children: [(0, import_jsx_runtime22.jsxs)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: ["Y Position ", positionUnit] }), (0, import_jsx_runtime22.jsx)("input", { type: "number", step: positionUnit === "%" ? "0.1" : "1", value: position.yStr ?? (positionUnit === "%" ? position.yPct.toFixed(1) : Math.round(position.y)), onChange: (e) => {
         const newY = Number(e.target.value);
         setPosition(convertPos({
           type: positionUnit === "%" ? "percentage" : "coordinate",
@@ -1484,7 +1517,7 @@ var init_summary_view5 = __esm({
         }));
       }, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600" })] })] })] })] });
     };
-    summary_view_default5 = SummaryView9;
+    summary_view_default6 = SummaryView10;
   }
 });
 
@@ -15873,13 +15906,13 @@ function InlineView12({ state, config: _2 }) {
       return;
     chartControl.data = makeData(state);
   }, [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_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_runtime22, import_react21, inline_view_default9;
+var import_jsx_runtime23, import_react21, inline_view_default9;
 var init_inline_view9 = __esm({
   "build/util.stats.latency/inline-view.js"() {
     "use strict";
-    import_jsx_runtime22 = __toESM(require_jsx_runtime());
+    import_jsx_runtime23 = __toESM(require_jsx_runtime());
     import_react21 = __toESM(require_react());
     init_auto();
     inline_view_default9 = InlineView12;
@@ -15892,22 +15925,22 @@ __export(source_node_selection_exports, {
   default: () => source_node_selection_default
 });
 function SourceNodeSelection(props) {
-  return (0, import_jsx_runtime23.jsx)("div", { children: (0, import_jsx_runtime23.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime23.jsx)("option", { value: "", children: "---" }, "empty"), Object.values(props.latestDocument.components).map((o, i) => {
+  return (0, import_jsx_runtime24.jsx)("div", { children: (0, import_jsx_runtime24.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime24.jsx)("option", { value: "", children: "---" }, "empty"), Object.values(props.latestDocument.components).map((o, i) => {
     if (o.id == props.id)
-      return (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, {});
+      return (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, {});
     if (o.info.category === "output")
       return;
-    return (0, import_jsx_runtime23.jsx)("option", { value: o.id, children: o.config.displayName }, i);
+    return (0, import_jsx_runtime24.jsx)("option", { value: o.id, children: o.config.displayName }, i);
   })] }) });
   function myOnChange(e) {
     props.onChanged(e.target.value);
   }
 }
-var import_jsx_runtime23, source_node_selection_default;
+var import_jsx_runtime24, source_node_selection_default;
 var init_source_node_selection = __esm({
   "build/util.stats.latency/source-node-selection.js"() {
     "use strict";
-    import_jsx_runtime23 = __toESM(require_jsx_runtime());
+    import_jsx_runtime24 = __toESM(require_jsx_runtime());
     source_node_selection_default = SourceNodeSelection;
   }
 });
@@ -15972,13 +16005,6 @@ function info_default({ defineComponent, Av, validation: { Z, Port, SourceName,
     },
     configForm: {
       form: {
-        notes: {
-          help: "Notes about this component",
-          hint: {
-            type: "text",
-            optional: true
-          }
-        },
         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", optional: true } },
         appName: { help: "Name of the app", hint: { type: "text", validation: Z.string().min(1), defaultValue: "norsk" } },
@@ -15990,6 +16016,13 @@ function info_default({ defineComponent, Av, validation: { Z, Port, SourceName,
             validation: Z.array(SourceName),
             global: unique("sourceName")
           }
+        },
+        notes: {
+          help: "Additional notes about this component",
+          hint: {
+            type: "text",
+            optional: true
+          }
         }
       }
     }
@@ -16020,13 +16053,6 @@ function info_default2({ defineComponent, Audio }) {
     },
     configForm: {
       form: {
-        notes: {
-          help: "Notes about this component",
-          hint: {
-            type: "text",
-            optional: true
-          }
-        },
         sampleRate: {
           help: "Samplerate in Hz of the generated audio",
           hint: {
@@ -16048,6 +16074,13 @@ function info_default2({ defineComponent, Audio }) {
             ],
             defaultValue: "stereo"
           }
+        },
+        notes: {
+          help: "Additional notes about this component",
+          hint: {
+            type: "text",
+            optional: true
+          }
         }
       }
     }
@@ -16127,13 +16160,6 @@ function info_default3({ defineComponent, Av, validation }) {
     },
     configForm: {
       form: {
-        notes: {
-          help: "Notes about this component",
-          hint: {
-            type: "text",
-            optional: true
-          }
-        },
         port: { help: "The port this SRT input will connect to", hint: { type: "numeric", validation: Port, defaultValue: 5001 } },
         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" } },
@@ -16146,6 +16172,13 @@ function info_default3({ defineComponent, Av, validation }) {
             view: SocketConfiguration2,
             form: srt_socket_options_default(validation)
           }
+        },
+        notes: {
+          help: "Additional notes about this component",
+          hint: {
+            type: "text",
+            optional: true
+          }
         }
       }
     }
@@ -16217,13 +16250,6 @@ function info_default4({ defineComponent, Av, validation }) {
     },
     configForm: {
       form: {
-        notes: {
-          help: "Notes about this component",
-          hint: {
-            type: "text",
-            optional: true
-          }
-        },
         port: {
           help: "The port this SRT input will listen on",
           hint: {
@@ -16279,6 +16305,13 @@ function info_default4({ defineComponent, Av, validation }) {
             validation: Z.array(SourceName),
             global: unique("sourceName")
           }
+        },
+        notes: {
+          help: "Additional notes about this component",
+          hint: {
+            type: "text",
+            optional: true
+          }
         }
       }
     }
@@ -16310,13 +16343,13 @@ function info_default5({ defineComponent, Av, validation: { Z, Port, Hostname, S
     },
     configForm: {
       form: {
-        notes: { help: "Notes about this component", hint: { type: "text", optional: true } },
         port: { help: "The receiving port", hint: { type: "numeric", validation: Port, defaultValue: 5001, global: unique("port") } },
         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", 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" } }
+        rtpDecapsulate: { help: "Whether to expect the input TS to be encapsulated in RTP via RFC 2250 (default: false)", hint: { type: "boolean" } },
+        notes: { help: "Additional notes about this component", hint: { type: "text", optional: true } }
       }
     }
   });
@@ -16345,13 +16378,6 @@ function info_default6({ defineComponent, Video, validation: { SourceName, uniqu
     },
     configForm: {
       form: {
-        notes: {
-          help: "Notes about this component",
-          hint: {
-            type: "text",
-            optional: true
-          }
-        },
         resolution: {
           help: "The resolution of the test card stream",
           hint: { type: "select", options: Resolutions, defaultValue: { width: 1280, height: 720 } }
@@ -16375,6 +16401,10 @@ function info_default6({ defineComponent, Video, validation: { SourceName, uniqu
               { value: "smpte100", display: "SMPTE100" }
             ]
           }
+        },
+        notes: {
+          help: "Additional notes about this component",
+          hint: { type: "text", optional: true }
         }
       }
     }
@@ -16386,6 +16416,7 @@ var import_config = __toESM(require_config());
 var import_react5 = __toESM(require_react());
 function info_default7(R) {
   const { defineComponent, All, validation: { Z, Hostname } } = R;
+  const SummaryView11 = import_react5.default.lazy(async () => Promise.resolve().then(() => (init_summary_view3(), summary_view_exports3)));
   const FullscreenView2 = import_react5.default.lazy(async () => Promise.resolve().then(() => (init_fullscreen(), fullscreen_exports)));
   const SegmentConfiguration2 = import_react5.default.lazy(async () => {
     const views = await Promise.resolve().then(() => (init_form_views(), form_views_exports));
@@ -16468,7 +16499,7 @@ function info_default7(R) {
         }
         return { ...state };
       },
-      //summary: SummaryView,
+      summary: SummaryView11,
       fullscreen: FullscreenView2
     },
     configForm: {
@@ -16485,13 +16516,6 @@ function info_default7(R) {
             validation: Z.string().min(5).max(15)
           }
         },
-        notes: {
-          help: "Notes about this component",
-          hint: {
-            type: "text",
-            optional: true
-          }
-        },
         sessionId: {
           help: "Generate a unique session id per run to avoid cache collisions",
           hint: {
@@ -16612,6 +16636,13 @@ function info_default7(R) {
               }
             ]
           }
+        },
+        notes: {
+          help: "Additional notes about this component",
+          hint: {
+            type: "text",
+            optional: true
+          }
         }
       }
     }
@@ -16685,16 +16716,13 @@ function info_default8(R) {
         hardware: (0, import_config2.HardwareSelection)()
       },
       form: {
-        notes: {
-          help: "Notes about this component",
-          hint: {
-            type: "text",
-            optional: true
-          }
-        },
         bufferDelayMs: { help: "How many milliseconds in the jitter buffer", hint: { type: "numeric", validation: JitterBuffer, defaultValue: 500 } },
         skipTranscode: { help: "Skip transcoding for WebRTC-ready streams", hint: { type: "boolean", defaultValue: false } },
-        showPreview: { help: "Show video preview", hint: { type: "boolean", defaultValue: true } }
+        showPreview: { help: "Show video preview", hint: { type: "boolean", defaultValue: true } },
+        notes: {
+          help: "Additional notes about this component",
+          hint: { type: "text", optional: true }
+        }
       }
     }
   });
@@ -16749,11 +16777,14 @@ function info_default9({ defineComponent, Av, validation: { Z, JitterBuffer } })
     },
     configForm: {
       form: {
-        notes: { help: "Notes about this component", hint: { type: "text", optional: true } },
         url: { help: "The URL of the remote RTMP server to connect to, including the full stream path and credentials", hint: { type: "text", validation: Z.string().min(5) } },
         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", hint: { type: "numeric", validation: JitterBuffer, defaultValue: 50 } },
-        retryConnectionTimeout: { help: "Number of seconds to wait until a retry is attempted to the RTMP server", hint: { type: "numeric", validation: Z.number().min(1).max(10), defaultValue: 5 } }
+        retryConnectionTimeout: { help: "Number of seconds to wait until a retry is attempted to the RTMP server", hint: { type: "numeric", validation: Z.number().min(1).max(10), defaultValue: 5 } },
+        notes: {
+          help: "Additional notes about this component",
+          hint: { type: "text", optional: true }
+        }
       }
     }
   });
@@ -16814,7 +16845,6 @@ function info_default10(registration) {
     },
     configForm: {
       form: {
-        notes: { help: "Notes about this component", hint: { type: "text", optional: true } },
         port: {
           help: "The port this SRT output will connect to or listen on",
           hint: {
@@ -16857,6 +16887,10 @@ function info_default10(registration) {
             view: SocketConfiguration2,
             form: srt_socket_options_default(validation)
           }
+        },
+        notes: {
+          help: "Additional notes about this component",
+          hint: { type: "text", optional: true }
         }
       }
     }
@@ -16891,11 +16925,14 @@ function info_default12({ defineComponent, All, validation: { Port, Hostname, Ji
     },
     configForm: {
       form: {
-        notes: { help: "Notes about this component", hint: { type: "text", optional: true } },
         port: { help: "The port this UDP TS output will send to", hint: { type: "numeric", validation: Port, defaultValue: 8001 } },
         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" } }
+        interface: { help: "Which interface to bind to for publishing", hint: { type: "text", validation: Z.union([Z.string().length(0), Iface]), defaultValue: "any" } },
+        notes: {
+          help: "Additional notes about this component",
+          hint: { type: "text", optional: true }
+        }
       }
     }
   });
@@ -16904,7 +16941,7 @@ function info_default12({ defineComponent, All, validation: { Port, Hostname, Ji
 // build/output.whep/info.js
 var import_config3 = __toESM(require_config());
 var import_react12 = __toESM(require_react());
-var SummaryView6 = import_react12.default.lazy(async () => Promise.resolve().then(() => (init_summary_view3(), summary_view_exports3)));
+var SummaryView7 = import_react12.default.lazy(async () => Promise.resolve().then(() => (init_summary_view4(), summary_view_exports4)));
 function info_default13(R) {
   const { defineComponent, Av, validation: { JitterBuffer } } = R;
   const InlineView13 = import_react12.default.lazy(async () => Promise.resolve().then(() => (init_inline_view6(), inline_view_exports6)));
@@ -16948,16 +16985,19 @@ function info_default13(R) {
         return { ...state };
       },
       inline: InlineView13,
-      summary: SummaryView6
+      summary: SummaryView7
     },
     configForm: {
       global: {
         iceServers: (0, import_config3.GlobalIceServers)(R)
       },
       form: {
-        notes: { help: "Notes about this component", hint: { type: "text", optional: true } },
         bufferDelayMs: { help: "How many milliseconds in the jitter buffer", hint: { type: "numeric", validation: JitterBuffer, defaultValue: 500 } },
-        showPreview: { help: "Show video preview", hint: { type: "boolean", defaultValue: true } }
+        showPreview: { help: "Show video preview", hint: { type: "boolean", defaultValue: true } },
+        notes: {
+          help: "Additional notes about this component",
+          hint: { type: "text", optional: true }
+        }
       }
     }
   });
@@ -16969,7 +17009,7 @@ function assertUnreachable8(_) {
 // build/processor.browserOverlay/info.js
 var import_config4 = __toESM(require_config());
 var import_react14 = __toESM(require_react());
-var SummaryView8 = import_react14.default.lazy(async () => Promise.resolve().then(() => (init_summary_view4(), summary_view_exports4)));
+var SummaryView9 = import_react14.default.lazy(async () => Promise.resolve().then(() => (init_summary_view5(), summary_view_exports5)));
 var InlineView10 = import_react14.default.lazy(async () => Promise.resolve().then(() => (init_inline_view7(), inline_view_exports7)));
 function info_default14({ defineComponent, Video, validation: { Z } }) {
   return defineComponent({
@@ -16997,7 +17037,7 @@ function info_default14({ defineComponent, Video, validation: { Z } }) {
       };
     },
     runtime: {
-      summary: SummaryView8,
+      summary: SummaryView9,
       inline: InlineView10,
       initialState: () => ({
         currentUrl: "",
@@ -17504,7 +17544,7 @@ var import_config6 = __toESM(require_config());
 var import_react20 = __toESM(require_react());
 function info_default17({ defineComponent, Video }) {
   const GraphicSelection2 = import_react20.default.lazy(async () => Promise.resolve().then(() => (init_image_selection(), image_selection_exports)));
-  const SummaryView10 = import_react20.default.lazy(async () => Promise.resolve().then(() => (init_summary_view5(), summary_view_exports5)));
+  const SummaryView11 = import_react20.default.lazy(async () => Promise.resolve().then(() => (init_summary_view6(), summary_view_exports6)));
   return defineComponent({
     identifier: "processor.onscreenGraphic",
     category: "processor",
@@ -17530,7 +17570,7 @@ function info_default17({ defineComponent, Video }) {
       };
     },
     runtime: {
-      summary: SummaryView10,
+      summary: SummaryView11,
       initialState: () => ({}),
       handleEvent: (ev, state) => {
         const evType = ev.type;