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

package/client/info.js

@@ -273,9 +273,9 @@ var init_form_views = __esm({
   }
 });
 
-// ../../node_modules/@norskvideo/norsk-studio/lib/shared/shared-views.js
+// node_modules/@norskvideo/norsk-studio/lib/shared/shared-views.js
 var require_shared_views = __commonJS({
-  "../../node_modules/@norskvideo/norsk-studio/lib/shared/shared-views.js"(exports) {
+  "node_modules/@norskvideo/norsk-studio/lib/shared/shared-views.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.GlobalIceServerView = GlobalIceServerView;
@@ -286,9 +286,9 @@ var require_shared_views = __commonJS({
   }
 });
 
-// ../../node_modules/@norskvideo/norsk-studio/lib/shared/config.js
+// node_modules/@norskvideo/norsk-studio/lib/shared/config.js
 var require_config = __commonJS({
-  "../../node_modules/@norskvideo/norsk-studio/lib/shared/config.js"(exports) {
+  "node_modules/@norskvideo/norsk-studio/lib/shared/config.js"(exports) {
     "use strict";
     var __createBinding = exports && exports.__createBinding || (Object.create ? function(o, m, k, k2) {
       if (k2 === void 0)
@@ -643,19 +643,89 @@ var init_inline_view6 = __esm({
   }
 });
 
-// build/processor.dynamicBug/bug-selection.js
-var bug_selection_exports = {};
-__export(bug_selection_exports, {
-  default: () => bug_selection_default
+// build/processor.fixedLadder/rung-view.js
+var rung_view_exports = {};
+__export(rung_view_exports, {
+  default: () => rung_view_default
 });
-function BugSelection(props) {
-  const [loading, setLoading] = (0, import_react13.useState)(true);
+function rung_view_default(rung) {
+  return (0, import_jsx_runtime14.jsx)("div", { className: "", children: rung.name });
+}
+var import_jsx_runtime14;
+var init_rung_view = __esm({
+  "build/processor.fixedLadder/rung-view.js"() {
+    "use strict";
+    import_jsx_runtime14 = __toESM(require_jsx_runtime());
+  }
+});
+
+// build/processor.fixedLadder/codec-editor.js
+var codec_editor_exports = {};
+__export(codec_editor_exports, {
+  default: () => CodecEditor
+});
+function CodecEditor(props) {
+  (0, import_react13.useEffect)(() => {
+    if (props.defaultValue)
+      props.onChanged(props.defaultValue);
+  }, [props.defaultValue]);
+  const textAreaRef = (0, import_react13.useRef)(null);
+  const [value, setValue] = (0, import_react13.useState)(props.defaultValue);
   (0, import_react13.useEffect)(() => {
+    if (textAreaRef.current) {
+      const target = textAreaRef.current;
+      target.style.height = "";
+      target.style.height = target.scrollHeight + "px";
+    }
+  }, []);
+  return (0, import_jsx_runtime15.jsx)("textarea", { ref: textAreaRef, className: "w-full min-h-fit dark:text-white dark:bg-black", onChange: (e) => {
+    const target = e.currentTarget;
+    try {
+      const codec = JSON.parse(target.value);
+      setValue(codec);
+      props.onChanged(codec);
+    } catch (e2) {
+    }
+  }, defaultValue: JSON.stringify(value, void 0, 2) });
+}
+var import_jsx_runtime15, import_react13;
+var init_codec_editor = __esm({
+  "build/processor.fixedLadder/codec-editor.js"() {
+    "use strict";
+    import_jsx_runtime15 = __toESM(require_jsx_runtime());
+    import_react13 = __toESM(require_react());
+  }
+});
+
+// build/processor.fixedLadder/codec-view.js
+var codec_view_exports = {};
+__export(codec_view_exports, {
+  default: () => CodecEditor2
+});
+function CodecEditor2(props) {
+  return (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [props.width, "x", props.height] });
+}
+var import_jsx_runtime16;
+var init_codec_view = __esm({
+  "build/processor.fixedLadder/codec-view.js"() {
+    "use strict";
+    import_jsx_runtime16 = __toESM(require_jsx_runtime());
+  }
+});
+
+// build/processor.onscreenGraphic/image-selection.js
+var image_selection_exports = {};
+__export(image_selection_exports, {
+  default: () => image_selection_default
+});
+function GraphicSelection(props) {
+  const [loading, setLoading] = (0, import_react15.useState)(true);
+  (0, import_react15.useEffect)(() => {
     const fn = async () => {
-      const result2 = await fetch("components/processor.dynamicBug/bugs");
+      const result2 = await fetch("components/processor.onscreenGraphic/graphics");
       if (result2.ok && result2.body) {
-        const bugs2 = await result2.json();
-        setBugs(bugs2);
+        const graphics = await result2.json();
+        setGraphics(graphics);
         setLoading(false);
         if (props.defaultValue)
           props.onChanged(props.defaultValue);
@@ -666,65 +736,65 @@ function BugSelection(props) {
     };
     fn().catch(console.error);
   }, []);
-  const [bugs, setBugs] = (0, import_react13.useState)([]);
+  const [graphcs, setGraphics] = (0, import_react15.useState)([]);
   if (loading) {
-    return (0, import_jsx_runtime14.jsx)("div", { children: "Loading.." });
+    return (0, import_jsx_runtime17.jsx)("div", { children: "Loading.." });
   }
-  if (bugs.length == 0) {
-    return (0, import_jsx_runtime14.jsx)("div", { children: "No bugs loaded" });
+  if (graphcs.length == 0) {
+    return (0, import_jsx_runtime17.jsx)("div", { children: "No graphics loaded" });
   }
-  return (0, import_jsx_runtime14.jsx)("div", { children: (0, import_jsx_runtime14.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime14.jsx)("option", { value: "", children: "---" }, "empty"), bugs.map((o, i) => {
-    return (0, import_jsx_runtime14.jsx)("option", { value: o, children: o }, i);
+  return (0, import_jsx_runtime17.jsx)("div", { children: (0, import_jsx_runtime17.jsxs)("select", { defaultValue: props.defaultValue, className: `node-editor-select-input`, id: props.id, onChange: myOnChange, onBlur: myOnChange, children: [(0, import_jsx_runtime17.jsx)("option", { value: "", children: "---" }, "empty"), graphcs.map((o, i) => {
+    return (0, import_jsx_runtime17.jsx)("option", { value: o, children: o }, i);
   })] }) });
   function myOnChange(e) {
     props.onChanged(e.target.value);
   }
 }
-var import_jsx_runtime14, import_react13, bug_selection_default;
-var init_bug_selection = __esm({
-  "build/processor.dynamicBug/bug-selection.js"() {
+var import_jsx_runtime17, import_react15, image_selection_default;
+var init_image_selection = __esm({
+  "build/processor.onscreenGraphic/image-selection.js"() {
     "use strict";
-    import_jsx_runtime14 = __toESM(require_jsx_runtime());
-    import_react13 = __toESM(require_react());
-    bug_selection_default = BugSelection;
+    import_jsx_runtime17 = __toESM(require_jsx_runtime());
+    import_react15 = __toESM(require_react());
+    image_selection_default = GraphicSelection;
   }
 });
 
-// build/processor.dynamicBug/summary-view.js
+// build/processor.onscreenGraphic/summary-view.js
 var summary_view_exports3 = {};
 __export(summary_view_exports3, {
   default: () => summary_view_default3
 });
 function SummaryView5({ state, sendCommand, urls }) {
-  const [bug, setBug] = (0, import_react14.useState)(state.activeBug?.file);
-  const [position, setPosition] = (0, import_react14.useState)(state.activeBug?.position);
-  const [bugs, setBugs] = (0, import_react14.useState)([]);
-  const [fileToUpload, setFileToUpload] = (0, import_react14.useState)(void 0);
-  const [showFileInput, setShowFileInput] = (0, import_react14.useState)(false);
-  const [showUploadButton, setShowUploadButton] = (0, import_react14.useState)(false);
-  const [uploadStatus, setUploadStatus] = (0, import_react14.useState)({ success: false, message: null });
-  const [showDeleteDropdown, setShowDeleteDropdown] = (0, import_react14.useState)(false);
-  const [bugToDelete, setBugToDelete] = (0, import_react14.useState)("");
-  const updateBugs = (0, import_react14.useCallback)(async () => {
+  const [graphic, setGraphic] = (0, import_react16.useState)(state.activeGraphic?.file);
+  const [position, setPosition] = (0, import_react16.useState)(state.activeGraphic?.position);
+  const [graphics, setGraphics] = (0, import_react16.useState)([]);
+  const [fileToUpload, setFileToUpload] = (0, import_react16.useState)(void 0);
+  const [showFileInput, setShowFileInput] = (0, import_react16.useState)(false);
+  const [showUploadButton, setShowUploadButton] = (0, import_react16.useState)(false);
+  const [uploadStatus, setUploadStatus] = (0, import_react16.useState)({ success: false, message: null });
+  const [showDeleteDropdown, setShowDeleteDropdown] = (0, import_react16.useState)(false);
+  const [graphicToDelete, setGraphicToDelete] = (0, import_react16.useState)("");
+  const updateGraphics = (0, import_react16.useCallback)(async () => {
     try {
-      const result2 = await fetch(`${urls.componentUrl}/bugs`);
+      const result2 = await fetch(`${urls.componentUrl}/graphics`);
       if (result2.ok) {
-        const newBugs = await result2.json();
-        setBugs(newBugs);
+        const newGraphics = await result2.json();
+        setGraphics(newGraphics);
       } else {
         throw new Error(await result2.text());
       }
     } catch (error) {
-      console.error("Failed to update bugs:", error);
+      console.error("Failed to update graphics:", error);
       setUploadStatus({
         success: false,
-        message: "Failed to update bug list."
+        message: "Failed to update graphic list."
       });
     }
   }, [urls.componentUrl]);
-  (0, import_react14.useEffect)(() => {
-    updateBugs().catch(console.error);
-  }, [updateBugs]);
+  (0, import_react16.useEffect)(() => {
+    updateGraphics().catch(console.error);
+  }, [updateGraphics]);
   const onFileChange = (e) => {
     const file = e.target.files?.[0];
     setFileToUpload(file);
@@ -737,7 +807,7 @@ function SummaryView5({ state, sendCommand, urls }) {
     try {
       const form = new FormData();
       form.append("file", fileToUpload);
-      const response = await fetch(`${urls.componentUrl}/bugs`, {
+      const response = await fetch(`${urls.componentUrl}/graphics`, {
         method: "POST",
         body: form
       });
@@ -745,7 +815,7 @@ function SummaryView5({ state, sendCommand, urls }) {
         const errorData = await response.json();
         setUploadStatus({
           success: false,
-          message: `${errorData.error}. Delete the existing bug first if you want to replace it.`
+          message: `${errorData.error}. Delete the existing graphic first if you want to replace it.`
         });
       } else if (!response.ok) {
         throw new Error("Upload failed");
@@ -754,138 +824,68 @@ function SummaryView5({ state, sendCommand, urls }) {
         setShowFileInput(false);
         setUploadStatus({
           success: true,
-          message: "Bug uploaded successfully!"
+          message: "Graphic uploaded successfully!"
         });
-        await updateBugs();
+        await updateGraphics();
       }
     } catch (error) {
       console.error("Failed to upload file:", error);
-      setUploadStatus({ success: false, message: "Failed to upload bug." });
+      setUploadStatus({ success: false, message: "Failed to upload graphic." });
     }
     setTimeout(() => setUploadStatus({ success: false, message: null }), 5e3);
   };
   const deleteBug = async () => {
-    if (!bugToDelete)
+    if (!graphicToDelete)
       return;
     try {
-      const response = await fetch(`${urls.componentUrl}/bug`, {
+      const response = await fetch(`${urls.componentUrl}/graphic`, {
         method: "DELETE",
         headers: {
           "Content-Type": "application/json"
         },
-        body: JSON.stringify({ filename: bugToDelete })
+        body: JSON.stringify({ filename: graphicToDelete })
       });
       if (response.ok) {
         setUploadStatus({
           success: true,
-          message: "Bug deleted successfully!"
+          message: "Graphic deleted successfully!"
         });
-        await updateBugs();
-        if (bug === bugToDelete) {
-          setBug(void 0);
+        await updateGraphics();
+        if (graphic === graphicToDelete) {
+          setGraphic(void 0);
           sendCommand({
-            type: "change-bug",
+            type: "change-graphic",
             file: void 0,
             position: void 0
           });
         }
-        setBugToDelete("");
+        setGraphicToDelete("");
         setShowDeleteDropdown(false);
       } else {
         const errorData = await response.json();
         setUploadStatus({
           success: false,
-          message: errorData.error || "Failed to delete bug"
+          message: errorData.error || "Failed to delete graphic"
         });
       }
     } catch (error) {
-      console.error("Failed to delete bug:", error);
-      setUploadStatus({ success: false, message: "Failed to delete bug" });
+      console.error("Failed to delete graphic:", error);
+      setUploadStatus({ success: false, message: "Failed to delete graphic" });
     }
     setTimeout(() => setUploadStatus({ success: false, message: null }), 3e3);
   };
   const buttonClass = "mt-2 mb-5 text-white w-full justify-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800";
   const deleteButtonClass = "mt-2 text-white w-full justify-center bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-700 dark:hover:bg-red-800 dark:focus:ring-red-900";
   const fileInputClass = "block w-full text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400";
-  return (0, import_jsx_runtime15.jsxs)("div", { className: "space-y-3", children: [(0, import_jsx_runtime15.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime15.jsxs)("div", { children: [(0, import_jsx_runtime15.jsx)("label", { htmlFor: "select-bug", className: "block text-gray-900 dark:text-white mb-1", children: "Source" }), (0, import_jsx_runtime15.jsxs)("select", { id: "select-bug", className: "w-full node-editor-select-input", value: bug || "", onChange: (e) => setBug(e.target.value || void 0), children: [(0, import_jsx_runtime15.jsx)("option", { value: "", children: "---" }), bugs.map((s) => (0, import_jsx_runtime15.jsx)("option", { value: s, children: s }, s))] })] }), bug && (0, import_jsx_runtime15.jsxs)("div", { children: [(0, import_jsx_runtime15.jsx)("label", { htmlFor: "select-position", className: "block text-gray-900 dark:text-white mb-1", children: "Position" }), (0, import_jsx_runtime15.jsxs)("select", { id: "select-position", className: "w-full node-editor-select-input", value: position, onChange: (e) => setPosition(e.target.value), children: [(0, import_jsx_runtime15.jsx)("option", { value: "topleft", children: "Top Left" }), (0, import_jsx_runtime15.jsx)("option", { value: "topright", children: "Top Right" }), (0, import_jsx_runtime15.jsx)("option", { value: "bottomleft", children: "Bottom Left" }), (0, import_jsx_runtime15.jsx)("option", { value: "bottomright", children: "Bottom Right" })] })] }), (bug !== state.activeBug?.file || position !== state.activeBug?.position) && (0, import_jsx_runtime15.jsx)("button", { type: "button", className: buttonClass, onClick: () => sendCommand({ type: "change-bug", file: bug, position }), children: "Commit" }), !showFileInput && !uploadStatus.success && (0, import_jsx_runtime15.jsx)("button", { type: "button", className: buttonClass, onClick: () => setShowFileInput(true), style: { marginBottom: "1rem" }, children: "Upload  Bug" }), showFileInput && (0, import_jsx_runtime15.jsxs)("form", { style: { display: "block", marginBottom: "1rem" }, children: [(0, import_jsx_runtime15.jsx)("input", { type: "file", id: "file", name: "filename", onChange: onFileChange, className: fileInputClass }), showUploadButton && (0, import_jsx_runtime15.jsx)("button", { type: "button", className: buttonClass, onClick: uploadFile, children: "Upload" })] }), (0, import_jsx_runtime15.jsx)("button", { type: "button", className: deleteButtonClass, onClick: () => setShowDeleteDropdown(!showDeleteDropdown), style: { marginBottom: "1rem" }, children: showDeleteDropdown ? "Hide Delete Options" : "Delete Bugs" }), showDeleteDropdown && (0, import_jsx_runtime15.jsxs)("div", { className: "mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg", children: [(0, import_jsx_runtime15.jsx)("h3", { className: "text-lg font-semibold mb-2 text-gray-900 dark:text-white", children: "Select Bug to Delete" }), (0, import_jsx_runtime15.jsxs)("select", { className: "w-full mb-2 node-editor-select-input", value: bugToDelete, onChange: (e) => setBugToDelete(e.target.value), children: [(0, import_jsx_runtime15.jsx)("option", { value: "", children: " Select a bug" }), bugs.map((bugName) => (0, import_jsx_runtime15.jsx)("option", { value: bugName, children: bugName }, bugName))] }), (0, import_jsx_runtime15.jsx)("button", { onClick: deleteBug, disabled: !bugToDelete, className: `${deleteButtonClass} ${!bugToDelete ? "opacity-50 cursor-not-allowed" : ""}`, children: "Delete Selected Bug" })] }), uploadStatus.message && (0, import_jsx_runtime15.jsx)("div", { className: `mt-2 text-center ${uploadStatus.success ? "text-green-600" : "text-red-600"}`, children: uploadStatus.message })] });
+  return (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-3", children: [(0, import_jsx_runtime18.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime18.jsxs)("div", { children: [(0, import_jsx_runtime18.jsx)("label", { htmlFor: "select-graphic", className: "block text-gray-900 dark:text-white mb-1", children: "Source" }), (0, import_jsx_runtime18.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_runtime18.jsx)("option", { value: "", children: "---" }), graphics.map((s) => (0, import_jsx_runtime18.jsx)("option", { value: s, children: s }, s))] })] }), graphic && (0, import_jsx_runtime18.jsxs)("div", { children: [(0, import_jsx_runtime18.jsx)("label", { htmlFor: "select-position", className: "block text-gray-900 dark:text-white mb-1", children: "Position" }), (0, import_jsx_runtime18.jsxs)("select", { id: "select-position", className: "w-full node-editor-select-input", value: position, onChange: (e) => setPosition(e.target.value), children: [(0, import_jsx_runtime18.jsx)("option", { value: "topleft", children: "Top Left" }), (0, import_jsx_runtime18.jsx)("option", { value: "topright", children: "Top Right" }), (0, import_jsx_runtime18.jsx)("option", { value: "bottomleft", children: "Bottom Left" }), (0, import_jsx_runtime18.jsx)("option", { value: "bottomright", children: "Bottom Right" })] })] }), (graphic !== state.activeGraphic?.file || position !== state.activeGraphic?.position) && (0, import_jsx_runtime18.jsx)("button", { type: "button", className: buttonClass, onClick: () => sendCommand({ type: "change-graphic", file: graphic, position }), children: "Commit" }), !showFileInput && !uploadStatus.success && (0, import_jsx_runtime18.jsx)("button", { type: "button", className: buttonClass, onClick: () => setShowFileInput(true), style: { marginBottom: "1rem" }, children: "Upload  Graphic" }), showFileInput && (0, import_jsx_runtime18.jsxs)("form", { style: { display: "block", marginBottom: "1rem" }, children: [(0, import_jsx_runtime18.jsx)("input", { type: "file", id: "file", name: "filename", onChange: onFileChange, className: fileInputClass }), showUploadButton && (0, import_jsx_runtime18.jsx)("button", { type: "button", className: buttonClass, onClick: uploadFile, children: "Upload" })] }), (0, import_jsx_runtime18.jsx)("button", { type: "button", className: deleteButtonClass, onClick: () => setShowDeleteDropdown(!showDeleteDropdown), style: { marginBottom: "1rem" }, children: showDeleteDropdown ? "Hide Delete Options" : "Delete Graphics" }), showDeleteDropdown && (0, import_jsx_runtime18.jsxs)("div", { className: "mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg", children: [(0, import_jsx_runtime18.jsx)("h3", { className: "text-lg font-semibold mb-2 text-gray-900 dark:text-white", children: "Select Graphic to Delete" }), (0, import_jsx_runtime18.jsxs)("select", { className: "w-full mb-2 node-editor-select-input", value: graphicToDelete, onChange: (e) => setGraphicToDelete(e.target.value), children: [(0, import_jsx_runtime18.jsx)("option", { value: "", children: " Select a graphic" }), graphics.map((graphicName) => (0, import_jsx_runtime18.jsx)("option", { value: graphicName, children: graphicName }, graphicName))] }), (0, import_jsx_runtime18.jsx)("button", { onClick: deleteBug, disabled: !graphicToDelete, className: `${deleteButtonClass} ${!graphicToDelete ? "opacity-50 cursor-not-allowed" : ""}`, children: "Delete Selected Graphic" })] }), uploadStatus.message && (0, import_jsx_runtime18.jsx)("div", { className: `mt-2 text-center ${uploadStatus.success ? "text-green-600" : "text-red-600"}`, children: uploadStatus.message })] });
 }
-var import_jsx_runtime15, import_react14, summary_view_default3;
+var import_jsx_runtime18, import_react16, summary_view_default3;
 var init_summary_view3 = __esm({
-  "build/processor.dynamicBug/summary-view.js"() {
-    "use strict";
-    import_jsx_runtime15 = __toESM(require_jsx_runtime());
-    import_react14 = __toESM(require_react());
-    summary_view_default3 = SummaryView5;
-  }
-});
-
-// build/processor.fixedLadder/rung-view.js
-var rung_view_exports = {};
-__export(rung_view_exports, {
-  default: () => rung_view_default
-});
-function rung_view_default(rung) {
-  return (0, import_jsx_runtime16.jsx)("div", { className: "", children: rung.name });
-}
-var import_jsx_runtime16;
-var init_rung_view = __esm({
-  "build/processor.fixedLadder/rung-view.js"() {
-    "use strict";
-    import_jsx_runtime16 = __toESM(require_jsx_runtime());
-  }
-});
-
-// build/processor.fixedLadder/codec-editor.js
-var codec_editor_exports = {};
-__export(codec_editor_exports, {
-  default: () => CodecEditor
-});
-function CodecEditor(props) {
-  (0, import_react16.useEffect)(() => {
-    if (props.defaultValue)
-      props.onChanged(props.defaultValue);
-  }, [props.defaultValue]);
-  const textAreaRef = (0, import_react16.useRef)(null);
-  const [value, setValue] = (0, import_react16.useState)(props.defaultValue);
-  (0, import_react16.useEffect)(() => {
-    if (textAreaRef.current) {
-      const target = textAreaRef.current;
-      target.style.height = "";
-      target.style.height = target.scrollHeight + "px";
-    }
-  }, []);
-  return (0, import_jsx_runtime17.jsx)("textarea", { ref: textAreaRef, className: "w-full min-h-fit dark:text-white dark:bg-black", onChange: (e) => {
-    const target = e.currentTarget;
-    try {
-      const codec = JSON.parse(target.value);
-      setValue(codec);
-      props.onChanged(codec);
-    } catch (e2) {
-    }
-  }, defaultValue: JSON.stringify(value, void 0, 2) });
-}
-var import_jsx_runtime17, import_react16;
-var init_codec_editor = __esm({
-  "build/processor.fixedLadder/codec-editor.js"() {
-    "use strict";
-    import_jsx_runtime17 = __toESM(require_jsx_runtime());
-    import_react16 = __toESM(require_react());
-  }
-});
-
-// build/processor.fixedLadder/codec-view.js
-var codec_view_exports = {};
-__export(codec_view_exports, {
-  default: () => CodecEditor2
-});
-function CodecEditor2(props) {
-  return (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [props.width, "x", props.height] });
-}
-var import_jsx_runtime18;
-var init_codec_view = __esm({
-  "build/processor.fixedLadder/codec-view.js"() {
+  "build/processor.onscreenGraphic/summary-view.js"() {
     "use strict";
     import_jsx_runtime18 = __toESM(require_jsx_runtime());
+    import_react16 = __toESM(require_react());
+    summary_view_default3 = SummaryView5;
   }
 });
 
@@ -16534,90 +16534,13 @@ function assertUnreachable7(_) {
   throw new Error("Didn't expect to get here");
 }
 
-// build/processor.dynamicBug/info.js
+// build/processor.fixedLadder/info.js
+var import_react14 = __toESM(require_react());
 var import_config4 = __toESM(require_config());
-var import_react15 = __toESM(require_react());
 function info_default16({ defineComponent, Video }) {
-  const BugSelection2 = import_react15.default.lazy(async () => Promise.resolve().then(() => (init_bug_selection(), bug_selection_exports)));
-  const SummaryView6 = import_react15.default.lazy(async () => Promise.resolve().then(() => (init_summary_view3(), summary_view_exports3)));
-  return defineComponent({
-    identifier: "processor.dynamicBug",
-    category: "processor",
-    name: "Dynamic Bug",
-    description: "",
-    subscription: {
-      // Only accept a single video stream
-      accepts: {
-        type: "single-stream",
-        media: Video
-      },
-      produces: {
-        type: "single-stream",
-        media: Video
-      }
-    },
-    extraValidation: function(ctx) {
-      ctx.requireVideo(1);
-    },
-    display: (desc) => {
-      return {
-        default: desc.config.initialBug ?? "none"
-      };
-    },
-    runtime: {
-      summary: SummaryView6,
-      initialState: () => ({}),
-      handleEvent: (ev, state) => {
-        const evType = ev.type;
-        switch (evType) {
-          case "bug-changed":
-            return { ...state, activeBug: { file: ev.file, position: ev.position } };
-          default:
-            assertUnreachable8(evType);
-        }
-      }
-    },
-    configForm: {
-      global: {
-        hardware: (0, import_config4.HardwareSelection)()
-      },
-      form: {
-        initialBug: {
-          help: "The initial bug to render on the video (if any)",
-          hint: {
-            type: "custom",
-            optional: true,
-            component: BugSelection2
-          }
-        },
-        initialPosition: {
-          help: "The initial location at which to render the bug",
-          hint: {
-            type: "select",
-            optional: true,
-            options: [
-              { value: "topleft", display: "Top Left" },
-              { value: "topright", display: "Top Right" },
-              { value: "bottomleft", display: "Bottom Left" },
-              { value: "bottomright", display: "Bottom Right" }
-            ]
-          }
-        }
-      }
-    }
-  });
-}
-function assertUnreachable8(_) {
-  throw new Error("Didn't expect to get here");
-}
-
-// build/processor.fixedLadder/info.js
-var import_react17 = __toESM(require_react());
-var import_config5 = __toESM(require_config());
-function info_default17({ defineComponent, Video }) {
-  const RungView = import_react17.default.lazy(async () => Promise.resolve().then(() => (init_rung_view(), rung_view_exports)));
-  const CodecEditor3 = import_react17.default.lazy(async () => Promise.resolve().then(() => (init_codec_editor(), codec_editor_exports)));
-  const CodecView = import_react17.default.lazy(async () => Promise.resolve().then(() => (init_codec_view(), codec_view_exports)));
+  const RungView = import_react14.default.lazy(async () => Promise.resolve().then(() => (init_rung_view(), rung_view_exports)));
+  const CodecEditor3 = import_react14.default.lazy(async () => Promise.resolve().then(() => (init_codec_editor(), codec_editor_exports)));
+  const CodecView = import_react14.default.lazy(async () => Promise.resolve().then(() => (init_codec_view(), codec_view_exports)));
   return defineComponent({
     identifier: "processor.fixedLadder",
     category: "processor",
@@ -16657,7 +16580,7 @@ function info_default17({ defineComponent, Video }) {
     },
     configForm: {
       global: {
-        hardware: (0, import_config5.HardwareSelection)()
+        hardware: (0, import_config4.HardwareSelection)()
       },
       form: {
         rungs: {
@@ -16779,7 +16702,7 @@ function createSoftwareRung(rung) {
     case "h264_320x180":
       return createRungImpl({ name: rung, threads: 1, bitrate: 800 });
     default:
-      return assertUnreachable9(rung);
+      return assertUnreachable8(rung);
   }
 }
 function createMa35dRung(rung) {
@@ -16793,7 +16716,7 @@ function createMa35dRung(rung) {
     case "h264_320x180":
       return createMa35DH264RungImpl({ name: rung, bitrate: 1e3 });
     default:
-      return assertUnreachable9(rung);
+      return assertUnreachable8(rung);
   }
 }
 function createNvidiaRung(rung) {
@@ -16807,7 +16730,7 @@ function createNvidiaRung(rung) {
     case "h264_320x180":
       return createNvidiaRungImpl({ name: rung, bitrate: 8e5 });
     default:
-      return assertUnreachable9(rung);
+      return assertUnreachable8(rung);
   }
 }
 function createQuadraRung(rung) {
@@ -16821,7 +16744,7 @@ function createQuadraRung(rung) {
     case "h264_320x180":
       return createQuadraRungImpl({ name: rung, bitrate: 8e5 });
     default:
-      return assertUnreachable9(rung);
+      return assertUnreachable8(rung);
   }
 }
 function createLoganRung(rung) {
@@ -16835,7 +16758,7 @@ function createLoganRung(rung) {
     case "h264_320x180":
       return createLoganRungImpl({ name: rung, bitrate: 8e5 });
     default:
-      return assertUnreachable9(rung);
+      return assertUnreachable8(rung);
   }
 }
 function createRungImpl({ name, threads, bitrate }) {
@@ -16933,6 +16856,83 @@ function rungWidth(rungName) {
 function rungHeight(rungName) {
   return parseInt(rungName.split("_")[1].split(`x`)[1]);
 }
+function assertUnreachable8(_) {
+  throw new Error("Didn't expect to get here");
+}
+
+// build/processor.onscreenGraphic/info.js
+var import_config5 = __toESM(require_config());
+var import_react17 = __toESM(require_react());
+function info_default17({ defineComponent, Video }) {
+  const GraphicSelection2 = import_react17.default.lazy(async () => Promise.resolve().then(() => (init_image_selection(), image_selection_exports)));
+  const SummaryView6 = import_react17.default.lazy(async () => Promise.resolve().then(() => (init_summary_view3(), summary_view_exports3)));
+  return defineComponent({
+    identifier: "processor.onscreenGraphic",
+    category: "processor",
+    name: "Onscreen Graphic",
+    description: "",
+    subscription: {
+      // Only accept a single video stream
+      accepts: {
+        type: "single-stream",
+        media: Video
+      },
+      produces: {
+        type: "single-stream",
+        media: Video
+      }
+    },
+    extraValidation: function(ctx) {
+      ctx.requireVideo(1);
+    },
+    display: (desc) => {
+      return {
+        default: desc.config.initialGraphic ?? "none"
+      };
+    },
+    runtime: {
+      summary: SummaryView6,
+      initialState: () => ({}),
+      handleEvent: (ev, state) => {
+        const evType = ev.type;
+        switch (evType) {
+          case "graphic-changed":
+            return { ...state, activeGraphic: { file: ev.file, position: ev.position } };
+          default:
+            assertUnreachable9(evType);
+        }
+      }
+    },
+    configForm: {
+      global: {
+        hardware: (0, import_config5.HardwareSelection)()
+      },
+      form: {
+        initialGraphic: {
+          help: "The initial graphic to render on the video (if any)",
+          hint: {
+            type: "custom",
+            optional: true,
+            component: GraphicSelection2
+          }
+        },
+        initialPosition: {
+          help: "The initial location at which to render the graphic",
+          hint: {
+            type: "select",
+            optional: true,
+            options: [
+              { value: "topleft", display: "Top Left" },
+              { value: "topright", display: "Top Right" },
+              { value: "bottomleft", display: "Bottom Left" },
+              { value: "bottomright", display: "Bottom Right" }
+            ]
+          }
+        }
+      }
+    }
+  });
+}
 function assertUnreachable9(_) {
   throw new Error("Didn't expect to get here");
 }

package/lib/info.js

@@ -47,9 +47,9 @@ const info_14 = __importDefault(require("./processor.browserOverlay/info"));
 AllComponents.push((r) => (0, info_14.default)(r));
 const info_15 = __importDefault(require("./processor.cascadingSwitch/info"));
 AllComponents.push((r) => (0, info_15.default)(r));
-const info_16 = __importDefault(require("./processor.dynamicBug/info"));
+const info_16 = __importDefault(require("./processor.fixedLadder/info"));
 AllComponents.push((r) => (0, info_16.default)(r));
-const info_17 = __importDefault(require("./processor.fixedLadder/info"));
+const info_17 = __importDefault(require("./processor.onscreenGraphic/info"));
 AllComponents.push((r) => (0, info_17.default)(r));
 const info_18 = __importDefault(require("./processor.whisper-transcribe/info"));
 AllComponents.push((r) => (0, info_18.default)(r));