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

package/Readme.adoc

@@ -0,0 +1,16 @@
+== workspaces/built-ins
+
+This built-ins directory contains a collection of the default components available for use within Studio.
+Its package.json builds a manifest for everything found in 'src' in src/index.ts, as well as building a client-side bundle for all of them.
+
+=== Structure
+
+Inside the 'src' folder, we have several subdirectories each containing components in a particular class:
+
+- Inputs: Modules that define how media streams are ingested.
+- Outputs: Modules that define how media streams are delivered to their destinations.
+- Processors: Modules that handle the transformation or analysis of media streams.
+
+Using Norsk Studio, we can combine these components to easily build even complex live media workflows.
+
+The documentation for each of the components can be found within the component's folder Readme.

package/client/info.js

@@ -695,56 +695,119 @@ var summary_view_exports3 = {};
 __export(summary_view_exports3, {
   default: () => summary_view_default3
 });
-function SummaryView5({ state, sendCommand, httpApi }) {
+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);
-  async function updateBugs() {
-    const result2 = await fetch("components/processor.dynamicBug/bugs");
-    if (result2.ok && result2.body) {
-      const bugs2 = await result2.json();
-      setBugs(bugs2);
-    } else {
-      const text = await result2.text();
-      throw new Error(text);
+  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 () => {
+    try {
+      const result2 = await fetch(`${urls.componentUrl}/bugs`);
+      if (result2.ok) {
+        const newBugs = await result2.json();
+        setBugs(newBugs);
+      } else {
+        throw new Error(await result2.text());
+      }
+    } catch (error) {
+      console.error("Failed to update bugs:", error);
+      setUploadStatus({
+        success: false,
+        message: "Failed to update bug list."
+      });
     }
-  }
+  }, [urls.componentUrl]);
   (0, import_react14.useEffect)(() => {
-    const fn = async () => {
-      await updateBugs();
-    };
-    fn().catch(console.error);
-  }, []);
-  function onFileChange(e) {
-    if (e.target.files?.[0])
-      setFileToUpload(e.target.files[0]);
-  }
-  return (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [(0, import_jsx_runtime15.jsx)("h2", { children: "Controls" }), (0, import_jsx_runtime15.jsx)("label", { htmlFor: "select-preview", className: "mt-2", children: "Source" }), (0, import_jsx_runtime15.jsxs)("select", { id: "select-bug", className: "mt-2 node-editor-select-input", onChange: (e) => {
-    setBug(e.currentTarget.value === "" ? void 0 : e.currentTarget.value);
-  }, children: [(0, import_jsx_runtime15.jsx)("option", { value: "", selected: bug === void 0, children: "---" }), (0, import_jsx_runtime15.jsx)("option", { value: "new", selected: bug === "new", children: "New" }), bugs.map((s, i) => (0, import_jsx_runtime15.jsx)("option", { selected: bug == s, value: s, children: s }, i))] }), (0, import_jsx_runtime15.jsx)("form", { style: { display: bug === "new" ? "block" : "none" }, onSubmit: (e) => e.preventDefault(), children: (0, import_jsx_runtime15.jsx)("input", { type: "file", id: "file", name: "filename", onChange: onFileChange }) }), (0, import_jsx_runtime15.jsxs)("select", { style: { display: bug ? "block" : "none" }, id: "select-position", className: "mt-2 node-editor-select-input", onChange: (e) => {
-    setPosition(e.currentTarget.value);
-  }, children: [(0, import_jsx_runtime15.jsx)("option", { value: "topleft", selected: position === "topleft", children: "Top Left" }), (0, import_jsx_runtime15.jsx)("option", { value: "topright", selected: position === "topright", children: "Top Right" }), (0, import_jsx_runtime15.jsx)("option", { value: "bottomleft", selected: position === "bottomleft", children: "Bottom Left" }), (0, import_jsx_runtime15.jsx)("option", { value: "bottomright", selected: position === "bottomright", children: "Bottom Right" })] }), bug != state.activeBug?.file || position != state.activeBug?.position || fileToUpload ? (0, import_jsx_runtime15.jsx)("button", { type: "button", className: "mt-2 mb-2 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", onClick: async (e) => {
-    e.preventDefault();
-    if (fileToUpload && bug === "new") {
+    updateBugs().catch(console.error);
+  }, [updateBugs]);
+  const onFileChange = (e) => {
+    const file = e.target.files?.[0];
+    setFileToUpload(file);
+    setShowUploadButton(!!file);
+    setUploadStatus({ success: false, message: null });
+  };
+  const uploadFile = async () => {
+    if (!fileToUpload)
+      return;
+    try {
       const form = new FormData();
-      const url = httpApi.toString() + "/bugs";
       form.append("file", fileToUpload);
-      await fetch(url, {
+      const response = await fetch(`${urls.componentUrl}/bugs`, {
         method: "POST",
         body: form
       });
-      setTimeout(async () => {
-        await updateBugs();
-        sendCommand({ type: "change-bug", file: fileToUpload.name, position });
-        setBug(fileToUpload.name);
+      if (response.status === 409) {
+        const errorData = await response.json();
+        setUploadStatus({
+          success: false,
+          message: `${errorData.error}. Delete the existing bug first if you want to replace it.`
+        });
+      } else if (!response.ok) {
+        throw new Error("Upload failed");
+      } else {
         setFileToUpload(void 0);
-        return;
-      }, 500);
-    } else {
-      sendCommand({ type: "change-bug", file: bug, position });
+        setShowFileInput(false);
+        setUploadStatus({
+          success: true,
+          message: "Bug uploaded successfully!"
+        });
+        await updateBugs();
+      }
+    } catch (error) {
+      console.error("Failed to upload file:", error);
+      setUploadStatus({ success: false, message: "Failed to upload bug." });
+    }
+    setTimeout(() => setUploadStatus({ success: false, message: null }), 5e3);
+  };
+  const deleteBug = async () => {
+    if (!bugToDelete)
+      return;
+    try {
+      const response = await fetch(`${urls.componentUrl}/bug`, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ filename: bugToDelete })
+      });
+      if (response.ok) {
+        setUploadStatus({
+          success: true,
+          message: "Bug deleted successfully!"
+        });
+        await updateBugs();
+        if (bug === bugToDelete) {
+          setBug(void 0);
+          sendCommand({
+            type: "change-bug",
+            file: void 0,
+            position: void 0
+          });
+        }
+        setBugToDelete("");
+        setShowDeleteDropdown(false);
+      } else {
+        const errorData = await response.json();
+        setUploadStatus({
+          success: false,
+          message: errorData.error || "Failed to delete bug"
+        });
+      }
+    } catch (error) {
+      console.error("Failed to delete bug:", error);
+      setUploadStatus({ success: false, message: "Failed to delete bug" });
     }
-  }, children: "Commit" }) : (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {})] });
+    setTimeout(() => setUploadStatus({ success: false, message: null }), 3e3);
+  };
+  const buttonClass = "mt-2 mb-5 text-white w-full justify-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800";
+  const deleteButtonClass = "mt-2 text-white w-full justify-center bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-700 dark:hover:bg-red-800 dark:focus:ring-red-900";
+  const fileInputClass = "block w-full text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400";
+  return (0, import_jsx_runtime15.jsxs)("div", { className: "space-y-3", children: [(0, import_jsx_runtime15.jsx)("h2", { className: "text-xl font-bold text-gray-900 dark:text-white", children: "Controls" }), (0, import_jsx_runtime15.jsxs)("div", { children: [(0, import_jsx_runtime15.jsx)("label", { htmlFor: "select-bug", className: "block text-gray-900 dark:text-white mb-1", children: "Source" }), (0, import_jsx_runtime15.jsxs)("select", { id: "select-bug", className: "w-full node-editor-select-input", value: bug || "", onChange: (e) => setBug(e.target.value || void 0), children: [(0, import_jsx_runtime15.jsx)("option", { value: "", children: "---" }), bugs.map((s) => (0, import_jsx_runtime15.jsx)("option", { value: s, children: s }, s))] })] }), bug && (0, import_jsx_runtime15.jsxs)("div", { children: [(0, import_jsx_runtime15.jsx)("label", { htmlFor: "select-position", className: "block text-gray-900 dark:text-white mb-1", children: "Position" }), (0, import_jsx_runtime15.jsxs)("select", { id: "select-position", className: "w-full node-editor-select-input", value: position, onChange: (e) => setPosition(e.target.value), children: [(0, import_jsx_runtime15.jsx)("option", { value: "topleft", children: "Top Left" }), (0, import_jsx_runtime15.jsx)("option", { value: "topright", children: "Top Right" }), (0, import_jsx_runtime15.jsx)("option", { value: "bottomleft", children: "Bottom Left" }), (0, import_jsx_runtime15.jsx)("option", { value: "bottomright", children: "Bottom Right" })] })] }), (bug !== state.activeBug?.file || position !== state.activeBug?.position) && (0, import_jsx_runtime15.jsx)("button", { type: "button", className: buttonClass, onClick: () => sendCommand({ type: "change-bug", file: bug, position }), children: "Commit" }), !showFileInput && !uploadStatus.success && (0, import_jsx_runtime15.jsx)("button", { type: "button", className: buttonClass, onClick: () => setShowFileInput(true), style: { marginBottom: "1rem" }, children: "Upload  Bug" }), showFileInput && (0, import_jsx_runtime15.jsxs)("form", { style: { display: "block", marginBottom: "1rem" }, children: [(0, import_jsx_runtime15.jsx)("input", { type: "file", id: "file", name: "filename", onChange: onFileChange, className: fileInputClass }), showUploadButton && (0, import_jsx_runtime15.jsx)("button", { type: "button", className: buttonClass, onClick: uploadFile, children: "Upload" })] }), (0, import_jsx_runtime15.jsx)("button", { type: "button", className: deleteButtonClass, onClick: () => setShowDeleteDropdown(!showDeleteDropdown), style: { marginBottom: "1rem" }, children: showDeleteDropdown ? "Hide Delete Options" : "Delete Bugs" }), showDeleteDropdown && (0, import_jsx_runtime15.jsxs)("div", { className: "mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg", children: [(0, import_jsx_runtime15.jsx)("h3", { className: "text-lg font-semibold mb-2 text-gray-900 dark:text-white", children: "Select Bug to Delete" }), (0, import_jsx_runtime15.jsxs)("select", { className: "w-full mb-2 node-editor-select-input", value: bugToDelete, onChange: (e) => setBugToDelete(e.target.value), children: [(0, import_jsx_runtime15.jsx)("option", { value: "", children: " Select a bug" }), bugs.map((bugName) => (0, import_jsx_runtime15.jsx)("option", { value: bugName, children: bugName }, bugName))] }), (0, import_jsx_runtime15.jsx)("button", { onClick: deleteBug, disabled: !bugToDelete, className: `${deleteButtonClass} ${!bugToDelete ? "opacity-50 cursor-not-allowed" : ""}`, children: "Delete Selected Bug" })] }), uploadStatus.message && (0, import_jsx_runtime15.jsx)("div", { className: `mt-2 text-center ${uploadStatus.success ? "text-green-600" : "text-red-600"}`, children: uploadStatus.message })] });
 }
 var import_jsx_runtime15, import_react14, summary_view_default3;
 var init_summary_view3 = __esm({
@@ -4339,7 +4402,7 @@ function getAxisItems(chart, position, axis, intersect, useFinalPosition) {
   const rangeMethod = axis === "x" ? "inXRange" : "inYRange";
   let intersectsItem = false;
   evaluateInteractionItems(chart, axis, position, (element, datasetIndex, index2) => {
-    if (element[rangeMethod](position[axis], useFinalPosition)) {
+    if (element[rangeMethod] && element[rangeMethod](position[axis], useFinalPosition)) {
       items.push({
         element,
         datasetIndex,
@@ -8248,8 +8311,10 @@ var init_chart = __esm({
         const metasets = iScale.getMatchingVisibleMetas(this._type).filter((meta) => meta.controller.options.grouped);
         const stacked = iScale.options.stacked;
         const stacks = [];
+        const currentParsed = this._cachedMeta.controller.getParsed(dataIndex);
+        const iScaleValue = currentParsed && currentParsed[iScale.axis];
         const skipNull = (meta) => {
-          const parsed = meta.controller.getParsed(dataIndex);
+          const parsed = meta._parsed.find((item) => item[iScale.axis] === iScaleValue);
           const val = parsed && parsed[meta.vScale.axis];
           if (isNullOrUndef(val) || isNaN(val)) {
             return true;
@@ -11181,7 +11246,7 @@ var init_chart = __esm({
       }
     };
     hasFunction = (value) => isObject(value) && Object.getOwnPropertyNames(value).some((key) => isFunction(value[key]));
-    version = "4.4.3";
+    version = "4.4.4";
     KNOWN_POSITIONS = [
       "top",
       "bottom",
@@ -11641,8 +11706,8 @@ var init_chart = __esm({
         let i;
         if (this._resizeBeforeDraw) {
           const { width, height } = this._resizeBeforeDraw;
-          this._resize(width, height);
           this._resizeBeforeDraw = null;
+          this._resize(width, height);
         }
         this.clear();
         if (this.width <= 0 || this.height <= 0) {
@@ -12082,7 +12147,8 @@ var init_chart = __esm({
         ], useFinalPosition);
         const rAdjust = (this.options.spacing + this.options.borderWidth) / 2;
         const _circumference = valueOrDefault(circumference, endAngle - startAngle);
-        const betweenAngles = _circumference >= TAU || _angleBetween(angle, startAngle, endAngle);
+        const nonZeroBetween = _angleBetween(angle, startAngle, endAngle) && startAngle !== endAngle;
+        const betweenAngles = _circumference >= TAU || nonZeroBetween;
         const withinRadius = _isBetween(distance, innerRadius + rAdjust, outerRadius + rAdjust);
         return betweenAngles && withinRadius;
       }
@@ -13316,6 +13382,9 @@ var init_chart = __esm({
             ++count;
           }
         }
+        if (count === 0 || xSet.size === 0) {
+          return false;
+        }
         const xAverage = [
           ...xSet
         ].reduce((a, b) => a + b) / xSet.size;
@@ -14642,7 +14711,7 @@ var init_chart = __esm({
             ctx.strokeStyle = color2;
             ctx.setLineDash(optsAtIndex.borderDash);
             ctx.lineDashOffset = optsAtIndex.borderDashOffset;
-            offset = this.getDistanceFromCenterForValue(opts.ticks.reverse ? this.min : this.max);
+            offset = this.getDistanceFromCenterForValue(opts.reverse ? this.min : this.max);
             position = this.getPointPosition(i, offset);
             ctx.beginPath();
             ctx.moveTo(this.xCenter, this.yCenter);
@@ -15144,7 +15213,7 @@ var init_auto = __esm({
   }
 });
 
-// build/util.latency/inline-view.js
+// build/util.stats.latency/inline-view.js
 var inline_view_exports7 = {};
 __export(inline_view_exports7, {
   default: () => inline_view_default7
@@ -15215,7 +15284,7 @@ function InlineView10({ state, config: _2 }) {
 }
 var import_jsx_runtime19, import_react18, inline_view_default7;
 var init_inline_view7 = __esm({
-  "build/util.latency/inline-view.js"() {
+  "build/util.stats.latency/inline-view.js"() {
     "use strict";
     import_jsx_runtime19 = __toESM(require_jsx_runtime());
     import_react18 = __toESM(require_react());
@@ -15224,7 +15293,7 @@ var init_inline_view7 = __esm({
   }
 });
 
-// build/util.latency/source-node-selection.js
+// build/util.stats.latency/source-node-selection.js
 var source_node_selection_exports = {};
 __export(source_node_selection_exports, {
   default: () => source_node_selection_default
@@ -15243,14 +15312,14 @@ function SourceNodeSelection(props) {
 }
 var import_jsx_runtime20, source_node_selection_default;
 var init_source_node_selection = __esm({
-  "build/util.latency/source-node-selection.js"() {
+  "build/util.stats.latency/source-node-selection.js"() {
     "use strict";
     import_jsx_runtime20 = __toESM(require_jsx_runtime());
     source_node_selection_default = SourceNodeSelection;
   }
 });
 
-// build/util.ma35d/inline-view.js
+// build/util.stats.ma35d/inline-view.js
 var inline_view_exports8 = {};
 __export(inline_view_exports8, {
   default: () => inline_view_default8
@@ -15325,7 +15394,7 @@ function InlineView11({ state, config: _2 }) {
 }
 var import_jsx_runtime21, import_react20, inline_view_default8;
 var init_inline_view8 = __esm({
-  "build/util.ma35d/inline-view.js"() {
+  "build/util.stats.ma35d/inline-view.js"() {
     "use strict";
     import_jsx_runtime21 = __toESM(require_jsx_runtime());
     import_react20 = __toESM(require_react());
@@ -15450,6 +15519,7 @@ function info_default({ defineComponent, Av, validation: { Z, Port, SourceName,
     identifier: "input.rtmp",
     category: "input",
     name: "RTMP Ingest",
+    description: "A component that listens for RTMP input on the address specified.",
     subscription: {
       accepts: void 0,
       produces: {
@@ -16295,7 +16365,7 @@ function info_default13(R) {
 var import_config3 = __toESM(require_config());
 function info_default14({ defineComponent, Video, validation: { Z } }) {
   return defineComponent({
-    identifier: "processor.transform.browserOverlay",
+    identifier: "processor.browserOverlay",
     category: "processor",
     name: "Browser Overlay",
     subscription: {
@@ -16333,7 +16403,7 @@ function info_default15({ defineComponent, Av, React: React14, common: { Resolut
   const SourceSelection = React14.lazy(async () => Promise.resolve().then(() => (init_source_selection(), source_selection_exports)));
   const InlineView13 = React14.lazy(async () => Promise.resolve().then(() => (init_inline_view6(), inline_view_exports6)));
   return defineComponent({
-    identifier: "processor.control.cascadingSwitch",
+    identifier: "processor.cascadingSwitch",
     category: "processor",
     name: "Cascading Switch",
     subscription: {
@@ -16474,6 +16544,7 @@ function info_default16({ defineComponent, Video }) {
     identifier: "processor.dynamicBug",
     category: "processor",
     name: "Dynamic Bug",
+    description: "",
     subscription: {
       // Only accept a single video stream
       accepts: {
@@ -16490,7 +16561,7 @@ function info_default16({ defineComponent, Video }) {
     },
     display: (desc) => {
       return {
-        default: desc.config.defaultBug ?? "none"
+        default: desc.config.initialBug ?? "none"
       };
     },
     runtime: {
@@ -16511,15 +16582,16 @@ function info_default16({ defineComponent, Video }) {
         hardware: (0, import_config4.HardwareSelection)()
       },
       form: {
-        defaultBug: {
-          help: "The default bug to render on the video (if any)",
+        initialBug: {
+          help: "The initial bug to render on the video (if any)",
           hint: {
             type: "custom",
+            optional: true,
             component: BugSelection2
           }
         },
-        defaultPosition: {
-          help: "The default location to render the bug in",
+        initialPosition: {
+          help: "The initial location at which to render the bug",
           hint: {
             type: "select",
             optional: true,
@@ -16547,7 +16619,7 @@ function info_default17({ defineComponent, Video }) {
   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)));
   return defineComponent({
-    identifier: "processor.transform.fixedLadder",
+    identifier: "processor.fixedLadder",
     category: "processor",
     name: "Encode Ladder",
     subscription: {
@@ -16907,14 +16979,14 @@ function info_default18({ defineComponent, Av, Subtitle, validation: { Z } }) {
   });
 }
 
-// build/util.latency/info.js
+// build/util.stats.latency/info.js
 var import_react19 = __toESM(require_react());
 function info_default19(R) {
   const { defineComponent } = R;
   const InlineView13 = import_react19.default.lazy(async () => Promise.resolve().then(() => (init_inline_view7(), inline_view_exports7)));
   const SourceNodeSelection2 = import_react19.default.lazy(async () => Promise.resolve().then(() => (init_source_node_selection(), source_node_selection_exports)));
   return defineComponent({
-    identifier: "util.latency-stats",
+    identifier: "util.stats.latency",
     category: "output",
     name: "Latency Probe",
     subscription: {
@@ -16997,13 +17069,13 @@ function assertUnreachable10(_) {
   throw new Error("Didn't expect to get here");
 }
 
-// build/util.ma35d/info.js
+// build/util.stats.ma35d/info.js
 var import_react21 = __toESM(require_react());
 function info_default20(R) {
   const { defineComponent } = R;
   const InlineView13 = import_react21.default.lazy(async () => Promise.resolve().then(() => (init_inline_view8(), inline_view_exports8)));
   return defineComponent({
-    identifier: "util.ma35d-stats",
+    identifier: "util.stats.ma35d",
     category: "output",
     name: "MA35D Stats",
     subscription: {
@@ -17153,7 +17225,7 @@ export {
 
 chart.js/dist/chunks/helpers.segment.js:
   (*!
-   * Chart.js v4.4.3
+   * Chart.js v4.4.4
    * https://www.chartjs.org
    * (c) 2024 Chart.js Contributors
    * Released under the MIT License
@@ -17161,7 +17233,7 @@ chart.js/dist/chunks/helpers.segment.js:
 
 chart.js/dist/chart.js:
   (*!
-   * Chart.js v4.4.3
+   * Chart.js v4.4.4
    * https://www.chartjs.org
    * (c) 2024 Chart.js Contributors
    * Released under the MIT License

package/client/style.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -941,6 +941,10 @@ input[type="range"]::-ms-fill-lower {
   grid-column: span 2 / span 2;
 }
 
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1022,6 +1026,10 @@ input[type="range"]::-ms-fill-lower {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1046,6 +1054,12 @@ input[type="range"]::-ms-fill-lower {
   justify-content: center;
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1074,6 +1088,20 @@ input[type="range"]::-ms-fill-lower {
   border-end-start-radius: 0.5rem;
 }
 
+.border {
+  border-width: 1px;
+}
+
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .bg-gray-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -1089,10 +1117,19 @@ input[type="range"]::-ms-fill-lower {
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
 
+.bg-red-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 36 36 / var(--tw-bg-opacity));
+}
+
 .stroke-gray-700 {
   stroke: #374151;
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
 .px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
@@ -1107,15 +1144,33 @@ input[type="range"]::-ms-fill-lower {
   text-align: center;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
 .font-medium {
   font-weight: 500;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
 .leading-6 {
   line-height: 1.5rem;
 }
@@ -1129,21 +1184,40 @@ input[type="range"]::-ms-fill-lower {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
 .text-green-300 {
   --tw-text-opacity: 1;
   color: rgb(132 225 188 / var(--tw-text-opacity));
 }
 
+.text-green-600 {
+  --tw-text-opacity: 1;
+  color: rgb(5 122 85 / var(--tw-text-opacity));
+}
+
 .text-orange-300 {
   --tw-text-opacity: 1;
   color: rgb(253 186 140 / var(--tw-text-opacity));
 }
 
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(224 36 36 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.opacity-50 {
+  opacity: 0.5;
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1345,6 +1419,11 @@ input[type="range"]::-ms-fill-lower {
   background-color: rgb(30 64 175 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-red-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(200 30 30 / var(--tw-bg-opacity));
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1361,6 +1440,16 @@ input[type="range"]::-ms-fill-lower {
   --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-red-300:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(248 180 180 / var(--tw-ring-opacity));
+}
+
+.dark\:border-gray-600:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
 .dark\:bg-black:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1371,15 +1460,30 @@ input[type="range"]::-ms-fill-lower {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-gray-800:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-primary-600:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-red-700:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(200 30 30 / var(--tw-bg-opacity));
+}
+
 .dark\:stroke-gray-50:is(.dark *) {
   stroke: #F9FAFB;
 }
 
+.dark\:text-gray-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 .dark\:text-green-300:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(132 225 188 / var(--tw-text-opacity));
@@ -1395,12 +1499,32 @@ input[type="range"]::-ms-fill-lower {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.dark\:placeholder-gray-400:is(.dark *)::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-placeholder-opacity));
+}
+
+.dark\:placeholder-gray-400:is(.dark *)::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-placeholder-opacity));
+}
+
 .dark\:hover\:bg-primary-700:hover:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
 
+.dark\:hover\:bg-red-800:hover:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(155 28 28 / var(--tw-bg-opacity));
+}
+
 .dark\:focus\:ring-primary-800:focus:is(.dark *) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
 }
+
+.dark\:focus\:ring-red-900:focus:is(.dark *) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(119 29 29 / var(--tw-ring-opacity));
+}

package/lib/info.js

@@ -53,9 +53,9 @@ const info_17 = __importDefault(require("./processor.fixedLadder/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));
-const info_19 = __importDefault(require("./util.latency/info"));
+const info_19 = __importDefault(require("./util.stats.latency/info"));
 AllComponents.push((r) => (0, info_19.default)(r));
-const info_20 = __importDefault(require("./util.ma35d/info"));
+const info_20 = __importDefault(require("./util.stats.ma35d/info"));
 AllComponents.push((r) => (0, info_20.default)(r));
 const info_21 = __importDefault(require("./util.timestamps/info"));
 AllComponents.push((r) => (0, info_21.default)(r));