@norskvideo/norsk-studio-built-ins 1.27.0-2025-03-27-419657f2 → 1.27.0-2025-03-27-1a33b215

package/client/info.js

@@ -338,7 +338,7 @@ var require_util = __commonJS({
     exports.getObjectByType = getObjectByType;
     exports.getObjectByPath = getObjectByPath;
     exports.displayNodeId = displayNodeId;
-    exports.assertUnreachable = assertUnreachable17;
+    exports.assertUnreachable = assertUnreachable18;
     exports.waitForCondition = waitForCondition;
     exports.streamMatchesExpected = streamMatchesExpected;
     exports.shortStreamNameFromDefinition = shortStreamNameFromDefinition;
@@ -408,7 +408,7 @@ var require_util = __commonJS({
       }
       return document2.components[id]?.config?.displayName ?? id;
     }
-    function assertUnreachable17(_) {
+    function assertUnreachable18(_) {
       throw new Error("Didn't expect to get here");
     }
     async function waitForCondition(condition, timeout, interval) {
@@ -5226,7 +5226,7 @@ var require_client_types = __commonJS({
       return mod && mod.__esModule ? mod : { "default": mod };
     };
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.RegistrationConsts = exports.singleAvStreamMappingForm = exports.Subtitle = exports.Playlist = exports.Video = exports.Audio = exports.Av = exports.All = void 0;
+    exports.RegistrationConsts = exports.singleAvStreamMappingForm = exports.ChartingConsts = exports.Subtitle = exports.Playlist = exports.Video = exports.Audio = exports.Av = exports.All = void 0;
     exports.subscriptionMedia = subscriptionMedia;
     exports.outputMedia = outputMedia;
     exports.simpleToMedia = simpleToMedia;
@@ -5288,6 +5288,40 @@ var require_client_types = __commonJS({
           (0, util_1.assertUnreachable)(t);
       }
     }
+    exports.ChartingConsts = {
+      colours: [
+        "#FF6384",
+        "#36A2EB",
+        "#FFCE56",
+        "#4BC0C0",
+        "#9966FF",
+        "#FF9F40",
+        "#FF8A80",
+        "#82B1FF",
+        "#B9F6CA",
+        "#FFFF8D",
+        "#84FFFF",
+        "#B388FF",
+        "#EA80FC",
+        "#FFD180",
+        "#A7FFEB",
+        "#CCFF90"
+      ],
+      dark: {
+        line: "#00c3ff",
+        background: "rgba(0, 195, 255, 0.1)",
+        grid: "rgba(68, 68, 68, 0.5)",
+        text: "#888",
+        tooltip: "rgba(0, 0, 0, 0.8)"
+      },
+      light: {
+        line: "#007bff",
+        background: "rgba(0, 123, 255, 0.1)",
+        grid: "rgba(0, 0, 0, 0.1)",
+        text: "#333",
+        tooltip: "rgba(255, 255, 255, 0.9)"
+      }
+    };
     function discriminatedForm3(setup) {
       const options = Object.keys(setup).map((k) => ({
         key: k,
@@ -20364,41 +20398,9 @@ function displayStreamKey(streamKey2) {
   return `${streamKey2.sourceName}-${streamKey2.programNumber}-${streamKey2.streamId}-${streamKey2.renditionName}`;
 }
 Chart.register(...registerables);
-function MetricsView2({ metrics, config }) {
-  const isDarkMode = true;
-  const colors2 = [
-    "#FF6384",
-    "#36A2EB",
-    "#FFCE56",
-    "#4BC0C0",
-    "#9966FF",
-    "#FF9F40",
-    "#FF8A80",
-    "#82B1FF",
-    "#B9F6CA",
-    "#FFFF8D",
-    "#84FFFF",
-    "#B388FF",
-    "#EA80FC",
-    "#FFD180",
-    "#A7FFEB",
-    "#CCFF90"
-  ];
-  const darkModeColors = {
-    lineColor: "#00c3ff",
-    backgroundColor: "rgba(0, 195, 255, 0.1)",
-    gridColor: "rgba(68, 68, 68, 0.5)",
-    textColor: "#888",
-    tooltipBg: "rgba(0, 0, 0, 0.8)"
-  };
-  const lightModeColors = {
-    lineColor: "#007bff",
-    backgroundColor: "rgba(0, 123, 255, 0.1)",
-    gridColor: "rgba(0, 0, 0, 0.1)",
-    textColor: "#333",
-    tooltipBg: "rgba(255, 255, 255, 0.9)"
-  };
-  const themeColors = isDarkMode ? darkModeColors : lightModeColors;
+function MetricsView2({ metrics, config, global, charting }) {
+  const { isDarkMode } = global;
+  const themeColors = isDarkMode ? charting.dark : charting.light;
   const cpuChartOptions = {
     responsive: false,
     maintainAspectRatio: false,
@@ -20439,7 +20441,7 @@ function MetricsView2({ metrics, config }) {
         //   font: { size: 11 },
         // },
         grid: {
-          color: themeColors.gridColor,
+          color: themeColors.grid,
           drawTicks: false
         },
         border: { display: false },
@@ -20466,10 +20468,10 @@ function MetricsView2({ metrics, config }) {
             return `${seconds} second${seconds !== 1 ? "s" : ""} ago`;
           }
         },
-        backgroundColor: themeColors.tooltipBg,
-        titleColor: themeColors.lineColor,
-        bodyColor: themeColors.textColor,
-        borderColor: themeColors.lineColor,
+        backgroundColor: themeColors.tooltip,
+        titleColor: themeColors.line,
+        bodyColor: themeColors.text,
+        borderColor: themeColors.line,
         borderWidth: 1,
         padding: 10
       }
@@ -20504,7 +20506,7 @@ function MetricsView2({ metrics, config }) {
   const bitrates = {
     labels: Array(50).fill(null).map((_, index2) => index2),
     datasets: allBitrates.map((b, i) => {
-      return createInitialDataset(`${displayStreamKey(b.streamKey)}`, colors2[i], b.history[0]?.value ?? 0);
+      return createInitialDataset(`${displayStreamKey(b.streamKey)}`, charting.colours[i], b.history[0]?.value ?? 0);
     })
   };
   allBitrates.forEach((b, bi) => {
@@ -21363,14 +21365,25 @@ function SummaryView4({ state, sendCommand }) {
 var summary_view_default4 = SummaryView4;
 
 // build/output.rtmp/inline-view.js
+var import_jsx_runtime16 = __toESM(require_jsx_runtime());
+
+// build/shared/jitter-buffer-inline.js
 var import_jsx_runtime15 = __toESM(require_jsx_runtime());
+function initialJitterBufferState() {
+  return { target: 0, value: 0, percentage: 0 };
+}
+function JitterBufferInline(jb) {
+  return (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: (0, import_jsx_runtime15.jsxs)("div", { children: ["Buffer: ", (0, import_jsx_runtime15.jsx)("meter", { value: jb.percentage, max: 100, high: 50, low: 25 })] }) });
+}
+
+// build/output.rtmp/inline-view.js
 function InlineView5({ state, config }) {
   if (!state.enabled) {
-    return (0, import_jsx_runtime15.jsx)("div", { className: "disabled text-gray-500 dark:text-gray-400", children: "Output disabled" });
+    return (0, import_jsx_runtime16.jsx)("div", { className: "disabled text-gray-500 dark:text-gray-400", children: "Output disabled" });
   }
-  const connected = (0, import_jsx_runtime15.jsx)("div", { className: "active text-green-500 dark:text-green-300", children: "Connected and publishing" });
-  const disconnected = (0, import_jsx_runtime15.jsxs)("div", { className: "inactive text-orange-500 dark:text-orange-300", children: ["Disconnected ", state.connectRetries > 0 ? `- retrying(${state.connectRetries})` : ""] });
-  return (0, import_jsx_runtime15.jsx)("div", { className: "rtmp-output", id: `rtmp-output-${config.id}`, children: state.connected ? connected : disconnected });
+  const connected = (0, import_jsx_runtime16.jsxs)("div", { children: [(0, import_jsx_runtime16.jsx)("div", { className: "active text-green-500 dark:text-green-300", children: "Connected and publishing" }), (0, import_jsx_runtime16.jsx)(JitterBufferInline, { ...state.jitterBuffer })] });
+  const disconnected = (0, import_jsx_runtime16.jsxs)("div", { className: "inactive text-orange-500 dark:text-orange-300", children: ["Disconnected ", state.connectRetries > 0 ? `- retrying(${state.connectRetries})` : ""] });
+  return (0, import_jsx_runtime16.jsx)("div", { className: "rtmp-output", id: `rtmp-output-${config.id}`, children: state.connected ? connected : disconnected });
 }
 var inline_view_default5 = InlineView5;
 
@@ -21414,7 +21427,12 @@ function defineRtmpOutputComponent({ defineComponent }, settings) {
       };
     },
     runtime: {
-      initialState: () => ({ connected: false, connectRetries: 0, enabled: true }),
+      initialState: () => ({
+        connected: false,
+        connectRetries: 0,
+        enabled: true,
+        jitterBuffer: initialJitterBufferState()
+      }),
       handleEvent: (ev, state) => {
         const evType = ev.type;
         switch (evType) {
@@ -21431,6 +21449,9 @@ function defineRtmpOutputComponent({ defineComponent }, settings) {
           case "output-disabled":
             state.enabled = false;
             break;
+          case "jitter-buffer-updated":
+            state.jitterBuffer = ev.buffer;
+            break;
           default:
             assertUnreachable5(evType);
         }
@@ -21509,7 +21530,7 @@ function info_default11(r) {
 var import_config2 = __toESM(require_config());
 
 // build/output.preview/inline-view.js
-var import_jsx_runtime16 = __toESM(require_jsx_runtime());
+var import_jsx_runtime17 = __toESM(require_jsx_runtime());
 var import_react3 = __toESM(require_react());
 var import_webrtc_client = __toESM(require_webrtc_client());
 function InlineView6({ state, config, raise }) {
@@ -21577,7 +21598,7 @@ function InlineView6({ state, config, raise }) {
   }, [config.showPreview]);
   raise && (0, import_react3.useEffect)(raise, []);
   if (!url)
-    return (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: "..." });
+    return (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: "..." });
   function percentage(levels) {
     if (!levels) {
       return 0;
@@ -21587,9 +21608,9 @@ function InlineView6({ state, config, raise }) {
     const snapped = Math.floor(capped * 10) * 10;
     return Math.max(0, 100 - snapped);
   }
-  return (0, import_jsx_runtime16.jsxs)("div", { className: "preview-outer-container", children: [(0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, import_jsx_runtime16.jsx)("input", { type: "checkbox", id: `video-toggle-${id}`, checked: showPreview, onChange: (e) => setShowPreview(e.target.checked), className: "h-4 w-4" }), (0, import_jsx_runtime16.jsx)("label", { htmlFor: `video-toggle-${id}`, className: "text-sm", children: "Show Preview" })] }), showPreview ? (0, import_jsx_runtime16.jsx)("div", { className: "preview-video", id: `preview-${id}`, children: (0, import_jsx_runtime16.jsx)("style", { children: `
+  return (0, import_jsx_runtime17.jsxs)("div", { className: "preview-outer-container", children: [(0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, import_jsx_runtime17.jsx)("input", { type: "checkbox", id: `video-toggle-${id}`, checked: showPreview, onChange: (e) => setShowPreview(e.target.checked), className: "h-4 w-4" }), (0, import_jsx_runtime17.jsx)("label", { htmlFor: `video-toggle-${id}`, className: "text-sm", children: "Show Preview" })] }), showPreview ? (0, import_jsx_runtime17.jsx)("div", { className: "preview-video", id: `preview-${id}`, children: (0, import_jsx_runtime17.jsx)("style", { children: `
             #preview-${id} video::-webkit-media-controls-play-button { display: none; },
-          ` }) }) : (0, import_jsx_runtime16.jsx)("div", { className: "preview-video bg-black flex items-center justify-center text-white h-full", children: "Preview turned off" }), (0, import_jsx_runtime16.jsx)("div", { className: "preview-levels", children: (0, import_jsx_runtime16.jsx)("div", { className: `preview-level clip-${percentage(state.levels)}-preview` }) })] });
+          ` }) }) : (0, import_jsx_runtime17.jsx)("div", { className: "preview-video bg-black flex items-center justify-center text-white h-full", children: "Preview turned off" }), (0, import_jsx_runtime17.jsx)("div", { className: "preview-levels", children: (0, import_jsx_runtime17.jsx)("div", { className: `preview-level clip-${percentage(state.levels)}-preview` }) })] });
 }
 var inline_view_default6 = InlineView6;
 
@@ -21676,7 +21697,7 @@ function assertUnreachable6(_) {
 var import_util2 = __toESM(require_util());
 
 // build/output.srt-caller/summary-view.js
-var import_jsx_runtime17 = __toESM(require_jsx_runtime());
+var import_jsx_runtime18 = __toESM(require_jsx_runtime());
 function SummaryView5({ state, sendCommand }) {
   const handleEnableOutput = () => {
     void enableOutput();
@@ -21694,14 +21715,14 @@ function SummaryView5({ state, sendCommand }) {
       type: "disable-output"
     });
   };
-  return (0, import_jsx_runtime17.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, import_jsx_runtime17.jsx)("span", { className: `inline-block w-2 h-2 rounded-full ${state.enabled ? "bg-green-500" : "bg-red-500"}` }), (0, import_jsx_runtime17.jsxs)("span", { className: "text-sm", children: ["Status: ", state.enabled ? "Enabled" : "Disabled"] })] }), (0, import_jsx_runtime17.jsx)("div", { children: state.enabled ? (0, import_jsx_runtime17.jsx)("button", { onClick: handleDisableOutput, className: "px-3 py-1 text-sm bg-red-600 hover:bg-red-700 text-white rounded", children: "Disable Output" }) : (0, import_jsx_runtime17.jsx)("button", { onClick: handleEnableOutput, className: "px-3 py-1 text-sm bg-blue-600 hover:bg-green-700 text-white rounded", children: "Enable Output" }) })] }) });
+  return (0, import_jsx_runtime18.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, import_jsx_runtime18.jsx)("span", { className: `inline-block w-2 h-2 rounded-full ${state.enabled ? "bg-green-500" : "bg-red-500"}` }), (0, import_jsx_runtime18.jsxs)("span", { className: "text-sm", children: ["Status: ", state.enabled ? "Enabled" : "Disabled"] })] }), (0, import_jsx_runtime18.jsx)("div", { children: state.enabled ? (0, import_jsx_runtime18.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_runtime18.jsx)("button", { onClick: handleEnableOutput, className: "px-3 py-1 text-sm bg-blue-600 hover:bg-green-700 text-white rounded", children: "Enable Output" }) })] }) });
 }
 var summary_view_default5 = SummaryView5;
 
 // build/output.srt-caller/inline-view.js
-var import_jsx_runtime18 = __toESM(require_jsx_runtime());
+var import_jsx_runtime19 = __toESM(require_jsx_runtime());
 function InlineView7({ state }) {
-  return (0, import_jsx_runtime18.jsx)("div", { className: "srt-output", children: state.enabled ? (0, import_jsx_runtime18.jsx)("div", { children: state.metrics.connectionCount == 0 ? (0, import_jsx_runtime18.jsx)("div", { className: "active text-red-300 dark:text-red-300", children: "Not Connected" }) : (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [(0, import_jsx_runtime18.jsx)("div", { className: "active text-green-500 dark:text-green-300", children: "Connected" }), (0, import_jsx_runtime18.jsxs)("div", { children: ["Sent: ", state.metrics.packetsSent] }), (0, import_jsx_runtime18.jsxs)("div", { children: ["Lost/Resent: ", state.metrics.packetsLost, "/", state.metrics.packetsResent] })] }) }) : (0, import_jsx_runtime18.jsx)("div", { className: "disabled text-gray-500 dark:text-gray-400", children: "Output disabled" }) });
+  return (0, import_jsx_runtime19.jsx)("div", { className: "srt-output", children: state.enabled ? (0, import_jsx_runtime19.jsx)("div", { children: state.metrics.connectionCount == 0 ? (0, import_jsx_runtime19.jsx)("div", { className: "active text-red-300 dark:text-red-300", children: "Not Connected" }) : (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [(0, import_jsx_runtime19.jsx)("div", { className: "active text-green-500 dark:text-green-300", children: "Connected" }), (0, import_jsx_runtime19.jsxs)("div", { children: ["Sent: ", state.metrics.packetsSent] }), (0, import_jsx_runtime19.jsxs)("div", { children: ["Lost/Resent: ", state.metrics.packetsLost, "/", state.metrics.packetsResent] }), (0, import_jsx_runtime19.jsx)(JitterBufferInline, { ...state.jitterBuffer })] }) }) : (0, import_jsx_runtime19.jsx)("div", { className: "disabled text-gray-500 dark:text-gray-400", children: "Output disabled" }) });
 }
 var inline_view_default7 = InlineView7;
 
@@ -21739,7 +21760,8 @@ function info_default13(registration) {
           packetsResent: 0,
           packetsSent: 0,
           packetsReceived: 0
-        }
+        },
+        jitterBuffer: initialJitterBufferState()
       }),
       handleEvent(ev, state) {
         const evType = ev.type;
@@ -21753,6 +21775,9 @@ function info_default13(registration) {
           case "metrics-updated":
             state.metrics = ev.metrics;
             break;
+          case "jitter-buffer-updated":
+            state.jitterBuffer = ev.buffer;
+            break;
           default:
             (0, import_util2.assertUnreachable)(evType);
         }
@@ -21803,7 +21828,7 @@ function info_default13(registration) {
 var import_util3 = __toESM(require_util());
 
 // build/output.srt-listener/summary-view.js
-var import_jsx_runtime19 = __toESM(require_jsx_runtime());
+var import_jsx_runtime20 = __toESM(require_jsx_runtime());
 function SummaryView6({ state, sendCommand }) {
   const handleEnableOutput = () => {
     void enableOutput();
@@ -21821,14 +21846,14 @@ function SummaryView6({ state, sendCommand }) {
       type: "disable-output"
     });
   };
-  return (0, import_jsx_runtime19.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, import_jsx_runtime19.jsx)("span", { className: `inline-block w-2 h-2 rounded-full ${state.enabled ? "bg-green-500" : "bg-red-500"}` }), (0, import_jsx_runtime19.jsxs)("span", { className: "text-sm", children: ["Status: ", state.enabled ? "Enabled" : "Disabled"] })] }), (0, import_jsx_runtime19.jsx)("div", { children: state.enabled ? (0, import_jsx_runtime19.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_runtime19.jsx)("button", { onClick: handleEnableOutput, className: "px-3 py-1 text-sm bg-blue-600 hover:bg-green-700 text-white rounded", children: "Enable Output" }) })] }) });
+  return (0, import_jsx_runtime20.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, import_jsx_runtime20.jsx)("span", { className: `inline-block w-2 h-2 rounded-full ${state.enabled ? "bg-green-500" : "bg-red-500"}` }), (0, import_jsx_runtime20.jsxs)("span", { className: "text-sm", children: ["Status: ", state.enabled ? "Enabled" : "Disabled"] })] }), (0, import_jsx_runtime20.jsx)("div", { children: state.enabled ? (0, import_jsx_runtime20.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_runtime20.jsx)("button", { onClick: handleEnableOutput, className: "px-3 py-1 text-sm bg-blue-600 hover:bg-green-700 text-white rounded", children: "Enable Output" }) })] }) });
 }
 var summary_view_default6 = SummaryView6;
 
 // build/output.srt-listener/inline-view.js
-var import_jsx_runtime20 = __toESM(require_jsx_runtime());
+var import_jsx_runtime21 = __toESM(require_jsx_runtime());
 function InlineView8({ state }) {
-  return (0, import_jsx_runtime20.jsx)("div", { className: "srt-output", children: state.enabled ? state.metrics.connectionCount == 0 ? (0, import_jsx_runtime20.jsx)("div", { className: "active text-red-300 dark:text-red-300", children: "No connections" }) : (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [(0, import_jsx_runtime20.jsx)("div", { className: "active text-green-500 dark:text-green-300", children: "Output enabled" }), (0, import_jsx_runtime20.jsxs)("div", { children: ["Connections: ", state.metrics.connectionCount] }), (0, import_jsx_runtime20.jsxs)("div", { children: ["Sent: ", state.metrics.packetsSent.reduce((a, i) => a + i, 0)] }), (0, import_jsx_runtime20.jsxs)("div", { children: ["Lost/Resent: ", state.metrics.packetsLost.reduce((a, i) => a + i, 0), "/", state.metrics.packetsResent.reduce((a, i) => a + i, 0)] })] }) : (0, import_jsx_runtime20.jsx)("div", { className: "disabled text-gray-500 dark:text-gray-400", children: "Output disabled" }) });
+  return (0, import_jsx_runtime21.jsx)("div", { className: "srt-output", children: state.enabled ? state.metrics.connectionCount == 0 ? (0, import_jsx_runtime21.jsx)("div", { className: "active text-red-300 dark:text-red-300", children: "No connections" }) : (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [(0, import_jsx_runtime21.jsx)("div", { className: "active text-green-500 dark:text-green-300", children: "Output enabled" }), (0, import_jsx_runtime21.jsxs)("div", { children: ["Connections: ", state.metrics.connectionCount] }), (0, import_jsx_runtime21.jsxs)("div", { children: ["Sent: ", state.metrics.packetsSent.reduce((a, i) => a + i, 0)] }), (0, import_jsx_runtime21.jsxs)("div", { children: ["Lost/Resent: ", state.metrics.packetsLost.reduce((a, i) => a + i, 0), "/", state.metrics.packetsResent.reduce((a, i) => a + i, 0)] }), (0, import_jsx_runtime21.jsx)(JitterBufferInline, { ...state.jitterBuffer })] }) : (0, import_jsx_runtime21.jsx)("div", { className: "disabled text-gray-500 dark:text-gray-400", children: "Output disabled" }) });
 }
 var inline_view_default8 = InlineView8;
 
@@ -21864,7 +21889,8 @@ function info_default14(registration) {
           packetsResent: [],
           packetsSent: [],
           packetsReceived: []
-        }
+        },
+        jitterBuffer: initialJitterBufferState()
       }),
       handleEvent(ev, state) {
         const evType = ev.type;
@@ -21878,6 +21904,9 @@ function info_default14(registration) {
           case "metrics-updated":
             state.metrics = ev.metrics;
             break;
+          case "jitter-buffer-updated":
+            state.jitterBuffer = ev.buffer;
+            break;
           default:
             (0, import_util3.assertUnreachable)(evType);
         }
@@ -21926,26 +21955,26 @@ function info_default14(registration) {
 }
 
 // build/output.statistics/inline-view.js
-var import_jsx_runtime21 = __toESM(require_jsx_runtime());
+var import_jsx_runtime22 = __toESM(require_jsx_runtime());
 function InlineView9({ state }) {
   if (!state.previous)
-    return (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, {});
+    return (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, {});
   const format = (stat) => Math.floor(stat).toLocaleString("en-US", { maximumFractionDigits: 0 });
-  return (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: state.previous.allStreams.map((s, i) => {
+  return (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: state.previous.allStreams.map((s, i) => {
     const metaCase = s.metadata.case;
     switch (metaCase) {
       case "audio":
-        return (0, import_jsx_runtime21.jsxs)("div", { children: [(0, import_jsx_runtime21.jsxs)("div", { children: ["StreamKey: ", streamKey(s.streamKey)] }), (0, import_jsx_runtime21.jsxs)("div", { children: ["Bitrate: ", format(s.bitrate), "bps"] })] }, i);
+        return (0, import_jsx_runtime22.jsxs)("div", { children: [(0, import_jsx_runtime22.jsxs)("div", { children: ["StreamKey: ", streamKey(s.streamKey)] }), (0, import_jsx_runtime22.jsxs)("div", { children: ["Bitrate: ", format(s.bitrate), "bps"] })] }, i);
       case "video":
-        return (0, import_jsx_runtime21.jsxs)("div", { children: [(0, import_jsx_runtime21.jsxs)("div", { children: ["StreamKey: ", streamKey(s.streamKey)] }), (0, import_jsx_runtime21.jsxs)("div", { children: ["Bitrate: ", format(s.bitrate), "bps"] })] }, i);
+        return (0, import_jsx_runtime22.jsxs)("div", { children: [(0, import_jsx_runtime22.jsxs)("div", { children: ["StreamKey: ", streamKey(s.streamKey)] }), (0, import_jsx_runtime22.jsxs)("div", { children: ["Bitrate: ", format(s.bitrate), "bps"] })] }, i);
       case "ancillary":
-        return (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, {});
+        return (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, {});
       case "subtitle":
-        return (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, {});
+        return (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, {});
       case "playlist":
-        return (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, {});
+        return (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, {});
       case void 0:
-        return (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, {});
+        return (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, {});
       default:
         assertUnreachable9(metaCase);
     }
@@ -22031,7 +22060,17 @@ function info_default16(r) {
 }
 
 // build/output.udpTs/info.js
+var import_util4 = __toESM(require_util());
 var import_FaNetworkWired2 = __toESM(require_FaNetworkWired());
+
+// build/output.udpTs/inline-view.js
+var import_jsx_runtime23 = __toESM(require_jsx_runtime());
+function InlineView10({ state }) {
+  return (0, import_jsx_runtime23.jsx)("div", { className: "srt-output", children: (0, import_jsx_runtime23.jsx)("div", { children: (0, import_jsx_runtime23.jsx)(JitterBufferInline, { ...state.jitterBuffer }) }) });
+}
+var inline_view_default10 = InlineView10;
+
+// build/output.udpTs/info.js
 function info_default17({ defineComponent, All, validation: { Port, Hostname, JitterBuffer, Iface, Z } }) {
   return defineComponent({
     identifier: "output.udpTs",
@@ -22046,6 +22085,24 @@ function info_default17({ defineComponent, All, validation: { Port, Hostname, Ji
         streams: () => All.map((media) => ({ media }))
       }
     },
+    runtime: {
+      initialState: () => ({
+        jitterBuffer: initialJitterBufferState()
+      }),
+      handleEvent(ev, state) {
+        const evType = ev.type;
+        switch (evType) {
+          case "jitter-buffer-updated":
+            state.jitterBuffer = ev.buffer;
+            break;
+          default:
+            (0, import_util4.assertUnreachable)(evType);
+        }
+        return { ...state };
+      },
+      inline: inline_view_default10,
+      metrics: []
+    },
     display: (desc) => {
       return {
         port: desc.config.port.toString(),
@@ -22073,10 +22130,10 @@ function info_default17({ defineComponent, All, validation: { Port, Hostname, Ji
 var import_config3 = __toESM(require_config());
 
 // build/output.whep/inline-view.js
-var import_jsx_runtime22 = __toESM(require_jsx_runtime());
+var import_jsx_runtime24 = __toESM(require_jsx_runtime());
 var import_react4 = __toESM(require_react());
 var import_webrtc_client2 = __toESM(require_webrtc_client());
-function InlineView10({ state, config, raise }) {
+function InlineView11({ state, config, raise }) {
   const url = state.url;
   const id = config.id;
   const [showPreview, setShowPreview] = (0, import_react4.useState)(config.showPreview ?? true);
@@ -22118,18 +22175,18 @@ function InlineView10({ state, config, raise }) {
   }, [config.showPreview]);
   raise && (0, import_react4.useEffect)(raise, []);
   if (!url)
-    return (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: "..." });
+    return (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: "..." });
   const videoStyles = `
     #whep-${id} video::-webkit-media-controls-play-button { 
       display: none; 
     }
   `;
-  return (0, import_jsx_runtime22.jsxs)("div", { className: "whep-container", children: [(0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, import_jsx_runtime22.jsx)("input", { type: "checkbox", id: `video-toggle-${id}`, checked: showPreview, onChange: (e) => setShowPreview(e.target.checked), className: "h-4 w-4" }), (0, import_jsx_runtime22.jsx)("label", { htmlFor: `video-toggle-${id}`, className: "text-sm", children: "Show Preview" })] }), showPreview ? (0, import_jsx_runtime22.jsx)("div", { className: "whep-video", id: `whep-${id}`, children: (0, import_jsx_runtime22.jsx)("style", { children: videoStyles }) }) : (0, import_jsx_runtime22.jsx)("div", { className: "whep-video bg-black flex items-center justify-center text-white h-full", children: "Preview turned off" })] });
+  return (0, import_jsx_runtime24.jsxs)("div", { className: "whep-container", children: [(0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, import_jsx_runtime24.jsx)("input", { type: "checkbox", id: `video-toggle-${id}`, checked: showPreview, onChange: (e) => setShowPreview(e.target.checked), className: "h-4 w-4" }), (0, import_jsx_runtime24.jsx)("label", { htmlFor: `video-toggle-${id}`, className: "text-sm", children: "Show Preview" })] }), showPreview ? (0, import_jsx_runtime24.jsx)("div", { className: "whep-video", id: `whep-${id}`, children: (0, import_jsx_runtime24.jsx)("style", { children: videoStyles }) }) : (0, import_jsx_runtime24.jsx)("div", { className: "whep-video bg-black flex items-center justify-center text-white h-full", children: "Preview turned off" })] });
 }
-var inline_view_default10 = InlineView10;
+var inline_view_default11 = InlineView11;
 
 // build/output.whep/summary-view.js
-var import_jsx_runtime23 = __toESM(require_jsx_runtime());
+var import_jsx_runtime25 = __toESM(require_jsx_runtime());
 function SummaryView7({ state, sendCommand }) {
   const handleEnableOutput = () => {
     void enableOutput();
@@ -22147,7 +22204,7 @@ function SummaryView7({ state, sendCommand }) {
       type: "disable-output"
     });
   };
-  return (0, import_jsx_runtime23.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, import_jsx_runtime23.jsx)("span", { className: `inline-block w-2 h-2 rounded-full ${state.enabled ? "bg-blue-500" : "bg-red-500"}` }), (0, import_jsx_runtime23.jsxs)("span", { className: "text-sm", children: ["Status: ", state.enabled ? "Enabled" : "Disabled"] })] }), (0, import_jsx_runtime23.jsx)("div", { children: state.enabled ? (0, import_jsx_runtime23.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_runtime23.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_runtime25.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, import_jsx_runtime25.jsx)("span", { className: `inline-block w-2 h-2 rounded-full ${state.enabled ? "bg-blue-500" : "bg-red-500"}` }), (0, import_jsx_runtime25.jsxs)("span", { className: "text-sm", children: ["Status: ", state.enabled ? "Enabled" : "Disabled"] })] }), (0, import_jsx_runtime25.jsx)("div", { children: state.enabled ? (0, import_jsx_runtime25.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_runtime25.jsx)("button", { onClick: handleEnableOutput, className: "px-3 py-1 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded", children: "Enable Output" }) })] }) });
 }
 var summary_view_default7 = SummaryView7;
 
@@ -22187,11 +22244,11 @@ function info_default18(R) {
             state.enabled = false;
             break;
           default:
-            assertUnreachable10(evType);
+            assertUnreachable11(evType);
         }
         return { ...state };
       },
-      inline: inline_view_default10,
+      inline: inline_view_default11,
       summary: summary_view_default7
     },
     configForm: {
@@ -22209,7 +22266,7 @@ function info_default18(R) {
     }
   });
 }
-function assertUnreachable10(_) {
+function assertUnreachable11(_) {
   throw new Error("Didn't expect to get here");
 }
 
@@ -22247,9 +22304,9 @@ function info_default19(r) {
 var import_client_types2 = __toESM(require_client_types());
 
 // build/processor.audioEncoder/form-views.js
-var import_jsx_runtime24 = __toESM(require_jsx_runtime());
+var import_jsx_runtime26 = __toESM(require_jsx_runtime());
 function CodecConfiguration(cfg) {
-  return (0, import_jsx_runtime24.jsxs)("div", { className: "grid grid-flow-row-dense grid-cols-3 text-sm", children: [(0, import_jsx_runtime24.jsx)("div", { className: "col-span-1", children: "Codec" }), (0, import_jsx_runtime24.jsx)("div", { className: "col-span-2", children: cfg.kind }), cfg.kind === "aac" ? (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [(0, import_jsx_runtime24.jsx)("div", { className: "col-span-1", children: "Profile" }), (0, import_jsx_runtime24.jsx)("div", { className: "col-span-2", children: cfg.profile }), (0, import_jsx_runtime24.jsx)("div", { className: "col-span-1", children: "Sample Rate" }), (0, import_jsx_runtime24.jsx)("div", { className: "col-span-2", children: cfg.sampleRate })] }) : null] });
+  return (0, import_jsx_runtime26.jsxs)("div", { className: "grid grid-flow-row-dense grid-cols-3 text-sm", children: [(0, import_jsx_runtime26.jsx)("div", { className: "col-span-1", children: "Codec" }), (0, import_jsx_runtime26.jsx)("div", { className: "col-span-2", children: cfg.kind }), cfg.kind === "aac" ? (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [(0, import_jsx_runtime26.jsx)("div", { className: "col-span-1", children: "Profile" }), (0, import_jsx_runtime26.jsx)("div", { className: "col-span-2", children: cfg.profile }), (0, import_jsx_runtime26.jsx)("div", { className: "col-span-1", children: "Sample Rate" }), (0, import_jsx_runtime26.jsx)("div", { className: "col-span-2", children: cfg.sampleRate })] }) : null] });
 }
 
 // build/processor.audioEncoder/info.js
@@ -22389,7 +22446,7 @@ var import_config4 = __toESM(require_config());
 var import_FaWindowRestore = __toESM(require_FaWindowRestore());
 
 // build/processor.browserOverlay/summary-view.js
-var import_jsx_runtime25 = __toESM(require_jsx_runtime());
+var import_jsx_runtime27 = __toESM(require_jsx_runtime());
 var import_react5 = __toESM(require_react());
 function SummaryView8({ state, sendCommand }) {
   const [url, setUrl] = (0, import_react5.useState)(state.currentUrl);
@@ -22398,7 +22455,7 @@ function SummaryView8({ state, sendCommand }) {
     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_runtime25.jsxs)("div", { className: "space-y-3 mb-5", children: [(0, import_jsx_runtime25.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime25.jsxs)("div", { className: "mb-5", children: [(0, import_jsx_runtime25.jsx)("label", { htmlFor: "url", className: "mb-2 mr-2 text-sm font-medium text-gray-900 dark:text-white", children: "URL" }), (0, import_jsx_runtime25.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_runtime25.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime25.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [(0, import_jsx_runtime25.jsx)("span", { className: "me-3 text-sm font-medium text-gray-900 dark:text-gray-300", children: "Enabled" }), (0, import_jsx_runtime25.jsx)("input", { type: "checkbox", checked: enabled, onChange: (e) => setEnabled(e.target.checked), className: "sr-only peer" }), (0, import_jsx_runtime25.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_runtime25.jsx)("button", { type: "button", className: `${buttonClass} ${!stateChanged ? "opacity-50 cursor-not-allowed" : ""}`, disabled: !stateChanged, onClick: () => {
+  return (0, import_jsx_runtime27.jsxs)("div", { className: "space-y-3 mb-5", children: [(0, import_jsx_runtime27.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime27.jsxs)("div", { className: "mb-5", children: [(0, import_jsx_runtime27.jsx)("label", { htmlFor: "url", className: "mb-2 mr-2 text-sm font-medium text-gray-900 dark:text-white", children: "URL" }), (0, import_jsx_runtime27.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_runtime27.jsx)("div", { className: "mb-5", children: (0, import_jsx_runtime27.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [(0, import_jsx_runtime27.jsx)("span", { className: "me-3 text-sm font-medium text-gray-900 dark:text-gray-300", children: "Enabled" }), (0, import_jsx_runtime27.jsx)("input", { type: "checkbox", checked: enabled, onChange: (e) => setEnabled(e.target.checked), className: "sr-only peer" }), (0, import_jsx_runtime27.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_runtime27.jsx)("button", { type: "button", className: `${buttonClass} ${!stateChanged ? "opacity-50 cursor-not-allowed" : ""}`, disabled: !stateChanged, onClick: () => {
     if (url !== state.currentUrl) {
       sendCommand({ type: "change-url", url });
     }
@@ -22414,11 +22471,11 @@ function SummaryView8({ state, sendCommand }) {
 var summary_view_default8 = SummaryView8;
 
 // build/processor.browserOverlay/inline-view.js
-var import_jsx_runtime26 = __toESM(require_jsx_runtime());
-function InlineView11({ state, config }) {
-  return (0, import_jsx_runtime26.jsx)("div", { id: `browser-overlay-${config.id}`, children: (0, import_jsx_runtime26.jsxs)("div", { className: "w-64 grid grid-cols-[min-content,1fr] gap-2", children: [(0, import_jsx_runtime26.jsx)("div", { children: "URL:" }), (0, import_jsx_runtime26.jsx)("div", { className: "truncate", children: state.currentUrl }), (0, import_jsx_runtime26.jsx)("div", { children: "Enabled:" }), (0, import_jsx_runtime26.jsx)("div", { children: (0, import_jsx_runtime26.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [(0, import_jsx_runtime26.jsx)("input", { type: "checkbox", checked: state.enabled, disabled: true, className: "sr-only peer" }), (0, import_jsx_runtime26.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_runtime28 = __toESM(require_jsx_runtime());
+function InlineView12({ state, config }) {
+  return (0, import_jsx_runtime28.jsx)("div", { id: `browser-overlay-${config.id}`, children: (0, import_jsx_runtime28.jsxs)("div", { className: "w-64 grid grid-cols-[min-content,1fr] gap-2", children: [(0, import_jsx_runtime28.jsx)("div", { children: "URL:" }), (0, import_jsx_runtime28.jsx)("div", { className: "truncate", children: state.currentUrl }), (0, import_jsx_runtime28.jsx)("div", { children: "Enabled:" }), (0, import_jsx_runtime28.jsx)("div", { children: (0, import_jsx_runtime28.jsxs)("label", { className: "inline-flex items-center cursor-pointer", children: [(0, import_jsx_runtime28.jsx)("input", { type: "checkbox", checked: state.enabled, disabled: true, className: "sr-only peer" }), (0, import_jsx_runtime28.jsx)("div", { className: "relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600" })] }) })] }) });
 }
-var inline_view_default11 = InlineView11;
+var inline_view_default12 = InlineView12;
 
 // build/processor.browserOverlay/info.js
 function info_default21({ defineComponent, validation: { Z } }) {
@@ -22449,7 +22506,7 @@ function info_default21({ defineComponent, validation: { Z } }) {
     },
     runtime: {
       summary: summary_view_default8,
-      inline: inline_view_default11,
+      inline: inline_view_default12,
       initialState: () => ({
         currentUrl: "",
         enabled: true
@@ -22464,7 +22521,7 @@ function info_default21({ defineComponent, validation: { Z } }) {
           case "disabled":
             return { ...state, enabled: false };
           default:
-            assertUnreachable11(evType);
+            assertUnreachable12(evType);
         }
       }
     },
@@ -22479,12 +22536,12 @@ function info_default21({ defineComponent, validation: { Z } }) {
     }
   });
 }
-function assertUnreachable11(_) {
+function assertUnreachable12(_) {
   throw new Error("Didn't expect to get here");
 }
 
 // build/processor.cascadingSwitch/source-selection.js
-var import_jsx_runtime27 = __toESM(require_jsx_runtime());
+var import_jsx_runtime29 = __toESM(require_jsx_runtime());
 var import_react6 = __toESM(require_react());
 function OrderInput(props) {
   (0, import_react6.useEffect)(() => {
@@ -22492,10 +22549,10 @@ function OrderInput(props) {
   }, [props.defaultValue]);
   const [value, setValue] = (0, import_react6.useState)(props.defaultValue ?? []);
   if (value.length == 0) {
-    return (0, import_jsx_runtime27.jsx)("p", { className: "node-editor-helper-text", children: "Sources will appear here when subscriptions have been added to this node" });
+    return (0, import_jsx_runtime29.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_runtime27.jsx)("div", { id: props.id, children: (0, import_jsx_runtime27.jsx)("ul", { children: value.map((v, ix) => {
-      return (0, import_jsx_runtime27.jsxs)("li", { className: "flex", children: [(0, import_jsx_runtime27.jsx)("span", { className: "node-editor-label flex-grow", children: v }), ix == 0 ? (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, {}) : (0, import_jsx_runtime27.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_runtime27.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18" }) }), ix == value.length - 1 ? (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, {}) : (0, import_jsx_runtime27.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_runtime27.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3" }) })] }, v);
+    return (0, import_jsx_runtime29.jsx)("div", { id: props.id, children: (0, import_jsx_runtime29.jsx)("ul", { children: value.map((v, ix) => {
+      return (0, import_jsx_runtime29.jsxs)("li", { className: "flex", children: [(0, import_jsx_runtime29.jsx)("span", { className: "node-editor-label flex-grow", children: v }), ix == 0 ? (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, {}) : (0, import_jsx_runtime29.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_runtime29.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18" }) }), ix == value.length - 1 ? (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, {}) : (0, import_jsx_runtime29.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_runtime29.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3" }) })] }, v);
     }) }) });
   }
   function moveUp(ix) {
@@ -22520,14 +22577,14 @@ function OrderInput(props) {
 var source_selection_default = OrderInput;
 
 // build/processor.cascadingSwitch/inline-view.js
-var import_jsx_runtime28 = __toESM(require_jsx_runtime());
+var import_jsx_runtime30 = __toESM(require_jsx_runtime());
 var activeClasses = "active text-green-500 dark:text-green-300";
 var availableClasses = "available text-green-500 dark:text-green-300";
 var inactiveClasses = "inactive text-orange-500 dark:text-orange-300";
-function InlineView12({ state, config }) {
-  return (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [(0, import_jsx_runtime28.jsx)("h5", { children: "Sources" }), (0, import_jsx_runtime28.jsxs)("ul", { children: [config.sources.map((s, i) => state.activeSource == s ? (0, import_jsx_runtime28.jsxs)("li", { className: activeClasses, children: [s, " <--"] }, i) : state.availableSources.includes(s) ? (0, import_jsx_runtime28.jsxs)("li", { className: availableClasses, children: [s, " (available)"] }, i) : (0, import_jsx_runtime28.jsxs)("li", { className: inactiveClasses, children: [s, " (inactive)"] }, i)), (0, import_jsx_runtime28.jsx)("li", { className: state.activeSource == "fallback" ? activeClasses : availableClasses, children: "fallback" }, "fallback")] })] });
+function InlineView13({ state, config }) {
+  return (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [(0, import_jsx_runtime30.jsx)("h5", { children: "Sources" }), (0, import_jsx_runtime30.jsxs)("ul", { children: [config.sources.map((s, i) => state.activeSource == s ? (0, import_jsx_runtime30.jsxs)("li", { className: activeClasses, children: [s, " <--"] }, i) : state.availableSources.includes(s) ? (0, import_jsx_runtime30.jsxs)("li", { className: availableClasses, children: [s, " (available)"] }, i) : (0, import_jsx_runtime30.jsxs)("li", { className: inactiveClasses, children: [s, " (inactive)"] }, i)), (0, import_jsx_runtime30.jsx)("li", { className: state.activeSource == "fallback" ? activeClasses : availableClasses, children: "fallback" }, "fallback")] })] });
 }
-var inline_view_default12 = InlineView12;
+var inline_view_default13 = InlineView13;
 
 // build/processor.cascadingSwitch/info.js
 var import_FaSlidersH = __toESM(require_FaSlidersH());
@@ -22611,12 +22668,12 @@ function info_default22({ defineComponent, Av, common: { Resolutions, FrameRates
             state.availableSources.splice(state.availableSources.indexOf(ev.source), 1);
             return { ...state };
           default:
-            assertUnreachable12(evType);
+            assertUnreachable13(evType);
         }
       },
-      inline: inline_view_default12,
-      summary: inline_view_default12,
-      fullscreen: inline_view_default12
+      inline: inline_view_default13,
+      summary: inline_view_default13,
+      fullscreen: inline_view_default13
     },
     configForm: {
       form: {
@@ -22663,7 +22720,7 @@ function info_default22({ defineComponent, Av, common: { Resolutions, FrameRates
     }
   });
 }
-function assertUnreachable12(_) {
+function assertUnreachable13(_) {
   throw new Error("Didn't expect to get here");
 }
 
@@ -22671,13 +22728,13 @@ function assertUnreachable12(_) {
 var import_config5 = __toESM(require_config());
 
 // build/processor.fixedLadder/rung-view.js
-var import_jsx_runtime29 = __toESM(require_jsx_runtime());
+var import_jsx_runtime31 = __toESM(require_jsx_runtime());
 function rung_view_default(rung) {
-  return (0, import_jsx_runtime29.jsx)("div", { className: "text-gray-900 dark:text-white", children: rung.name });
+  return (0, import_jsx_runtime31.jsx)("div", { className: "text-gray-900 dark:text-white", children: rung.name });
 }
 
 // build/processor.fixedLadder/codec-editor.js
-var import_jsx_runtime30 = __toESM(require_jsx_runtime());
+var import_jsx_runtime32 = __toESM(require_jsx_runtime());
 var import_react7 = __toESM(require_react());
 function CodecEditor(props) {
   (0, import_react7.useEffect)(() => {
@@ -22693,7 +22750,7 @@ function CodecEditor(props) {
       target.style.height = target.scrollHeight + "px";
     }
   }, []);
-  return (0, import_jsx_runtime30.jsx)("textarea", { ref: textAreaRef, className: "w-full min-h-fit bg-white text-gray-900 dark:text-white dark:bg-black", id: props.id, onChange: (e) => {
+  return (0, import_jsx_runtime32.jsx)("textarea", { ref: textAreaRef, className: "w-full min-h-fit bg-white text-gray-900 dark:text-white dark:bg-black", id: props.id, onChange: (e) => {
     const target = e.currentTarget;
     try {
       const codec = JSON.parse(target.value);
@@ -22705,9 +22762,9 @@ function CodecEditor(props) {
 }
 
 // build/processor.fixedLadder/codec-view.js
-var import_jsx_runtime31 = __toESM(require_jsx_runtime());
+var import_jsx_runtime33 = __toESM(require_jsx_runtime());
 function CodecEditor2(props) {
-  return (0, import_jsx_runtime31.jsxs)("div", { className: "text-gray-900 dark:text-white", children: [props?.width, "x", props?.height] });
+  return (0, import_jsx_runtime33.jsxs)("div", { className: "text-gray-900 dark:text-white", children: [props?.width, "x", props?.height] });
 }
 
 // build/processor.fixedLadder/info.js
@@ -22874,7 +22931,7 @@ function createSoftwareRung(rung) {
     case "h264_320x180":
       return createRungImpl({ name: rung, threads: 1, bitrate: 800 });
     default:
-      return assertUnreachable13(rung);
+      return assertUnreachable14(rung);
   }
 }
 function createMa35dRung(rung) {
@@ -22888,7 +22945,7 @@ function createMa35dRung(rung) {
     case "h264_320x180":
       return createMa35DH264RungImpl({ name: rung, bitrate: 1e3 });
     default:
-      return assertUnreachable13(rung);
+      return assertUnreachable14(rung);
   }
 }
 function createNvidiaRung(rung) {
@@ -22902,7 +22959,7 @@ function createNvidiaRung(rung) {
     case "h264_320x180":
       return createNvidiaRungImpl({ name: rung, bitrate: 8e5 });
     default:
-      return assertUnreachable13(rung);
+      return assertUnreachable14(rung);
   }
 }
 function createQuadraRung(rung) {
@@ -22916,7 +22973,7 @@ function createQuadraRung(rung) {
     case "h264_320x180":
       return createQuadraRungImpl({ name: rung, bitrate: 8e5 });
     default:
-      return assertUnreachable13(rung);
+      return assertUnreachable14(rung);
   }
 }
 function createLoganRung(rung) {
@@ -22930,7 +22987,7 @@ function createLoganRung(rung) {
     case "h264_320x180":
       return createLoganRungImpl({ name: rung, bitrate: 8e5 });
     default:
-      return assertUnreachable13(rung);
+      return assertUnreachable14(rung);
   }
 }
 function createRungImpl({ name, threads, bitrate }) {
@@ -23031,7 +23088,7 @@ function rungWidth(rungName) {
 function rungHeight(rungName) {
   return parseInt(rungName.split("_")[1].split(`x`)[1]);
 }
-function assertUnreachable13(_) {
+function assertUnreachable14(_) {
   throw new Error("Didn't expect to get here");
 }
 
@@ -23245,7 +23302,7 @@ function info_default25({ defineComponent, Video, Audio, validation: { Z } }) {
 var import_config6 = __toESM(require_config());
 
 // build/processor.onscreenGraphic/image-selection.js
-var import_jsx_runtime32 = __toESM(require_jsx_runtime());
+var import_jsx_runtime34 = __toESM(require_jsx_runtime());
 var import_react8 = __toESM(require_react());
 function GraphicSelection(props) {
   const [loading, setLoading] = (0, import_react8.useState)(true);
@@ -23269,13 +23326,13 @@ function GraphicSelection(props) {
   }, [props.urls?.staticUrl?.toString()]);
   const [graphcs, setGraphics] = (0, import_react8.useState)([]);
   if (loading) {
-    return (0, import_jsx_runtime32.jsx)("div", { children: "Loading.." });
+    return (0, import_jsx_runtime34.jsx)("div", { children: "Loading.." });
   }
   if (graphcs.length == 0) {
-    return (0, import_jsx_runtime32.jsx)("div", { children: "No graphics loaded" });
+    return (0, import_jsx_runtime34.jsx)("div", { children: "No graphics loaded" });
   }
-  return (0, import_jsx_runtime32.jsx)("div", { children: (0, import_jsx_runtime32.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime32.jsx)("option", { value: "", children: "---" }, "empty"), graphcs.map((o, i) => {
-    return (0, import_jsx_runtime32.jsx)("option", { value: o, children: o }, i);
+  return (0, import_jsx_runtime34.jsx)("div", { children: (0, import_jsx_runtime34.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime34.jsx)("option", { value: "", children: "---" }, "empty"), graphcs.map((o, i) => {
+    return (0, import_jsx_runtime34.jsx)("option", { value: o, children: o }, i);
   })] }) });
   function myOnChange(e) {
     props.onChanged(e.target.value);
@@ -23284,7 +23341,7 @@ function GraphicSelection(props) {
 var image_selection_default = GraphicSelection;
 
 // build/processor.onscreenGraphic/summary-view.js
-var import_jsx_runtime33 = __toESM(require_jsx_runtime());
+var import_jsx_runtime35 = __toESM(require_jsx_runtime());
 var import_react9 = __toESM(require_react());
 function SummaryView9({ state, sendCommand, urls }) {
   const [graphic, setGraphic] = (0, import_react9.useState)(state.activeGraphic?.file);
@@ -23421,7 +23478,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_runtime33.jsxs)("div", { className: "space-y-3", children: [(0, import_jsx_runtime33.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime33.jsxs)("div", { children: [(0, import_jsx_runtime33.jsx)("label", { htmlFor: "select-graphic", className: "block text-gray-900 dark:text-white mb-1", children: "Source" }), (0, import_jsx_runtime33.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_runtime33.jsx)("option", { value: "", children: "---" }), graphics.map((s) => (0, import_jsx_runtime33.jsx)("option", { value: s, children: s }, s))] })] }), graphic && (0, import_jsx_runtime33.jsxs)("div", { children: [(0, import_jsx_runtime33.jsx)("label", { htmlFor: "select-position", className: "block text-gray-900 dark:text-white mb-1", children: "Graphic position" }), (0, import_jsx_runtime33.jsx)(PositionSelector, { initialPosition: position, onChange: setPosition, graphicChanged, ...state })] }), (0, import_jsx_runtime33.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_runtime33.jsx)("button", { type: "button", className: buttonClass, onClick: () => setShowFileInput(true), style: { marginBottom: "1rem" }, children: "Upload Graphic" }), showFileInput && (0, import_jsx_runtime33.jsxs)("form", { style: { display: "block", marginBottom: "1rem" }, children: [(0, import_jsx_runtime33.jsx)("input", { type: "file", id: "file", name: "filename", onChange: onFileChange, className: fileInputClass }), showUploadButton && (0, import_jsx_runtime33.jsx)("button", { type: "button", className: buttonClass, onClick: uploadFile, children: "Upload" })] }), (0, import_jsx_runtime33.jsx)("button", { type: "button", className: deleteButtonClass, onClick: () => setShowDeleteDropdown(!showDeleteDropdown), style: { marginBottom: "1rem" }, children: showDeleteDropdown ? "Hide Delete Options" : "Delete Graphics" }), showDeleteDropdown && (0, import_jsx_runtime33.jsxs)("div", { className: "mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg", children: [(0, import_jsx_runtime33.jsx)("h3", { className: "text-lg font-semibold mb-2 text-gray-900 dark:text-white", children: "Select Graphic to Delete" }), (0, import_jsx_runtime33.jsxs)("select", { className: "w-full mb-2 node-editor-select-input", value: graphicToDelete, onChange: (e) => setGraphicToDelete(e.target.value), children: [(0, import_jsx_runtime33.jsx)("option", { value: "", children: " Select a graphic" }), graphics.map((graphicName) => (0, import_jsx_runtime33.jsx)("option", { value: graphicName, children: graphicName }, graphicName))] }), (0, import_jsx_runtime33.jsx)("button", { onClick: deleteBug, disabled: !graphicToDelete, className: `${deleteButtonClass} ${!graphicToDelete ? "opacity-50 cursor-not-allowed" : ""}`, children: "Delete Selected Graphic" })] }), uploadStatus.message && (0, import_jsx_runtime33.jsx)("div", { className: `mt-2 text-center ${uploadStatus.success ? "text-green-600" : "text-red-600"}`, children: uploadStatus.message })] });
+  return (0, import_jsx_runtime35.jsxs)("div", { className: "space-y-3", children: [(0, import_jsx_runtime35.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime35.jsxs)("div", { children: [(0, import_jsx_runtime35.jsx)("label", { htmlFor: "select-graphic", className: "block text-gray-900 dark:text-white mb-1", children: "Source" }), (0, import_jsx_runtime35.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_runtime35.jsx)("option", { value: "", children: "---" }), graphics.map((s) => (0, import_jsx_runtime35.jsx)("option", { value: s, children: s }, s))] })] }), graphic && (0, import_jsx_runtime35.jsxs)("div", { children: [(0, import_jsx_runtime35.jsx)("label", { htmlFor: "select-position", className: "block text-gray-900 dark:text-white mb-1", children: "Graphic position" }), (0, import_jsx_runtime35.jsx)(PositionSelector, { initialPosition: position, onChange: setPosition, graphicChanged, ...state })] }), (0, import_jsx_runtime35.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_runtime35.jsx)("button", { type: "button", className: buttonClass, onClick: () => setShowFileInput(true), style: { marginBottom: "1rem" }, children: "Upload Graphic" }), showFileInput && (0, import_jsx_runtime35.jsxs)("form", { style: { display: "block", marginBottom: "1rem" }, children: [(0, import_jsx_runtime35.jsx)("input", { type: "file", id: "file", name: "filename", onChange: onFileChange, className: fileInputClass }), showUploadButton && (0, import_jsx_runtime35.jsx)("button", { type: "button", className: buttonClass, onClick: uploadFile, children: "Upload" })] }), (0, import_jsx_runtime35.jsx)("button", { type: "button", className: deleteButtonClass, onClick: () => setShowDeleteDropdown(!showDeleteDropdown), style: { marginBottom: "1rem" }, children: showDeleteDropdown ? "Hide Delete Options" : "Delete Graphics" }), showDeleteDropdown && (0, import_jsx_runtime35.jsxs)("div", { className: "mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg", children: [(0, import_jsx_runtime35.jsx)("h3", { className: "text-lg font-semibold mb-2 text-gray-900 dark:text-white", children: "Select Graphic to Delete" }), (0, import_jsx_runtime35.jsxs)("select", { className: "w-full mb-2 node-editor-select-input", value: graphicToDelete, onChange: (e) => setGraphicToDelete(e.target.value), children: [(0, import_jsx_runtime35.jsx)("option", { value: "", children: " Select a graphic" }), graphics.map((graphicName) => (0, import_jsx_runtime35.jsx)("option", { value: graphicName, children: graphicName }, graphicName))] }), (0, import_jsx_runtime35.jsx)("button", { onClick: deleteBug, disabled: !graphicToDelete, className: `${deleteButtonClass} ${!graphicToDelete ? "opacity-50 cursor-not-allowed" : ""}`, children: "Delete Selected Graphic" })] }), uploadStatus.message && (0, import_jsx_runtime35.jsx)("div", { className: `mt-2 text-center ${uploadStatus.success ? "text-green-600" : "text-red-600"}`, children: uploadStatus.message })] });
 }
 function fromLocalPosition(pos) {
   if (pos.type === "named")
@@ -23430,7 +23487,7 @@ function fromLocalPosition(pos) {
     return { type: pos.type, x: pos.x, y: pos.y };
   if (pos.type === "percentage")
     return { type: pos.type, x: pos.x, y: pos.y };
-  assertUnreachable14(pos);
+  assertUnreachable15(pos);
 }
 function convertPosition(givenPosition, currentVideo, currentGraphic) {
   if (!givenPosition)
@@ -23448,7 +23505,7 @@ function convertPosition(givenPosition, currentVideo, currentGraphic) {
     } else if (givenPosition.position === "center") {
       xy = { x: 50, y: 50 };
     } else {
-      assertUnreachable14(givenPosition.position);
+      assertUnreachable15(givenPosition.position);
     }
     return { ...givenPosition, ...xy, xPct: xy.x, yPct: xy.y };
   }
@@ -23536,7 +23593,7 @@ var PositionSelector = ({ initialPosition: givenPosition = { type: "named", posi
       window.removeEventListener("mouseup", handleMouseUp);
     };
   }, [isDragging]);
-  return (0, import_jsx_runtime33.jsxs)("div", { className: "relative w-full max-w-lg mx-auto mt-4 mb-8", children: [(0, import_jsx_runtime33.jsxs)("div", { className: "mb-4 flex items-center gap-2", children: [(0, import_jsx_runtime33.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Position Type:" }), (0, import_jsx_runtime33.jsxs)("select", { value: position.type, onChange: (e) => {
+  return (0, import_jsx_runtime35.jsxs)("div", { className: "relative w-full max-w-lg mx-auto mt-4 mb-8", children: [(0, import_jsx_runtime35.jsxs)("div", { className: "mb-4 flex items-center gap-2", children: [(0, import_jsx_runtime35.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Position Type:" }), (0, import_jsx_runtime35.jsxs)("select", { value: position.type, onChange: (e) => {
     const newType = e.target.value;
     if (newType === "named") {
       setPosition(convertPos({ type: "named", position: "topleft" }));
@@ -23544,12 +23601,12 @@ var PositionSelector = ({ initialPosition: givenPosition = { type: "named", posi
       setPositionUnit("%");
       setPosition({ ...convertPos(position), type: "percentage" });
     }
-  }, className: "node-editor-select-input", children: [(0, import_jsx_runtime33.jsx)("option", { value: "coordinate", children: "Custom Position" }), (0, import_jsx_runtime33.jsx)("option", { value: "named", children: "Preset Position" })] })] }), position.type === "named" ? (0, import_jsx_runtime33.jsx)("div", { className: "mb-4", children: (0, import_jsx_runtime33.jsxs)("select", { value: position.position, onChange: (e) => {
+  }, className: "node-editor-select-input", children: [(0, import_jsx_runtime35.jsx)("option", { value: "coordinate", children: "Custom Position" }), (0, import_jsx_runtime35.jsx)("option", { value: "named", children: "Preset Position" })] })] }), position.type === "named" ? (0, import_jsx_runtime35.jsx)("div", { className: "mb-4", children: (0, import_jsx_runtime35.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_runtime33.jsx)("option", { value: "topleft", children: "Top Left" }), (0, import_jsx_runtime33.jsx)("option", { value: "topright", children: "Top Right" }), (0, import_jsx_runtime33.jsx)("option", { value: "bottomleft", children: "Bottom Left" }), (0, import_jsx_runtime33.jsx)("option", { value: "bottomright", children: "Bottom Right" }), (0, import_jsx_runtime33.jsx)("option", { value: "center", children: "Centered" })] }) }) : (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [(0, import_jsx_runtime33.jsxs)("div", { className: "mb-4 flex items-center gap-2", children: [(0, import_jsx_runtime33.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Position Unit:" }), (0, import_jsx_runtime33.jsxs)("select", { value: positionUnit, onChange: (e) => {
+  }, className: "w-full node-editor-select-input", children: [(0, import_jsx_runtime35.jsx)("option", { value: "topleft", children: "Top Left" }), (0, import_jsx_runtime35.jsx)("option", { value: "topright", children: "Top Right" }), (0, import_jsx_runtime35.jsx)("option", { value: "bottomleft", children: "Bottom Left" }), (0, import_jsx_runtime35.jsx)("option", { value: "bottomright", children: "Bottom Right" }), (0, import_jsx_runtime35.jsx)("option", { value: "center", children: "Centered" })] }) }) : (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [(0, import_jsx_runtime35.jsxs)("div", { className: "mb-4 flex items-center gap-2", children: [(0, import_jsx_runtime35.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Position Unit:" }), (0, import_jsx_runtime35.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;
@@ -23574,18 +23631,18 @@ var PositionSelector = ({ initialPosition: givenPosition = { type: "named", posi
         yStr: void 0
       });
     }
-  }, className: "node-editor-select-input", children: [(0, import_jsx_runtime33.jsx)("option", { value: "px", children: "Pixels" }), (0, import_jsx_runtime33.jsx)("option", { value: "%", children: "Percentage" })] })] }), (0, import_jsx_runtime33.jsxs)("div", { className: "relative bg-gray-200 dark:bg-gray-700 rounded-lg", style: {
+  }, className: "node-editor-select-input", children: [(0, import_jsx_runtime35.jsx)("option", { value: "px", children: "Pixels" }), (0, import_jsx_runtime35.jsx)("option", { value: "%", children: "Percentage" })] })] }), (0, import_jsx_runtime35.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_runtime33.jsxs)("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-gray-500 dark:text-gray-400", children: [(0, import_jsx_runtime33.jsx)("span", { children: currentVideo ? "Video Preview Area" : "Video Dimensions Unknown" }), " ", currentVideo ? (0, import_jsx_runtime33.jsxs)("span", { children: [currentVideo.width, "x", currentVideo.height, "px"] }) : ""] }), (0, import_jsx_runtime33.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_runtime35.jsxs)("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-gray-500 dark:text-gray-400", children: [(0, import_jsx_runtime35.jsx)("span", { children: currentVideo ? "Video Preview Area" : "Video Dimensions Unknown" }), " ", currentVideo ? (0, import_jsx_runtime35.jsxs)("span", { children: [currentVideo.width, "x", currentVideo.height, "px"] }) : ""] }), (0, import_jsx_runtime35.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_runtime33.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_runtime33.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_runtime33.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_runtime33.jsxs)("div", { className: "mt-2 flex gap-4", children: [(0, import_jsx_runtime33.jsxs)("div", { children: [(0, import_jsx_runtime33.jsxs)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: ["X Position ", positionUnit] }), (0, import_jsx_runtime33.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_runtime35.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_runtime35.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_runtime35.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_runtime35.jsxs)("div", { className: "mt-2 flex gap-4", children: [(0, import_jsx_runtime35.jsxs)("div", { children: [(0, import_jsx_runtime35.jsxs)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: ["X Position ", positionUnit] }), (0, import_jsx_runtime35.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",
@@ -23594,7 +23651,7 @@ var PositionSelector = ({ initialPosition: givenPosition = { type: "named", posi
       y: position.y,
       yStr: position.yStr
     }));
-  }, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600" })] }), (0, import_jsx_runtime33.jsxs)("div", { children: [(0, import_jsx_runtime33.jsxs)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: ["Y Position ", positionUnit] }), (0, import_jsx_runtime33.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_runtime35.jsxs)("div", { children: [(0, import_jsx_runtime35.jsxs)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: ["Y Position ", positionUnit] }), (0, import_jsx_runtime35.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",
@@ -23608,7 +23665,7 @@ var PositionSelector = ({ initialPosition: givenPosition = { type: "named", posi
 function clamp(min, num, max) {
   return num < min ? min : num > max ? max : num;
 }
-function assertUnreachable14(_) {
+function assertUnreachable15(_) {
   throw new Error("Didn't expect to get here");
 }
 var summary_view_default9 = SummaryView9;
@@ -23654,7 +23711,7 @@ function info_default26({ defineComponent }) {
           case "graphic-loaded":
             return { ...state, currentGraphic: ev.currentGraphic };
           default:
-            assertUnreachable15(evType);
+            assertUnreachable16(evType);
         }
       }
     },
@@ -23690,7 +23747,7 @@ function info_default26({ defineComponent }) {
     }
   });
 }
-function assertUnreachable15(_) {
+function assertUnreachable16(_) {
   throw new Error("Didn't expect to get here");
 }
 
@@ -23837,7 +23894,7 @@ function info_default28({ defineComponent }) {
 }
 
 // build/util.stats.latency/inline-view.js
-var import_jsx_runtime34 = __toESM(require_jsx_runtime());
+var import_jsx_runtime36 = __toESM(require_jsx_runtime());
 var import_react10 = __toESM(require_react());
 
 // ../../node_modules/chart.js/auto/auto.js
@@ -23845,7 +23902,7 @@ Chart.register(...registerables);
 var auto_default = Chart;
 
 // build/util.stats.latency/inline-view.js
-function InlineView13({ state, config: _2 }) {
+function InlineView14({ state, config: _2 }) {
   const chartContainer = (0, import_react10.useRef)(null);
   const [chartControl, setChartControl] = (0, import_react10.useState)(void 0);
   function makeDataSet(key, color2, values) {
@@ -23907,19 +23964,19 @@ function InlineView13({ state, config: _2 }) {
       return;
     chartControl.data = makeData(state);
   }, [state]);
-  return (0, import_jsx_runtime34.jsx)("div", { className: "bg-gray-50 dark:bg-gray-700 rounded", style: { width: "360px", height: "200px", padding: "10px" }, children: (0, import_jsx_runtime34.jsx)("canvas", { className: "bg-gray-50 dark:bg-gray-700 rounded", ref: chartContainer }) });
+  return (0, import_jsx_runtime36.jsx)("div", { className: "bg-gray-50 dark:bg-gray-700 rounded", style: { width: "360px", height: "200px", padding: "10px" }, children: (0, import_jsx_runtime36.jsx)("canvas", { className: "bg-gray-50 dark:bg-gray-700 rounded", ref: chartContainer }) });
 }
-var inline_view_default13 = InlineView13;
+var inline_view_default14 = InlineView14;
 
 // build/util.stats.latency/source-node-selection.js
-var import_jsx_runtime35 = __toESM(require_jsx_runtime());
+var import_jsx_runtime37 = __toESM(require_jsx_runtime());
 function SourceNodeSelection(props) {
-  return (0, import_jsx_runtime35.jsx)("div", { children: (0, import_jsx_runtime35.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime35.jsx)("option", { value: "", children: "---" }, "empty"), Object.values(props.latestDocument.components).map((o, i) => {
+  return (0, import_jsx_runtime37.jsx)("div", { children: (0, import_jsx_runtime37.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime37.jsx)("option", { value: "", children: "---" }, "empty"), Object.values(props.latestDocument.components).map((o, i) => {
     if (o.id == props.id)
-      return (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, {});
+      return (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, {});
     if (o.info.category === "output")
       return;
-    return (0, import_jsx_runtime35.jsx)("option", { value: o.id, children: o.config.displayName }, i);
+    return (0, import_jsx_runtime37.jsx)("option", { value: o.id, children: o.config.displayName }, i);
   })] }) });
   function myOnChange(e) {
     props.onChanged(e.target.value);
@@ -23959,11 +24016,11 @@ function info_default29(R) {
             break;
           }
           default:
-            assertUnreachable16(evType);
+            assertUnreachable17(evType);
         }
         return { ...state };
       },
-      inline: inline_view_default13
+      inline: inline_view_default14
     },
     configForm: {
       form: {
@@ -24014,7 +24071,7 @@ function info_default29(R) {
     }
   });
 }
-function assertUnreachable16(_) {
+function assertUnreachable17(_) {
   throw new Error("Didn't expect to get here");
 }