@norskvideo/norsk-studio-built-ins 1.12.0-2025-02-02-6cada821 → 1.12.0-2025-02-04-9551fc82

package/client/info.js

@@ -236,11 +236,7 @@ function SummaryView3({ state, config, sendCommand }) {
       disconnectedSources.push(streamId);
     }
   });
-  return (0, import_jsx_runtime5.jsxs)("div", { className: "dark:text-white text-black mb-3 w-60", children: [(0, import_jsx_runtime5.jsxs)("div", { id: "srt-sources-connected", children: [(0, import_jsx_runtime5.jsx)("span", { children: "Connected Sources" }), (0, import_jsx_runtime5.jsx)("ul", { children: connectedSources.map((streamId) => {
-    return (0, import_jsx_runtime5.jsxs)("li", { className: "text-green-300", children: [streamId, (0, import_jsx_runtime5.jsx)("button", { onClick: () => handleResetStream(streamId), className: "ml-2 px-2 py-1 text-xs bg-red-600 hover:bg-red-700 text-white rounded", children: "Reset" }), (0, import_jsx_runtime5.jsx)("button", { onClick: () => handleDisableStream(streamId), className: "ml-2 px-2 py-1 text-xs bg-red-600 hover:bg-red-700 text-white rounded", children: "Disable" })] }, streamId);
-  }) })] }), (0, import_jsx_runtime5.jsxs)("div", { id: "srt-sources-disconnected", className: "mt-3", children: [(0, import_jsx_runtime5.jsx)("span", { children: "Disconnected Sources" }), (0, import_jsx_runtime5.jsx)("ul", { children: disconnectedSources.map((streamId) => {
-    return (0, import_jsx_runtime5.jsxs)("li", { className: "text-orange-300", children: [streamId, state.disabledStreams.includes(streamId) ? (0, import_jsx_runtime5.jsx)("button", { onClick: () => handleEnableStream(streamId), className: "ml-2 px-2 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded", children: "Enable" }) : (0, import_jsx_runtime5.jsx)("button", { onClick: () => handleDisableStream(streamId), className: "ml-2 px-2 py-1 text-xs bg-red-600 hover:bg-red-700 text-white rounded", children: "Disable" })] }, streamId);
-  }) })] })] });
+  return (0, import_jsx_runtime5.jsxs)("div", { className: "dark:text-white text-black w-60", children: [(0, import_jsx_runtime5.jsxs)("div", { className: "mb-6", children: [(0, import_jsx_runtime5.jsx)("h3", { className: "text-sm font-semibold mb-2 dark:text-gray-300", children: "Connected Sources" }), (0, import_jsx_runtime5.jsxs)("ul", { className: "space-y-2", children: [connectedSources.map((streamId) => (0, import_jsx_runtime5.jsxs)("li", { className: "flex items-center justify-between group", children: [(0, import_jsx_runtime5.jsx)("span", { className: "text-green-400 font-medium", children: streamId }), (0, import_jsx_runtime5.jsxs)("div", { className: "flex space-x-2", children: [(0, import_jsx_runtime5.jsx)("button", { onClick: () => handleResetStream(streamId), className: "opacity-80 group-hover:opacity-100 px-3 py-1 text-xs bg-red-600 hover:bg-red-700 text-white rounded transition-colors", children: "Reset" }), (0, import_jsx_runtime5.jsx)("button", { onClick: () => handleDisableStream(streamId), className: "opacity-80 group-hover:opacity-100 px-3 py-1 text-xs bg-red-600 hover:bg-red-700 text-white rounded transition-colors", children: "Disable" })] })] }, streamId)), connectedSources.length === 0 && (0, import_jsx_runtime5.jsx)("li", { className: "text-sm text-gray-500 dark:text-gray-400 italic", children: "No connected sources" })] })] }), (0, import_jsx_runtime5.jsxs)("div", { children: [(0, import_jsx_runtime5.jsx)("h3", { className: "text-sm font-semibold mb-2 dark:text-gray-300", children: "Disconnected Sources" }), (0, import_jsx_runtime5.jsxs)("ul", { className: "space-y-2", children: [disconnectedSources.map((streamId) => (0, import_jsx_runtime5.jsxs)("li", { className: "flex items-center justify-between group", children: [(0, import_jsx_runtime5.jsx)("span", { className: "text-orange-300 font-medium", children: streamId }), state.disabledStreams.includes(streamId) ? (0, import_jsx_runtime5.jsx)("button", { onClick: () => handleEnableStream(streamId), className: "opacity-80 group-hover:opacity-100 px-3 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors", children: "Enable" }) : (0, import_jsx_runtime5.jsx)("button", { onClick: () => handleDisableStream(streamId), className: "opacity-80 group-hover:opacity-100 px-3 py-1 text-xs bg-red-600 hover:bg-red-700 text-white rounded transition-colors", children: "Disable" })] }, streamId)), disconnectedSources.length === 0 && (0, import_jsx_runtime5.jsx)("li", { className: "text-sm text-gray-500 dark:text-gray-400 italic", children: "No disconnected sources" })] })] })] });
 }
 var import_jsx_runtime5, summary_view_default2;
 var init_summary_view2 = __esm({
@@ -810,7 +806,9 @@ function info_default11({ defineComponent, All }) {
       inline: InlineView13
     },
     configForm: {
-      form: {}
+      form: {
+        notes: { help: "Notes about this component", hint: { type: "text", optional: true } }
+      }
     }
   });
 }
@@ -825,6 +823,39 @@ var init_info = __esm({
   }
 });
 
+// build/output.whep/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_runtime11.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, import_jsx_runtime11.jsx)("span", { className: `inline-block w-2 h-2 rounded-full ${state.enabled ? "bg-blue-500" : "bg-red-500"}` }), (0, import_jsx_runtime11.jsxs)("span", { className: "text-sm", children: ["Status: ", state.enabled ? "Enabled" : "Disabled"] })] }), (0, import_jsx_runtime11.jsx)("div", { children: state.enabled ? (0, import_jsx_runtime11.jsx)("button", { onClick: handleDisableOutput, className: "px-3 py-1 text-sm bg-red-600 hover:bg-red-700 text-white rounded", children: "Disable Output" }) : (0, import_jsx_runtime11.jsx)("button", { onClick: handleEnableOutput, className: "px-3 py-1 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded", children: "Enable Output" }) })] }) });
+}
+var import_jsx_runtime11, summary_view_default3;
+var init_summary_view3 = __esm({
+  "build/output.whep/summary-view.js"() {
+    "use strict";
+    import_jsx_runtime11 = __toESM(require_jsx_runtime());
+    summary_view_default3 = SummaryView5;
+  }
+});
+
 // build/output.whep/inline-view.js
 var inline_view_exports6 = {};
 __export(inline_view_exports6, {
@@ -872,19 +903,19 @@ function InlineView8({ state, config, raise }) {
   }, [config.showPreview]);
   raise && (0, import_react11.useEffect)(raise, []);
   if (!url)
-    return (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: "..." });
+    return (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: "..." });
   const videoStyles = `
     #whep-${id} video::-webkit-media-controls-play-button { 
       display: none; 
     }
   `;
-  return (0, import_jsx_runtime11.jsxs)("div", { className: "whep-container", children: [(0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, import_jsx_runtime11.jsx)("input", { type: "checkbox", id: `video-toggle-${id}`, checked: showPreview, onChange: (e) => setShowPreview(e.target.checked), className: "h-4 w-4" }), (0, import_jsx_runtime11.jsx)("label", { htmlFor: `video-toggle-${id}`, className: "text-sm", children: "Show Preview" })] }), showPreview ? (0, import_jsx_runtime11.jsx)("div", { className: "whep-video", id: `whep-${id}`, children: (0, import_jsx_runtime11.jsx)("style", { children: videoStyles }) }) : (0, import_jsx_runtime11.jsx)("div", { className: "whep-video bg-black flex items-center justify-center text-white h-full", children: "Preview turned off" })] });
+  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" })] });
 }
-var import_jsx_runtime11, import_react11, import_webrtc_client2, inline_view_default6;
+var import_jsx_runtime12, import_react11, import_webrtc_client2, inline_view_default6;
 var init_inline_view6 = __esm({
   "build/output.whep/inline-view.js"() {
     "use strict";
-    import_jsx_runtime11 = __toESM(require_jsx_runtime());
+    import_jsx_runtime12 = __toESM(require_jsx_runtime());
     import_react11 = __toESM(require_react());
     import_webrtc_client2 = __toESM(require_webrtc_client());
     inline_view_default6 = InlineView8;
@@ -892,18 +923,18 @@ var init_inline_view6 = __esm({
 });
 
 // build/processor.browserOverlay/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 SummaryView7({ state, sendCommand }) {
   const [url, setUrl] = (0, import_react13.useState)(state.currentUrl);
   const [enabled, setEnabled] = (0, import_react13.useState)(state.enabled);
   const stateChanged = (0, import_react13.useMemo)(() => {
     return url !== state.currentUrl || enabled !== state.enabled;
   }, [url, enabled]);
   const buttonClass = "mt-2 mb-5 text-white w-full justify-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800";
-  return (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-3 mb-5", children: [(0, import_jsx_runtime12.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime12.jsxs)("div", { className: "mb-5", children: [(0, import_jsx_runtime12.jsx)("label", { htmlFor: "url", className: "mb-2 mr-2 text-sm font-medium text-gray-900 dark:text-white", children: "URL" }), (0, import_jsx_runtime12.jsx)("input", { type: "email", id: "url", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500", value: url, onChange: (e) => setUrl(e.target.value), required: true })] }), (0, import_jsx_runtime12.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime12.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [(0, import_jsx_runtime12.jsx)("span", { className: "me-3 text-sm font-medium text-gray-900 dark:text-gray-300", children: "Enabled" }), (0, import_jsx_runtime12.jsx)("input", { type: "checkbox", checked: enabled, onChange: (e) => setEnabled(e.target.checked), className: "sr-only peer" }), (0, import_jsx_runtime12.jsx)("div", { className: "relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600" })] }) }), (0, import_jsx_runtime12.jsx)("button", { type: "button", className: `${buttonClass} ${!stateChanged ? "opacity-50 cursor-not-allowed" : ""}`, disabled: !stateChanged, onClick: () => {
+  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: () => {
     if (url !== state.currentUrl) {
       sendCommand({ type: "change-url", url });
     }
@@ -916,13 +947,13 @@ function SummaryView5({ state, sendCommand }) {
     }
   }, children: "Commit" })] });
 }
-var import_jsx_runtime12, import_react13, summary_view_default3;
-var init_summary_view3 = __esm({
+var import_jsx_runtime13, import_react13, summary_view_default4;
+var init_summary_view4 = __esm({
   "build/processor.browserOverlay/summary-view.js"() {
     "use strict";
-    import_jsx_runtime12 = __toESM(require_jsx_runtime());
+    import_jsx_runtime13 = __toESM(require_jsx_runtime());
     import_react13 = __toESM(require_react());
-    summary_view_default3 = SummaryView5;
+    summary_view_default4 = SummaryView7;
   }
 });
 
@@ -932,13 +963,13 @@ __export(inline_view_exports7, {
   default: () => inline_view_default7
 });
 function InlineView9({ state, config }) {
-  return (0, import_jsx_runtime13.jsx)("div", { id: `browser-overlay-${config.id}`, children: (0, import_jsx_runtime13.jsxs)("div", { className: "w-64 grid grid-cols-[min-content,1fr] gap-2", children: [(0, import_jsx_runtime13.jsx)("div", { children: "URL:" }), (0, import_jsx_runtime13.jsx)("div", { className: "truncate", children: state.currentUrl }), (0, import_jsx_runtime13.jsx)("div", { children: "Enabled:" }), (0, import_jsx_runtime13.jsx)("div", { children: (0, import_jsx_runtime13.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [(0, import_jsx_runtime13.jsx)("input", { type: "checkbox", checked: state.enabled, disabled: true, className: "sr-only peer" }), (0, import_jsx_runtime13.jsx)("div", { className: "relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600" })] }) })] }) });
+  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" })] }) })] }) });
 }
-var import_jsx_runtime13, inline_view_default7;
+var import_jsx_runtime14, inline_view_default7;
 var init_inline_view7 = __esm({
   "build/processor.browserOverlay/inline-view.js"() {
     "use strict";
-    import_jsx_runtime13 = __toESM(require_jsx_runtime());
+    import_jsx_runtime14 = __toESM(require_jsx_runtime());
     inline_view_default7 = InlineView9;
   }
 });
@@ -954,10 +985,10 @@ function OrderInput(props) {
   }, [props.defaultValue]);
   const [value, setValue] = (0, import_react15.useState)(props.defaultValue ?? []);
   if (value.length == 0) {
-    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" });
+    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" });
   } else {
-    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);
+    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);
     }) }) });
   }
   function moveUp(ix) {
@@ -979,11 +1010,11 @@ function OrderInput(props) {
     };
   }
 }
-var import_jsx_runtime14, import_react15, source_selection_default;
+var import_jsx_runtime15, import_react15, source_selection_default;
 var init_source_selection = __esm({
   "build/processor.cascadingSwitch/source-selection.js"() {
     "use strict";
-    import_jsx_runtime14 = __toESM(require_jsx_runtime());
+    import_jsx_runtime15 = __toESM(require_jsx_runtime());
     import_react15 = __toESM(require_react());
     source_selection_default = OrderInput;
   }
@@ -995,13 +1026,13 @@ __export(inline_view_exports8, {
   default: () => inline_view_default8
 });
 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")] })] });
+  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")] })] });
 }
-var import_jsx_runtime15, activeClasses, availableClasses, inactiveClasses, inline_view_default8;
+var import_jsx_runtime16, activeClasses, availableClasses, inactiveClasses, inline_view_default8;
 var init_inline_view8 = __esm({
   "build/processor.cascadingSwitch/inline-view.js"() {
     "use strict";
-    import_jsx_runtime15 = __toESM(require_jsx_runtime());
+    import_jsx_runtime16 = __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";
@@ -1015,13 +1046,13 @@ __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 });
+  return (0, import_jsx_runtime17.jsx)("div", { className: "text-gray-900 dark:text-white", children: rung.name });
 }
-var import_jsx_runtime16;
+var import_jsx_runtime17;
 var init_rung_view = __esm({
   "build/processor.fixedLadder/rung-view.js"() {
     "use strict";
-    import_jsx_runtime16 = __toESM(require_jsx_runtime());
+    import_jsx_runtime17 = __toESM(require_jsx_runtime());
   }
 });
 
@@ -1044,7 +1075,7 @@ function CodecEditor(props) {
       target.style.height = target.scrollHeight + "px";
     }
   }, []);
-  return (0, import_jsx_runtime17.jsx)("textarea", { ref: textAreaRef, className: "w-full min-h-fit bg-white text-gray-900 dark:text-white dark:bg-black", onChange: (e) => {
+  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) => {
     const target = e.currentTarget;
     try {
       const codec = JSON.parse(target.value);
@@ -1054,11 +1085,11 @@ function CodecEditor(props) {
     }
   }, defaultValue: JSON.stringify(value, void 0, 2) });
 }
-var import_jsx_runtime17, import_react16;
+var import_jsx_runtime18, import_react16;
 var init_codec_editor = __esm({
   "build/processor.fixedLadder/codec-editor.js"() {
     "use strict";
-    import_jsx_runtime17 = __toESM(require_jsx_runtime());
+    import_jsx_runtime18 = __toESM(require_jsx_runtime());
     import_react16 = __toESM(require_react());
   }
 });
@@ -1069,13 +1100,13 @@ __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] });
+  return (0, import_jsx_runtime19.jsxs)("div", { className: "text-gray-900 dark:text-white", children: [props.width, "x", props.height] });
 }
-var import_jsx_runtime18;
+var import_jsx_runtime19;
 var init_codec_view = __esm({
   "build/processor.fixedLadder/codec-view.js"() {
     "use strict";
-    import_jsx_runtime18 = __toESM(require_jsx_runtime());
+    import_jsx_runtime19 = __toESM(require_jsx_runtime());
   }
 });
 
@@ -1104,34 +1135,34 @@ function GraphicSelection(props) {
   }, []);
   const [graphcs, setGraphics] = (0, import_react18.useState)([]);
   if (loading) {
-    return (0, import_jsx_runtime19.jsx)("div", { children: "Loading.." });
+    return (0, import_jsx_runtime20.jsx)("div", { children: "Loading.." });
   }
   if (graphcs.length == 0) {
-    return (0, import_jsx_runtime19.jsx)("div", { children: "No graphics loaded" });
+    return (0, import_jsx_runtime20.jsx)("div", { children: "No graphics loaded" });
   }
-  return (0, import_jsx_runtime19.jsx)("div", { children: (0, import_jsx_runtime19.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime19.jsx)("option", { value: "", children: "---" }, "empty"), graphcs.map((o, i) => {
-    return (0, import_jsx_runtime19.jsx)("option", { value: o, children: o }, i);
+  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);
   })] }) });
   function myOnChange(e) {
     props.onChanged(e.target.value);
   }
 }
-var import_jsx_runtime19, import_react18, image_selection_default;
+var import_jsx_runtime20, import_react18, image_selection_default;
 var init_image_selection = __esm({
   "build/processor.onscreenGraphic/image-selection.js"() {
     "use strict";
-    import_jsx_runtime19 = __toESM(require_jsx_runtime());
+    import_jsx_runtime20 = __toESM(require_jsx_runtime());
     import_react18 = __toESM(require_react());
     image_selection_default = GraphicSelection;
   }
 });
 
 // build/processor.onscreenGraphic/summary-view.js
-var summary_view_exports4 = {};
-__export(summary_view_exports4, {
-  default: () => summary_view_default4
+var summary_view_exports5 = {};
+__export(summary_view_exports5, {
+  default: () => summary_view_default5
 });
-function SummaryView7({ state, sendCommand, urls }) {
+function SummaryView9({ 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)([]);
@@ -1266,7 +1297,7 @@ function SummaryView7({ 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_runtime20.jsxs)("div", { className: "space-y-3", children: [(0, import_jsx_runtime20.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime20.jsxs)("div", { children: [(0, import_jsx_runtime20.jsx)("label", { htmlFor: "select-graphic", className: "block text-gray-900 dark:text-white mb-1", children: "Source" }), (0, import_jsx_runtime20.jsxs)("select", { id: "select-graphic", className: "w-full node-editor-select-input", value: graphic || "", onChange: (e) => setGraphic(e.target.value || void 0), children: [(0, import_jsx_runtime20.jsx)("option", { value: "", children: "---" }), graphics.map((s) => (0, import_jsx_runtime20.jsx)("option", { value: s, children: s }, s))] })] }), graphic && (0, import_jsx_runtime20.jsxs)("div", { children: [(0, import_jsx_runtime20.jsx)("label", { htmlFor: "select-position", className: "block text-gray-900 dark:text-white mb-1", children: "Graphic position" }), (0, import_jsx_runtime20.jsx)(PositionSelector, { initialPosition: position, onChange: setPosition, graphicChanged, ...state })] }), (0, import_jsx_runtime20.jsx)("button", { type: "button", className: `${buttonClass} ${!stateChanged ? "opacity-50 cursor-not-allowed" : ""}`, onClick: () => sendCommand({ type: "change-graphic", file: graphic, position }), disabled: !stateChanged, children: "Commit" }), !showFileInput && !uploadStatus.success && (0, import_jsx_runtime20.jsx)("button", { type: "button", className: buttonClass, onClick: () => setShowFileInput(true), style: { marginBottom: "1rem" }, children: "Upload Graphic" }), showFileInput && (0, import_jsx_runtime20.jsxs)("form", { style: { display: "block", marginBottom: "1rem" }, children: [(0, import_jsx_runtime20.jsx)("input", { type: "file", id: "file", name: "filename", onChange: onFileChange, className: fileInputClass }), showUploadButton && (0, import_jsx_runtime20.jsx)("button", { type: "button", className: buttonClass, onClick: uploadFile, children: "Upload" })] }), (0, import_jsx_runtime20.jsx)("button", { type: "button", className: deleteButtonClass, onClick: () => setShowDeleteDropdown(!showDeleteDropdown), style: { marginBottom: "1rem" }, children: showDeleteDropdown ? "Hide Delete Options" : "Delete Graphics" }), showDeleteDropdown && (0, import_jsx_runtime20.jsxs)("div", { className: "mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg", children: [(0, import_jsx_runtime20.jsx)("h3", { className: "text-lg font-semibold mb-2 text-gray-900 dark:text-white", children: "Select Graphic to Delete" }), (0, import_jsx_runtime20.jsxs)("select", { className: "w-full mb-2 node-editor-select-input", value: graphicToDelete, onChange: (e) => setGraphicToDelete(e.target.value), children: [(0, import_jsx_runtime20.jsx)("option", { value: "", children: " Select a graphic" }), graphics.map((graphicName) => (0, import_jsx_runtime20.jsx)("option", { value: graphicName, children: graphicName }, graphicName))] }), (0, import_jsx_runtime20.jsx)("button", { onClick: deleteBug, disabled: !graphicToDelete, className: `${deleteButtonClass} ${!graphicToDelete ? "opacity-50 cursor-not-allowed" : ""}`, children: "Delete Selected Graphic" })] }), uploadStatus.message && (0, import_jsx_runtime20.jsx)("div", { className: `mt-2 text-center ${uploadStatus.success ? "text-green-600" : "text-red-600"}`, children: uploadStatus.message })] });
+  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 })] });
 }
 function convertPosition(givenPosition, currentVideo, currentGraphic) {
   if (!givenPosition)
@@ -1312,11 +1343,11 @@ function clamp(min, num, max) {
 function assertUnreachable12(_) {
   throw new Error("Didn't expect to get here");
 }
-var import_jsx_runtime20, import_react19, PositionSelector, summary_view_default4;
-var init_summary_view4 = __esm({
+var import_jsx_runtime21, import_react19, PositionSelector, summary_view_default5;
+var init_summary_view5 = __esm({
   "build/processor.onscreenGraphic/summary-view.js"() {
     "use strict";
-    import_jsx_runtime20 = __toESM(require_jsx_runtime());
+    import_jsx_runtime21 = __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);
@@ -1384,7 +1415,7 @@ var init_summary_view4 = __esm({
           window.removeEventListener("mouseup", handleMouseUp);
         };
       }, [isDragging]);
-      return (0, import_jsx_runtime20.jsxs)("div", { className: "relative w-full max-w-lg mx-auto mt-4 mb-8", children: [(0, import_jsx_runtime20.jsxs)("div", { className: "mb-4 flex items-center gap-2", children: [(0, import_jsx_runtime20.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Position Type:" }), (0, import_jsx_runtime20.jsxs)("select", { value: position.type, onChange: (e) => {
+      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) => {
         const newType = e.target.value;
         if (newType === "named") {
           setPosition(convertPos({ type: "named", position: "topleft" }));
@@ -1392,12 +1423,12 @@ var init_summary_view4 = __esm({
           setPositionUnit("%");
           setPosition({ ...convertPos(position), type: "percentage" });
         }
-      }, className: "node-editor-select-input", children: [(0, import_jsx_runtime20.jsx)("option", { value: "coordinate", children: "Custom Position" }), (0, import_jsx_runtime20.jsx)("option", { value: "named", children: "Preset Position" })] })] }), position.type === "named" ? (0, import_jsx_runtime20.jsx)("div", { className: "mb-4", children: (0, import_jsx_runtime20.jsxs)("select", { value: position.position, onChange: (e) => {
+      }, 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) => {
         setPosition(convertPos({
           type: "named",
           position: e.target.value
         }));
-      }, className: "w-full node-editor-select-input", children: [(0, import_jsx_runtime20.jsx)("option", { value: "topleft", children: "Top Left" }), (0, import_jsx_runtime20.jsx)("option", { value: "topright", children: "Top Right" }), (0, import_jsx_runtime20.jsx)("option", { value: "bottomleft", children: "Bottom Left" }), (0, import_jsx_runtime20.jsx)("option", { value: "bottomright", children: "Bottom Right" }), (0, import_jsx_runtime20.jsx)("option", { value: "center", children: "Centered" })] }) }) : (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [(0, import_jsx_runtime20.jsxs)("div", { className: "mb-4 flex items-center gap-2", children: [(0, import_jsx_runtime20.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Position Unit:" }), (0, import_jsx_runtime20.jsxs)("select", { value: positionUnit, onChange: (e) => {
+      }, 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) => {
         setPositionUnit(e.target.value);
         if (e.target.value === "px" && position.type !== "coordinate" && currentVideo && currentGraphic) {
           const { width: videoWidth, height: videoHeight } = currentVideo;
@@ -1422,18 +1453,18 @@ var init_summary_view4 = __esm({
             yStr: void 0
           });
         }
-      }, className: "node-editor-select-input", children: [(0, import_jsx_runtime20.jsx)("option", { value: "px", children: "Pixels" }), (0, import_jsx_runtime20.jsx)("option", { value: "%", children: "Percentage" })] })] }), (0, import_jsx_runtime20.jsxs)("div", { className: "relative bg-gray-200 dark:bg-gray-700 rounded-lg", style: {
+      }, 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: {
         width: "100%",
         userSelect: "none",
         aspectRatio: currentVideo ? `${currentVideo.width} / ${currentVideo.height}` : `3 / 2`
-      }, ref: previewAreaRef, children: [(0, import_jsx_runtime20.jsxs)("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-gray-500 dark:text-gray-400", children: [(0, import_jsx_runtime20.jsx)("span", { children: currentVideo ? "Video Preview Area" : "Video Dimensions Unknown" }), " ", currentVideo ? (0, import_jsx_runtime20.jsxs)("span", { children: [currentVideo.width, "x", currentVideo.height, "px"] }) : ""] }), (0, import_jsx_runtime20.jsx)("div", { className: `absolute cursor-move ${currentGraphic && !graphicChanged ? "" : "p-2"} rounded-lg bg-primary-500 bg-opacity-50 hover:bg-opacity-75 transition-colors
+      }, 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
                 ${isDragging ? "bg-opacity-75" : ""}`, style: {
         left: `${position.xPct}%`,
         top: `${position.yPct}%`,
         transform: `translate(-${position.xPct}%, -${position.yPct}%)`,
         aspectRatio: currentGraphic && !graphicChanged ? `${currentGraphic.width} / ${currentGraphic.height}` : `1`,
         width: currentGraphic && currentVideo && !graphicChanged ? currentGraphic.width / currentVideo.width * 100 + "%" : void 0
-      }, onMouseDown: handleMouseDown, ref: previewTargetRef, children: (0, import_jsx_runtime20.jsx)("svg", { className: `${currentGraphic && !graphicChanged ? "w-full h-full" : "w-6 h-6"} text-white`, "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: (0, import_jsx_runtime20.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 6v12m-6-6h12m-6-6 1.5 1.5M12 6l-1.5 1.5m1.5 10.5L10.5 16.5M12 18l1.5-1.5M6 12l1.5-1.5M7.5 13.5 6 12m12 0-1.5-1.5M16.5 13.5 18 12" }) }) })] }), (0, import_jsx_runtime20.jsxs)("div", { className: "mt-2 text-sm text-gray-600 dark:text-gray-300 text-center", children: ["Position:", " ", position.type === "percentage" ? `${position.xPct.toFixed(1)}%, ${position.yPct.toFixed(1)}%` : `${Math.round(position.x)}px, ${Math.round(position.y)}px`] }), (0, import_jsx_runtime20.jsxs)("div", { className: "mt-2 flex gap-4", children: [(0, import_jsx_runtime20.jsxs)("div", { children: [(0, import_jsx_runtime20.jsxs)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: ["X Position ", positionUnit] }), (0, import_jsx_runtime20.jsx)("input", { type: "number", step: positionUnit === "%" ? "0.1" : "1", value: position.xStr ?? (positionUnit === "%" ? position.xPct.toFixed(1) : Math.round(position.x)), onChange: (e) => {
+      }, 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) => {
         const newX = Number(e.target.value);
         setPosition(convertPos({
           type: positionUnit === "%" ? "percentage" : "coordinate",
@@ -1442,7 +1473,7 @@ var init_summary_view4 = __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_runtime20.jsxs)("div", { children: [(0, import_jsx_runtime20.jsxs)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: ["Y Position ", positionUnit] }), (0, import_jsx_runtime20.jsx)("input", { type: "number", step: positionUnit === "%" ? "0.1" : "1", value: position.yStr ?? (positionUnit === "%" ? position.yPct.toFixed(1) : Math.round(position.y)), onChange: (e) => {
+      }, 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) => {
         const newY = Number(e.target.value);
         setPosition(convertPos({
           type: positionUnit === "%" ? "percentage" : "coordinate",
@@ -1453,7 +1484,7 @@ var init_summary_view4 = __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_default4 = SummaryView7;
+    summary_view_default5 = SummaryView9;
   }
 });
 
@@ -15842,13 +15873,13 @@ function InlineView12({ state, config: _2 }) {
       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_runtime22.jsx)("div", { className: "bg-gray-50 dark:bg-gray-700 rounded", style: { width: "360px", height: "200px", padding: "10px" }, children: (0, import_jsx_runtime22.jsx)("canvas", { className: "bg-gray-50 dark:bg-gray-700 rounded", ref: chartContainer }) });
 }
-var import_jsx_runtime21, import_react21, inline_view_default9;
+var import_jsx_runtime22, import_react21, inline_view_default9;
 var init_inline_view9 = __esm({
   "build/util.stats.latency/inline-view.js"() {
     "use strict";
-    import_jsx_runtime21 = __toESM(require_jsx_runtime());
+    import_jsx_runtime22 = __toESM(require_jsx_runtime());
     import_react21 = __toESM(require_react());
     init_auto();
     inline_view_default9 = InlineView12;
@@ -15861,22 +15892,22 @@ __export(source_node_selection_exports, {
   default: () => source_node_selection_default
 });
 function SourceNodeSelection(props) {
-  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) => {
+  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) => {
     if (o.id == props.id)
-      return (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, {});
+      return (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, {});
     if (o.info.category === "output")
       return;
-    return (0, import_jsx_runtime22.jsx)("option", { value: o.id, children: o.config.displayName }, i);
+    return (0, import_jsx_runtime23.jsx)("option", { value: o.id, children: o.config.displayName }, i);
   })] }) });
   function myOnChange(e) {
     props.onChanged(e.target.value);
   }
 }
-var import_jsx_runtime22, source_node_selection_default;
+var import_jsx_runtime23, source_node_selection_default;
 var init_source_node_selection = __esm({
   "build/util.stats.latency/source-node-selection.js"() {
     "use strict";
-    import_jsx_runtime22 = __toESM(require_jsx_runtime());
+    import_jsx_runtime23 = __toESM(require_jsx_runtime());
     source_node_selection_default = SourceNodeSelection;
   }
 });
@@ -15941,6 +15972,13 @@ 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" } },
@@ -15982,6 +16020,13 @@ 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: {
@@ -16082,6 +16127,13 @@ 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" } },
@@ -16165,6 +16217,13 @@ 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: {
@@ -16251,6 +16310,7 @@ 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") } },
@@ -16285,6 +16345,13 @@ 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 } }
@@ -16418,6 +16485,13 @@ 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: {
@@ -16611,6 +16685,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 } }
@@ -16668,6 +16749,7 @@ 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 } },
@@ -16732,6 +16814,7 @@ 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: {
@@ -16808,6 +16891,7 @@ 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 } },
@@ -16820,6 +16904,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)));
 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)));
@@ -16844,25 +16929,33 @@ function info_default13(R) {
     },
     css: ["styles.css"],
     runtime: {
-      initialState: () => ({}),
+      initialState: () => ({ enabled: true }),
       handleEvent(ev, state) {
         const evType = ev.type;
         switch (evType) {
           case "url-published":
             state.url = ev.url;
             break;
+          case "output-enabled":
+            state.enabled = true;
+            break;
+          case "output-disabled":
+            state.enabled = false;
+            break;
           default:
             assertUnreachable8(evType);
         }
         return { ...state };
       },
-      inline: InlineView13
+      inline: InlineView13,
+      summary: SummaryView6
     },
     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 } }
       }
@@ -16876,7 +16969,7 @@ function assertUnreachable8(_) {
 // build/processor.browserOverlay/info.js
 var import_config4 = __toESM(require_config());
 var import_react14 = __toESM(require_react());
-var SummaryView6 = import_react14.default.lazy(async () => Promise.resolve().then(() => (init_summary_view3(), summary_view_exports3)));
+var SummaryView8 = import_react14.default.lazy(async () => Promise.resolve().then(() => (init_summary_view4(), summary_view_exports4)));
 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({
@@ -16904,7 +16997,7 @@ function info_default14({ defineComponent, Video, validation: { Z } }) {
       };
     },
     runtime: {
-      summary: SummaryView6,
+      summary: SummaryView8,
       inline: InlineView10,
       initialState: () => ({
         currentUrl: "",
@@ -16929,7 +17022,8 @@ function info_default14({ defineComponent, Video, validation: { Z } }) {
         hardware: (0, import_config4.HardwareSelection)()
       },
       form: {
-        url: { help: "URL to render on top of the video", hint: { type: "text", validation: Z.string().url(), defaultValue: "" } }
+        url: { help: "URL to render on top of the video", hint: { type: "text", validation: Z.string().url(), defaultValue: "" } },
+        notes: { help: "Notes about this component", hint: { type: "text", optional: true } }
       }
     }
   });
@@ -17066,7 +17160,8 @@ function info_default15({ defineComponent, Av, React: React14, common: { Resolut
             component: SourceSelection,
             defaultValue: []
           }
-        }
+        },
+        notes: { help: "Notes about this component", hint: { type: "text", optional: true } }
       }
     }
   });
@@ -17189,7 +17284,8 @@ function info_default16({ defineComponent, Video }) {
               };
             })
           }
-        }
+        },
+        notes: { help: "Notes about this component", hint: { type: "text", optional: true } }
       }
     }
   });
@@ -17408,7 +17504,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 SummaryView8 = import_react20.default.lazy(async () => Promise.resolve().then(() => (init_summary_view4(), summary_view_exports4)));
+  const SummaryView10 = import_react20.default.lazy(async () => Promise.resolve().then(() => (init_summary_view5(), summary_view_exports5)));
   return defineComponent({
     identifier: "processor.onscreenGraphic",
     category: "processor",
@@ -17434,7 +17530,7 @@ function info_default17({ defineComponent, Video }) {
       };
     },
     runtime: {
-      summary: SummaryView8,
+      summary: SummaryView10,
       initialState: () => ({}),
       handleEvent: (ev, state) => {
         const evType = ev.type;
@@ -17476,7 +17572,8 @@ function info_default17({ defineComponent, Video }) {
               { value: { type: "named", position: "center" }, display: "Centered" }
             ]
           }
-        }
+        },
+        notes: { help: "Notes about this component", hint: { type: "text", optional: true } }
       }
     }
   });
@@ -17624,7 +17721,8 @@ function info_default18({ defineComponent, All, validation: { Z } }) {
             type: "text",
             optional: true
           }
-        }
+        },
+        notes: { help: "Notes about this component", hint: { type: "text", optional: true } }
       }
     }
   });
@@ -17700,7 +17798,8 @@ function info_default19(R) {
               }
             }
           }
-        }
+        },
+        notes: { help: "Additional notes about this component", hint: { type: "text", optional: true } }
       }
     },
     designtime: {