@arcanewizards/timecode-toolbox 0.1.1 → 0.1.2

package/dist/frontend.js

@@ -25238,8 +25238,8 @@
     return t4;
   };
 
-  // ../../packages/sigil/dist/chunk-HF7IIHPE.js
-  var import_compiler_runtime5 = __toESM(require_compiler_runtime(), 1);
+  // ../../packages/sigil/dist/chunk-E3VUC3Q4.js
+  var import_compiler_runtime4 = __toESM(require_compiler_runtime(), 1);
 
   // ../../packages/sigil/dist/chunk-BIY5HAXP.js
   var import_compiler_runtime2 = __toESM(require_compiler_runtime(), 1);
@@ -31306,10 +31306,6 @@
     return t1;
   };
 
-  // ../../packages/sigil/dist/chunk-H4U4Z4GM.js
-  var import_compiler_runtime4 = __toESM(require_compiler_runtime(), 1);
-  var import_react11 = __toESM(require_react(), 1);
-
   // ../../node_modules/.pnpm/zod@3.25.76/node_modules/zod/v3/external.js
   var external_exports = {};
   __export(external_exports, {
@@ -35354,7 +35350,7 @@
   // ../../node_modules/.pnpm/zod@3.25.76/node_modules/zod/index.js
   var zod_default = external_exports;
 
-  // ../../packages/sigil/dist/chunk-H4U4Z4GM.js
+  // ../../packages/sigil/dist/chunk-WYUGJOEB.js
   var SIGIL_COLOR = external_exports.enum(["purple", "blue", "teal", "red", "green", "yellow", "brown", "orange", "gray"]);
   var sigilColorUsage = (color) => ({
     text: `var(--sigil-usage-${color}-text)`,
@@ -35385,38 +35381,13 @@
     [`--${prefix}-gradient-dark`]: usage.gradientDark
   });
   var cssHintColorVariables = (color) => cssSigilColorUsageVariables(`sigil-usage-hint`, sigilColorUsage(color));
-  var useRootHintVariables = (color) => {
-    const $ = (0, import_compiler_runtime4.c)(3);
-    let t0;
-    let t1;
-    if ($[0] !== color) {
-      t0 = () => {
-        const root = document.querySelector(".arcane-theme-root");
-        if (!root) {
-          return;
-        }
-        Object.entries(cssHintColorVariables(color)).forEach((t2) => {
-          const [key, value] = t2;
-          root.style.setProperty(key, value);
-        });
-      };
-      t1 = [color];
-      $[0] = color;
-      $[1] = t0;
-      $[2] = t1;
-    } else {
-      t0 = $[1];
-      t1 = $[2];
-    }
-    (0, import_react11.useEffect)(t0, t1);
-  };
   var cssVariables = (variables) => variables;
   function cnd(condition, truthyClassName, falseyClassName) {
     return condition ? truthyClassName : falseyClassName;
   }
 
-  // ../../packages/sigil/dist/chunk-HF7IIHPE.js
-  var import_react12 = __toESM(require_react(), 1);
+  // ../../packages/sigil/dist/chunk-E3VUC3Q4.js
+  var import_react11 = __toESM(require_react(), 1);
 
   // ../../node_modules/.pnpm/@arcanejs+toolkit-frontend@0.11.0/node_modules/@arcanejs/toolkit-frontend/dist/chunk-DK4BAXVE.mjs
   var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
@@ -35454,16 +35425,16 @@
 `;
   var TRANSPARENCY_SVG_URI = `data:image/svg+xml,${encodeURIComponent(TRANSPARENCY_SVG)}`;
 
-  // ../../packages/sigil/dist/chunk-HF7IIHPE.js
-  var import_react13 = __toESM(require_react(), 1);
+  // ../../packages/sigil/dist/chunk-E3VUC3Q4.js
+  var import_react12 = __toESM(require_react(), 1);
   var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
-  var import_react14 = __toESM(require_react(), 1);
+  var import_react13 = __toESM(require_react(), 1);
   var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
-  var import_react15 = __toESM(require_react(), 1);
+  var import_react14 = __toESM(require_react(), 1);
   var import_jsx_runtime20 = __toESM(require_jsx_runtime(), 1);
-  var import_react16 = __toESM(require_react(), 1);
+  var import_react15 = __toESM(require_react(), 1);
   var import_jsx_runtime21 = __toESM(require_jsx_runtime(), 1);
-  var import_react17 = __toESM(require_react(), 1);
+  var import_react16 = __toESM(require_react(), 1);
   var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
   var import_jsx_runtime23 = __toESM(require_jsx_runtime(), 1);
   var clsControlPosition = (position) => {
@@ -35517,7 +35488,7 @@
     className,
     primary
   }) => cn(`sigil-control-button`, cnd(variant === "border", `sigil-control-button-variant-border`), cnd(variant === "large", `sigil-control-button-variant-large`), cnd(variant === "properties", `sigil-control-button-variant-properties`), cnd(variant === "table-row", `sigil-control-button-variant-table-row`), cnd(variant === "toolbar", `sigil-control-button-variant-toolbar`), cnd(variant === "titlebar", `sigil-control-button-variant-titlebar`), cnd(touching, `sigil-control-button-touching`), cnd(active, `sigil-control-button-active`), cnd(touching && active, `sigil-control-button-active-touching`), cnd(primary, `sigil-control-button-primary`), clsControlPosition(position), className);
-  var ControlButtonFrame = /* @__PURE__ */ (0, import_react13.forwardRef)(({
+  var ControlButtonFrame = /* @__PURE__ */ (0, import_react12.forwardRef)(({
     children,
     className,
     type,
@@ -35560,7 +35531,7 @@
     });
   });
   ControlButtonFrame.displayName = "ControlButtonFrame";
-  var ControlButton = /* @__PURE__ */ (0, import_react13.forwardRef)(({
+  var ControlButton = /* @__PURE__ */ (0, import_react12.forwardRef)(({
     onClick,
     disabled,
     ...props
@@ -35578,7 +35549,7 @@
     });
   });
   ControlButton.displayName = "ControlButton";
-  var CheckboxControlButton = /* @__PURE__ */ (0, import_react13.forwardRef)(({
+  var CheckboxControlButton = /* @__PURE__ */ (0, import_react12.forwardRef)(({
     active,
     label,
     ...props
@@ -35591,7 +35562,7 @@
     }), label]
   }));
   CheckboxControlButton.displayName = "CheckboxControlButton";
-  var LongPressableControlButton = /* @__PURE__ */ (0, import_react13.forwardRef)(({
+  var LongPressableControlButton = /* @__PURE__ */ (0, import_react12.forwardRef)(({
     active,
     disabled,
     onPress,
@@ -35614,7 +35585,7 @@
     });
   });
   LongPressableControlButton.displayName = "LongPressableControlButton";
-  var ControlButtonGroup = /* @__PURE__ */ (0, import_react13.forwardRef)(({
+  var ControlButtonGroup = /* @__PURE__ */ (0, import_react12.forwardRef)(({
     children,
     className,
     position,
@@ -35629,7 +35600,7 @@
     children
   }));
   ControlButtonGroup.displayName = "ControlButtonGroup";
-  var ControlParagraph = /* @__PURE__ */ (0, import_react14.forwardRef)(({
+  var ControlParagraph = /* @__PURE__ */ (0, import_react13.forwardRef)(({
     className,
     mode,
     position = "all",
@@ -35650,7 +35621,7 @@
         `), className)
   }));
   ControlParagraph.displayName = "ControlParagraph";
-  var ControlLabel = /* @__PURE__ */ (0, import_react14.forwardRef)(({
+  var ControlLabel = /* @__PURE__ */ (0, import_react13.forwardRef)(({
     className,
     disabled,
     nonMicro,
@@ -35665,7 +35636,7 @@
     });
   });
   ControlLabel.displayName = "ControlLabel";
-  var ControlDetails = /* @__PURE__ */ (0, import_react14.forwardRef)(({
+  var ControlDetails = /* @__PURE__ */ (0, import_react13.forwardRef)(({
     align,
     className,
     position = "all",
@@ -35676,7 +35647,7 @@
     className: cn("flex items-center px-0.3 text-sigil-foreground-muted", clsControlPosition(position), cnd(align === "start", "justify-start"), cnd(align === "center", "justify-center"), cnd(align === "end", "justify-end"), className)
   }));
   ControlDetails.displayName = "ControlDetails";
-  var InputSpanningTitle = /* @__PURE__ */ (0, import_react14.forwardRef)(({
+  var InputSpanningTitle = /* @__PURE__ */ (0, import_react13.forwardRef)(({
     className,
     position = "row",
     ...props
@@ -35686,7 +35657,7 @@
     className: cn("truncate p-0.6 text-center text-[0.8rem] font-bold", clsControlPosition(position), className)
   }));
   InputSpanningTitle.displayName = "InputSpanningTitle";
-  var ControlDialogButtons = /* @__PURE__ */ (0, import_react15.forwardRef)(({
+  var ControlDialogButtons = /* @__PURE__ */ (0, import_react14.forwardRef)(({
     children,
     className,
     ...props
@@ -35715,29 +35686,29 @@
     inputRef: inputRefProp,
     ...props
   }) => {
-    const lastValue = (0, import_react16.useRef)(value);
-    const inputRef = (0, import_react16.useRef)(null);
-    (0, import_react16.useEffect)(() => {
+    const lastValue = (0, import_react15.useRef)(value);
+    const inputRef = (0, import_react15.useRef)(null);
+    (0, import_react15.useEffect)(() => {
       if (inputRef.current && inputRef.current.value !== value) {
         inputRef.current.value = value;
       }
       lastValue.current = value;
     }, [value]);
-    const updateRef = (0, import_react16.useCallback)((instance) => {
+    const updateRef = (0, import_react15.useCallback)((instance) => {
       inputRef.current = instance;
       if (inputRefProp) {
         inputRefProp.current = instance;
       }
     }, [inputRefProp]);
     const onBlurProp = props.onBlur;
-    const onBlur = (0, import_react16.useCallback)((e) => {
+    const onBlur = (0, import_react15.useCallback)((e) => {
       if (e.currentTarget.value !== lastValue.current) {
         onChange(e.currentTarget.value, false);
       }
       onBlurProp?.(e);
     }, [onChange, onBlurProp]);
     const onKeyUpProp = props.onKeyUp;
-    const onKeyUp = (0, import_react16.useCallback)((e_0) => {
+    const onKeyUp = (0, import_react15.useCallback)((e_0) => {
       if ((e_0.key === "Enter" || e_0.key.startsWith("Arrow")) && e_0.currentTarget.value !== lastValue.current) {
         onChange(e_0.currentTarget.value, true);
       }
@@ -35775,7 +35746,7 @@
   });
   var NULL_VALUE = "__null_value__";
   var ControlSelect = (t0) => {
-    const $ = (0, import_compiler_runtime5.c)(20);
+    const $ = (0, import_compiler_runtime4.c)(20);
     const {
       options,
       value,
@@ -35986,7 +35957,7 @@
     });
   };
   var isDarkDialog = (variant) => variant === "dark" || variant === "dark-compact";
-  var DialogTitle = /* @__PURE__ */ (0, import_react12.forwardRef)(({
+  var DialogTitle = /* @__PURE__ */ (0, import_react11.forwardRef)(({
     className,
     variant = "light",
     ...props
@@ -35999,7 +35970,7 @@
         `, cnd(isDarkDialog(variant), "bg-sigil-bg-light", "bg-sigil-bg-dark"), className)
   }));
   DialogTitle.displayName = "DialogTitle";
-  var DialogButtons = /* @__PURE__ */ (0, import_react12.forwardRef)(({
+  var DialogButtons = /* @__PURE__ */ (0, import_react11.forwardRef)(({
     className,
     ...props
   }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", {
@@ -36009,7 +35980,7 @@
   }));
   DialogButtons.displayName = "DialogButtons";
   var Dialog = (t0) => {
-    const $ = (0, import_compiler_runtime5.c)(19);
+    const $ = (0, import_compiler_runtime4.c)(19);
     const {
       children,
       dialogClosed,
@@ -36019,7 +35990,7 @@
     } = t0;
     const closable = t1 === void 0 ? true : t1;
     const variant = t2 === void 0 ? "light" : t2;
-    const [dialogRef, setDialogRef] = (0, import_react12.useState)(null);
+    const [dialogRef, setDialogRef] = (0, import_react11.useState)(null);
     let t3;
     let t4;
     if ($[0] !== dialogRef) {
@@ -36037,7 +36008,7 @@
       t3 = $[1];
       t4 = $[2];
     }
-    (0, import_react12.useEffect)(t3, t4);
+    (0, import_react11.useEffect)(t3, t4);
     let t5;
     if ($[3] !== dialogRef) {
       t5 = () => dialogRef?.close();
@@ -36123,27 +36094,27 @@
   var isCoreComponent = (component) => component.namespace === "core";
 
   // ../../node_modules/.pnpm/@arcanejs+toolkit-frontend@0.11.0/node_modules/@arcanejs/toolkit-frontend/dist/components/index.mjs
+  var import_react17 = __toESM(require_react(), 1);
   var import_react18 = __toESM(require_react(), 1);
-  var import_react19 = __toESM(require_react(), 1);
   var import_jsx_runtime24 = __toESM(require_jsx_runtime(), 1);
+  var import_react19 = __toESM(require_react(), 1);
   var import_react20 = __toESM(require_react(), 1);
-  var import_react21 = __toESM(require_react(), 1);
   var import_jsx_runtime25 = __toESM(require_jsx_runtime(), 1);
   var import_jsx_runtime26 = __toESM(require_jsx_runtime(), 1);
   var import_jsx_runtime27 = __toESM(require_jsx_runtime(), 1);
   var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1);
-  var import_react22 = __toESM(require_react(), 1);
+  var import_react21 = __toESM(require_react(), 1);
   var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
-  var import_react23 = __toESM(require_react(), 1);
+  var import_react22 = __toESM(require_react(), 1);
   var import_jsx_runtime30 = __toESM(require_jsx_runtime(), 1);
-  var import_react24 = __toESM(require_react(), 1);
+  var import_react23 = __toESM(require_react(), 1);
   var import_jsx_runtime31 = __toESM(require_jsx_runtime(), 1);
-  var import_react25 = __toESM(require_react(), 1);
+  var import_react24 = __toESM(require_react(), 1);
   var import_jsx_runtime32 = __toESM(require_jsx_runtime(), 1);
-  var import_react26 = __toESM(require_react(), 1);
+  var import_react25 = __toESM(require_react(), 1);
   var import_jsx_runtime33 = __toESM(require_jsx_runtime(), 1);
   var import_jsx_runtime34 = __toESM(require_jsx_runtime(), 1);
-  var StageContext = (0, import_react19.createContext)(
+  var StageContext = (0, import_react18.createContext)(
     new Proxy({}, {
       get: () => {
         throw new Error("Missing StageContext.Provider");
@@ -36151,8 +36122,8 @@
     })
   );
   var Button = (props) => {
-    const { call } = import_react18.default.useContext(StageContext);
-    const [localState, setLocalState] = import_react18.default.useState(null);
+    const { call } = import_react17.default.useContext(StageContext);
+    const [localState, setLocalState] = import_react17.default.useState(null);
     const state = localState ?? props.info.state;
     const { touching, handlers } = usePressable(async () => {
       try {
@@ -36223,9 +36194,9 @@
         return "dark";
     }
   }
-  var LastNestedColor = import_react21.default.createContext("dark");
+  var LastNestedColor = import_react20.default.createContext("dark");
   var NestedContent = ({ className, children }) => {
-    const color = import_react21.default.useContext(LastNestedColor);
+    const color = import_react20.default.useContext(LastNestedColor);
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "div",
       {
@@ -36241,7 +36212,7 @@
     );
   };
   NestedContent.displayName = "NestedContent";
-  var GroupStateContext = import_react20.default.createContext({
+  var GroupStateContext = import_react19.default.createContext({
     isCollapsed: () => {
       throw new Error("missing GroupStateContext");
     },
@@ -36250,7 +36221,7 @@
     }
   });
   var GroupStateWrapper = ({ openByDefault, children }) => {
-    const [state, setState] = (0, import_react20.useState)({});
+    const [state, setState] = (0, import_react19.useState)({});
     const isCollapsed = (key, defaultState) => {
       let match = state[key];
       if (!match) {
@@ -36271,9 +36242,9 @@
     return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(GroupStateContext.Provider, { value: { isCollapsed, toggleCollapsed }, children });
   };
   var Group2 = ({ className, info }) => {
-    const groupState = (0, import_react20.useContext)(GroupStateContext);
-    const { renderComponent, sendMessage } = (0, import_react20.useContext)(StageContext);
-    const [editingTitle, setEditingTitle] = (0, import_react20.useState)(false);
+    const groupState = (0, import_react19.useContext)(GroupStateContext);
+    const { renderComponent, sendMessage } = (0, import_react19.useContext)(StageContext);
+    const [editingTitle, setEditingTitle] = (0, import_react19.useState)(false);
     const children = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
@@ -36464,16 +36435,16 @@
     return pageX - rect.left;
   };
   var SliderButton = ({ info, className }) => {
-    const { sendMessage } = import_react22.default.useContext(StageContext);
-    const [state, setState] = import_react22.default.useState({ state: "closed" });
-    const input = import_react22.default.useRef(null);
+    const { sendMessage } = import_react21.default.useContext(StageContext);
+    const [state, setState] = import_react21.default.useState({ state: "closed" });
+    const input = import_react21.default.useRef(null);
     const displayValue = (value2) => {
       if (info.max === 1 && info.min === 0) {
         return `${Math.round(value2 * 100)}%`;
       }
       return NUMBER_FORMATTER.format(value2);
     };
-    const sendValue = (0, import_react22.useCallback)(
+    const sendValue = (0, import_react21.useCallback)(
       (value2) => sendMessage?.({
         type: "component-message",
         namespace: "core",
@@ -36483,7 +36454,7 @@
       }),
       [sendMessage, info.key]
     );
-    const sanitizeValue = (0, import_react22.useCallback)(
+    const sanitizeValue = (0, import_react21.useCallback)(
       (value2) => {
         const i = Math.round((value2 - info.min) / info.step);
         const v = i * info.step + info.min;
@@ -36491,13 +36462,13 @@
       },
       [info.min, info.max, info.step]
     );
-    const getNewValue = (0, import_react22.useCallback)(
+    const getNewValue = (0, import_react21.useCallback)(
       (startValue, diff) => {
         return sanitizeValue((startValue || 0) + diff);
       },
       [sanitizeValue]
     );
-    const getCurrentInputValue = (0, import_react22.useCallback)(
+    const getCurrentInputValue = (0, import_react21.useCallback)(
       (e) => {
         const float = parseFloat(e.currentTarget.value);
         return sanitizeValue(isNaN(float) ? info.value || 0 : float);
@@ -36685,9 +36656,9 @@
     );
   };
   var Switch = ({ className, info }) => {
-    const { sendMessage } = import_react23.default.useContext(StageContext);
-    const [touching, setTouching] = (0, import_react23.useState)(false);
-    const onClick = (0, import_react23.useMemo)(
+    const { sendMessage } = import_react22.default.useContext(StageContext);
+    const [touching, setTouching] = (0, import_react22.useState)(false);
+    const onClick = (0, import_react22.useMemo)(
       () => () => {
         sendMessage?.({
           type: "component-message",
@@ -36698,14 +36669,14 @@
       },
       [sendMessage, info.key]
     );
-    const onTouchStart = (0, import_react23.useMemo)(
+    const onTouchStart = (0, import_react22.useMemo)(
       () => (event) => {
         event.preventDefault();
         setTouching(true);
       },
       []
     );
-    const onTouchEnd = (0, import_react23.useMemo)(
+    const onTouchEnd = (0, import_react22.useMemo)(
       () => (event) => {
         event.preventDefault();
         setTouching(false);
@@ -36803,9 +36774,9 @@
     );
   };
   var Tabs = (props) => {
-    const { renderComponent } = import_react24.default.useContext(StageContext);
-    const [touching, setTouching] = import_react24.default.useState(null);
-    const [currentTab, setCurrentTab] = import_react24.default.useState(0);
+    const { renderComponent } = import_react23.default.useContext(StageContext);
+    const [touching, setTouching] = import_react23.default.useState(null);
+    const [currentTab, setCurrentTab] = import_react23.default.useState(0);
     const tab = props.info.tabs[currentTab];
     return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       "div",
@@ -36856,9 +36827,9 @@
     );
   };
   var TextInput = ({ className, info }) => {
-    const { sendMessage } = import_react25.default.useContext(StageContext);
-    const ref = import_react25.default.useRef(null);
-    (0, import_react25.useEffect)(() => {
+    const { sendMessage } = import_react24.default.useContext(StageContext);
+    const ref = import_react24.default.useRef(null);
+    (0, import_react24.useEffect)(() => {
       if (ref.current && ref.current.value !== info.value) {
         ref.current.value = info.value;
       }
@@ -36888,13 +36859,13 @@
   };
   var Timeline = (props) => {
     const { className, info } = props;
-    const { timeDifferenceMs } = (0, import_react26.useContext)(StageContext);
-    const frameState = import_react26.default.useRef({
+    const { timeDifferenceMs } = (0, import_react25.useContext)(StageContext);
+    const frameState = import_react25.default.useRef({
       animationFrame: -1,
       state: null
     });
-    const [currentTimeMillis, setCurrentTimeMillis] = (0, import_react26.useState)(0);
-    (0, import_react26.useEffect)(() => {
+    const [currentTimeMillis, setCurrentTimeMillis] = (0, import_react25.useState)(0);
+    (0, import_react25.useEffect)(() => {
       frameState.current.state = info.state;
       const recalculateCurrentTimeMillis = () => {
         if (frameState.current.state !== info.state) {
@@ -36991,11 +36962,11 @@
   };
 
   // ../../packages/sigil/dist/frontend.js
+  var import_react27 = __toESM(require_react(), 1);
   var import_react28 = __toESM(require_react(), 1);
-  var import_react29 = __toESM(require_react(), 1);
   var import_jsx_runtime37 = __toESM(require_jsx_runtime(), 1);
   var import_jsx_runtime38 = __toESM(require_jsx_runtime(), 1);
-  var import_react30 = __toESM(require_react(), 1);
+  var import_react29 = __toESM(require_react(), 1);
   var import_jsx_runtime39 = __toESM(require_jsx_runtime(), 1);
 
   // ../../node_modules/.pnpm/@arcanejs+toolkit@8.0.0_@arcanejs+toolkit-frontend@0.11.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@arcanejs/toolkit/dist/frontend/index.mjs
@@ -37129,7 +37100,7 @@
   };
 
   // ../../node_modules/.pnpm/@arcanejs+toolkit@8.0.0_@arcanejs+toolkit-frontend@0.11.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@arcanejs/toolkit/dist/frontend/index.mjs
-  var import_react27 = __toESM(require_react(), 1);
+  var import_react26 = __toESM(require_react(), 1);
 
   // ../../node_modules/.pnpm/@arcanejs+toolkit-frontend@0.11.0/node_modules/@arcanejs/toolkit-frontend/dist/styling.mjs
   var import_jsx_runtime35 = __toESM(require_jsx_runtime(), 1);
@@ -37152,32 +37123,32 @@
   // ../../node_modules/.pnpm/@arcanejs+toolkit@8.0.0_@arcanejs+toolkit-frontend@0.11.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@arcanejs/toolkit/dist/frontend/index.mjs
   var import_jsx_runtime36 = __toESM(require_jsx_runtime(), 1);
   var Stage = ({ className, renderers, loadingState }) => {
-    const [root, setRoot] = (0, import_react27.useState)(
+    const [root, setRoot] = (0, import_react26.useState)(
       void 0
     );
-    const socket = (0, import_react27.useRef)(null);
-    const [connection, setConnection] = (0, import_react27.useState)({
+    const socket = (0, import_react26.useRef)(null);
+    const [connection, setConnection] = (0, import_react26.useState)({
       state: "connecting"
     });
-    const [clockSync, setClockSync] = (0, import_react27.useState)(null);
-    const [lastPingMs, setLastPingMs] = (0, import_react27.useState)(null);
-    const [bestPing, setBestPing] = (0, import_react27.useState)(null);
-    const calls = (0, import_react27.useRef)({
+    const [clockSync, setClockSync] = (0, import_react26.useState)(null);
+    const [lastPingMs, setLastPingMs] = (0, import_react26.useState)(null);
+    const [bestPing, setBestPing] = (0, import_react26.useState)(null);
+    const calls = (0, import_react26.useRef)({
       nextId: 1,
       calls: /* @__PURE__ */ new Map()
     });
-    const pings = (0, import_react27.useRef)({
+    const pings = (0, import_react26.useRef)({
       nextId: 1,
       pings: /* @__PURE__ */ new Map()
     });
-    const preparedRenderers = (0, import_react27.useMemo)(() => {
+    const preparedRenderers = (0, import_react26.useMemo)(() => {
       const prepared = {};
       for (const renderer of renderers) {
         prepared[renderer.namespace] = renderer;
       }
       return prepared;
     }, [renderers]);
-    const renderComponent = (0, import_react27.useCallback)(
+    const renderComponent = (0, import_react26.useCallback)(
       (info) => {
         const renderer = preparedRenderers[info.namespace];
         if (!renderer) {
@@ -37187,7 +37158,7 @@
       },
       [preparedRenderers]
     );
-    const handleMessage = (0, import_react27.useCallback)((msg) => {
+    const handleMessage = (0, import_react26.useCallback)((msg) => {
       switch (msg.type) {
         case "metadata":
           setConnection({ state: "connected", uuid: msg.connectionUuid });
@@ -37243,7 +37214,7 @@
         }
       }
     }, []);
-    const initializeWebsocket = (0, import_react27.useCallback)(async () => {
+    const initializeWebsocket = (0, import_react26.useCallback)(async () => {
       if (socket.current) {
         socket.current.then((s) => s.close()).catch((err) => console.error(err));
         socket.current = null;
@@ -37279,10 +37250,10 @@
       });
       return socket.current;
     }, []);
-    const sendMessage = (0, import_react27.useCallback)(async (msg) => {
+    const sendMessage = (0, import_react26.useCallback)(async (msg) => {
       (await (socket.current || initializeWebsocket())).send(JSON.stringify(msg));
     }, []);
-    const call = (0, import_react27.useCallback)(
+    const call = (0, import_react26.useCallback)(
       async (msg) => {
         const requestId = calls.current.nextId++;
         const sendMsg = {
@@ -37304,10 +37275,10 @@
       },
       []
     );
-    (0, import_react27.useEffect)(() => {
+    (0, import_react26.useEffect)(() => {
       initializeWebsocket();
     }, [initializeWebsocket]);
-    (0, import_react27.useEffect)(() => {
+    (0, import_react26.useEffect)(() => {
       if (connection.state !== "connected" && clockSync !== null) {
         setClockSync(null);
       }
@@ -37337,7 +37308,7 @@
         window.clearInterval(interval);
       };
     }, [clockSync, connection.state, sendMessage]);
-    const stageContext = (0, import_react27.useMemo)(
+    const stageContext = (0, import_react26.useMemo)(
       () => ({
         sendMessage,
         renderComponent,
@@ -37478,7 +37449,7 @@
       ...browser
     };
   };
-  var BrowserContext = /* @__PURE__ */ (0, import_react29.createContext)(new Proxy({}, {
+  var BrowserContext = /* @__PURE__ */ (0, import_react28.createContext)(new Proxy({}, {
     get: () => {
       throw new Error("BrowserContext not provided.");
     }
@@ -37493,7 +37464,7 @@
     });
   };
   var useBrowserContext = () => {
-    return (0, import_react29.useContext)(BrowserContext);
+    return (0, import_react28.useContext)(BrowserContext);
   };
   var AppRoot = ({
     info,
@@ -37506,13 +37477,13 @@
     const {
       renderComponent,
       call
-    } = (0, import_react28.useContext)(StageContext);
-    const [logs, setLogs] = (0, import_react28.useState)({
+    } = (0, import_react27.useContext)(StageContext);
+    const [logs, setLogs] = (0, import_react27.useState)({
       lastLog: -1,
       logs: []
     });
-    const [debugMode, setDebugMode] = (0, import_react28.useState)(false);
-    (0, import_react28.useEffect)(() => {
+    const [debugMode, setDebugMode] = (0, import_react27.useState)(false);
+    (0, import_react27.useEffect)(() => {
       if (!debugMode || !call) return;
       const lastLogId = logs.logs[logs.logs.length - 1]?.index ?? -1;
       call({
@@ -37531,7 +37502,7 @@
         });
       });
     }, [call, debugMode, info.key, lastLog, logs]);
-    const debuggerContext = (0, import_react28.useMemo)(() => ({
+    const debuggerContext = (0, import_react27.useMemo)(() => ({
       logs: logs.logs,
       setDebugMode
     }), [logs.logs]);
@@ -37567,8 +37538,8 @@ Caused by: ${unwrapErrorStack(error.cause)}`;
     title,
     className
   }) => {
-    const scrollRef = (0, import_react30.useRef)(null);
-    const shouldScrollToBottom = (0, import_react30.useRef)(true);
+    const scrollRef = (0, import_react29.useRef)(null);
+    const shouldScrollToBottom = (0, import_react29.useRef)(true);
     const {
       openDevTools
     } = useBrowserContext();
@@ -37577,7 +37548,7 @@ Caused by: ${unwrapErrorStack(error.cause)}`;
       logs
     } = useDebuggerContext();
     const system = useSystemInformation();
-    (0, import_react30.useEffect)(() => {
+    (0, import_react29.useEffect)(() => {
       setDebugMode(true);
       return () => {
         setDebugMode(false);
@@ -37592,19 +37563,19 @@ Caused by: ${unwrapErrorStack(error.cause)}`;
       } = scrollRef.current;
       shouldScrollToBottom.current = scrollTop + clientHeight >= scrollHeight - 10;
     };
-    const scrollToBottomIfRequired = (0, import_react30.useCallback)(() => {
+    const scrollToBottomIfRequired = (0, import_react29.useCallback)(() => {
       if (shouldScrollToBottom.current && scrollRef.current) {
         scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
       }
     }, []);
-    (0, import_react30.useEffect)(scrollToBottomIfRequired, [logs, scrollToBottomIfRequired]);
-    (0, import_react30.useEffect)(() => {
+    (0, import_react29.useEffect)(scrollToBottomIfRequired, [logs, scrollToBottomIfRequired]);
+    (0, import_react29.useEffect)(() => {
       window.addEventListener("resize", scrollToBottomIfRequired);
       return () => {
         window.removeEventListener("resize", scrollToBottomIfRequired);
       };
     }, [scrollToBottomIfRequired]);
-    const exportLogs = (0, import_react30.useCallback)(() => {
+    const exportLogs = (0, import_react29.useCallback)(() => {
       const logText = JSON.stringify({
         system,
         logs
@@ -37619,7 +37590,7 @@ Caused by: ${unwrapErrorStack(error.cause)}`;
       link.click();
       URL.revokeObjectURL(url);
     }, [system, logs]);
-    const handleRequestScrollToBottom = (0, import_react30.useCallback)(() => {
+    const handleRequestScrollToBottom = (0, import_react29.useCallback)(() => {
       shouldScrollToBottom.current = true;
       scrollToBottomIfRequired();
     }, [scrollToBottomIfRequired]);
@@ -37891,14 +37862,14 @@ Data Directory: ${system.dataDirectory}`
   };
 
   // src/components/frontend/toolbox/outputs.tsx
-  var import_compiler_runtime10 = __toESM(require_compiler_runtime());
-  var import_react34 = __toESM(require_react());
+  var import_compiler_runtime9 = __toESM(require_compiler_runtime());
+  var import_react33 = __toESM(require_react());
 
   // src/components/frontend/toolbox/util.tsx
-  var import_compiler_runtime6 = __toESM(require_compiler_runtime());
+  var import_compiler_runtime5 = __toESM(require_compiler_runtime());
   var import_jsx_runtime41 = __toESM(require_jsx_runtime());
   var PrimaryToolboxSection = (t0) => {
-    const $ = (0, import_compiler_runtime6.c)(12);
+    const $ = (0, import_compiler_runtime5.c)(12);
     const {
       title,
       children,
@@ -37979,44 +37950,44 @@ Data Directory: ${system.dataDirectory}`
   }
 
   // src/components/frontend/toolbox/context.tsx
-  var import_react31 = __toESM(require_react());
-  var ConfigContext = /* @__PURE__ */ (0, import_react31.createContext)(new Proxy({}, {
+  var import_react30 = __toESM(require_react());
+  var ConfigContext = /* @__PURE__ */ (0, import_react30.createContext)(new Proxy({}, {
     get() {
       throw new Error("ConfigContext not initialized");
     }
   }));
-  var ApplicationStateContext = /* @__PURE__ */ (0, import_react31.createContext)(new Proxy({}, {
+  var ApplicationStateContext = /* @__PURE__ */ (0, import_react30.createContext)(new Proxy({}, {
     get() {
       throw new Error("ApplicationStateContext not initialized");
     }
   }));
   var useApplicationState = () => {
-    return (0, import_react31.useContext)(ApplicationStateContext);
+    return (0, import_react30.useContext)(ApplicationStateContext);
   };
-  var ApplicationHandlersContext = /* @__PURE__ */ (0, import_react31.createContext)(new Proxy({}, {
+  var ApplicationHandlersContext = /* @__PURE__ */ (0, import_react30.createContext)(new Proxy({}, {
     get() {
       throw new Error("ApplicationHandlersContext not initialized");
     }
   }));
   var useApplicationHandlers = () => {
-    return (0, import_react31.useContext)(ApplicationHandlersContext);
+    return (0, import_react30.useContext)(ApplicationHandlersContext);
   };
-  var NetworkContext = /* @__PURE__ */ (0, import_react31.createContext)(new Proxy({}, {
+  var NetworkContext = /* @__PURE__ */ (0, import_react30.createContext)(new Proxy({}, {
     get() {
       throw new Error("NetworkContext not initialized");
     }
   }));
 
   // src/components/frontend/toolbox/core/timecode-display.tsx
-  var import_compiler_runtime8 = __toESM(require_compiler_runtime());
-  var import_react33 = __toESM(require_react());
-
-  // src/components/frontend/toolbox/core/size-aware-div.tsx
   var import_compiler_runtime7 = __toESM(require_compiler_runtime());
   var import_react32 = __toESM(require_react());
+
+  // src/components/frontend/toolbox/core/size-aware-div.tsx
+  var import_compiler_runtime6 = __toESM(require_compiler_runtime());
+  var import_react31 = __toESM(require_react());
   var import_jsx_runtime42 = __toESM(require_jsx_runtime());
   var SizeAwareDiv = (t0) => {
-    const $ = (0, import_compiler_runtime7.c)(16);
+    const $ = (0, import_compiler_runtime6.c)(16);
     let children;
     let rest;
     let style;
@@ -38035,8 +38006,8 @@ Data Directory: ${system.dataDirectory}`
       rest = $[2];
       style = $[3];
     }
-    const [div, setDiv] = (0, import_react32.useState)(null);
-    const [rect, setRect] = (0, import_react32.useState)(null);
+    const [div, setDiv] = (0, import_react31.useState)(null);
+    const [rect, setRect] = (0, import_react31.useState)(null);
     let t1;
     let t2;
     if ($[4] !== div) {
@@ -38062,7 +38033,7 @@ Data Directory: ${system.dataDirectory}`
       t1 = $[5];
       t2 = $[6];
     }
-    (0, import_react32.useEffect)(t1, t2);
+    (0, import_react31.useEffect)(t1, t2);
     let t3;
     if ($[7] !== rect) {
       t3 = rect && cssVariables({
@@ -38213,15 +38184,15 @@ Data Directory: ${system.dataDirectory}`
   // src/components/frontend/toolbox/core/timecode-display.tsx
   var import_jsx_runtime43 = __toESM(require_jsx_runtime());
   var ActiveTimecodeText = (t0) => {
-    const $ = (0, import_compiler_runtime8.c)(7);
+    const $ = (0, import_compiler_runtime7.c)(7);
     const {
       effectiveStartTimeMillis,
       speed
     } = t0;
-    const [millis, setMillis] = (0, import_react33.useState)(0);
+    const [millis, setMillis] = (0, import_react32.useState)(0);
     const {
       timeDifferenceMs
-    } = (0, import_react33.useContext)(StageContext);
+    } = (0, import_react32.useContext)(StageContext);
     let t1;
     let t2;
     if ($[0] !== effectiveStartTimeMillis || $[1] !== speed || $[2] !== timeDifferenceMs) {
@@ -38250,7 +38221,7 @@ Data Directory: ${system.dataDirectory}`
       t1 = $[3];
       t2 = $[4];
     }
-    (0, import_react33.useEffect)(t1, t2);
+    (0, import_react32.useEffect)(t1, t2);
     let t3;
     if ($[5] !== millis) {
       t3 = displayMillis(millis);
@@ -38262,15 +38233,15 @@ Data Directory: ${system.dataDirectory}`
     return t3;
   };
   var Timeline2 = (t0) => {
-    const $ = (0, import_compiler_runtime8.c)(11);
+    const $ = (0, import_compiler_runtime7.c)(11);
     const {
       state,
       totalTime
     } = t0;
-    const [millis, setMillis] = (0, import_react33.useState)(0);
+    const [millis, setMillis] = (0, import_react32.useState)(0);
     const {
       timeDifferenceMs
-    } = (0, import_react33.useContext)(StageContext);
+    } = (0, import_react32.useContext)(StageContext);
     let t1;
     if ($[0] !== state.effectiveStartTimeMillis || $[1] !== state.positionMillis || $[2] !== state.speed || $[3] !== state.state || $[4] !== timeDifferenceMs) {
       t1 = () => {
@@ -38314,7 +38285,7 @@ Data Directory: ${system.dataDirectory}`
     } else {
       t2 = $[8];
     }
-    (0, import_react33.useEffect)(t1, t2);
+    (0, import_react32.useEffect)(t1, t2);
     const t3 = `${Math.min(millis / totalTime.timeMillis * 100, 100)}%`;
     let t4;
     if ($[9] !== t3) {
@@ -38338,7 +38309,7 @@ Data Directory: ${system.dataDirectory}`
     return t4;
   };
   var TimecodeDisplay = (t0) => {
-    const $ = (0, import_compiler_runtime8.c)(71);
+    const $ = (0, import_compiler_runtime7.c)(71);
     const {
       id,
       timecode: t1,
@@ -38732,7 +38703,7 @@ Data Directory: ${system.dataDirectory}`
     const {
       openNewWidow
     } = useBrowserContext();
-    const openInNewWindow = (0, import_react33.useCallback)(() => {
+    const openInNewWindow = (0, import_react32.useCallback)(() => {
       if (id) {
         openNewWidow(withUrlFragment({
           values: {
@@ -38796,14 +38767,14 @@ Data Directory: ${system.dataDirectory}`
     });
   };
   var FullscreenTimecodeDisplay = (t0) => {
-    const $ = (0, import_compiler_runtime8.c)(38);
+    const $ = (0, import_compiler_runtime7.c)(38);
     const {
       id
     } = t0;
     const {
       config
-    } = (0, import_react33.useContext)(ConfigContext);
-    const applicationState = (0, import_react33.useContext)(ApplicationStateContext);
+    } = (0, import_react32.useContext)(ConfigContext);
+    const applicationState = (0, import_react32.useContext)(ApplicationStateContext);
     let t1;
     bb0: if (isInputInstanceId(id) || isGeneratorInstanceId(id)) {
       let t22;
@@ -39065,10 +39036,10 @@ Data Directory: ${system.dataDirectory}`
   var v4_default = v4;
 
   // src/components/frontend/toolbox/content.tsx
-  var import_compiler_runtime9 = __toESM(require_compiler_runtime());
+  var import_compiler_runtime8 = __toESM(require_compiler_runtime());
   var import_jsx_runtime44 = __toESM(require_jsx_runtime());
   var ExternalLink = (t0) => {
-    const $ = (0, import_compiler_runtime9.c)(7);
+    const $ = (0, import_compiler_runtime8.c)(7);
     const {
       href,
       children
@@ -39108,7 +39079,7 @@ Data Directory: ${system.dataDirectory}`
     return t2;
   };
   var TextButton = (t0) => {
-    const $ = (0, import_compiler_runtime9.c)(3);
+    const $ = (0, import_compiler_runtime8.c)(3);
     const {
       onClick,
       children
@@ -39129,7 +39100,7 @@ Data Directory: ${system.dataDirectory}`
     return t1;
   };
   var NoToolboxChildren = (t0) => {
-    const $ = (0, import_compiler_runtime9.c)(3);
+    const $ = (0, import_compiler_runtime8.c)(3);
     const {
       text
     } = t0;
@@ -39163,18 +39134,18 @@ Data Directory: ${system.dataDirectory}`
   // src/components/frontend/toolbox/outputs.tsx
   var import_jsx_runtime45 = __toESM(require_jsx_runtime());
   var DmxConnectionSettings = (t0) => {
-    const $ = (0, import_compiler_runtime10.c)(41);
+    const $ = (0, import_compiler_runtime9.c)(41);
     const {
       data,
       updateSettings
     } = t0;
     const {
       commitChanges
-    } = (0, import_react34.useContext)(ChangeCommitContext);
+    } = (0, import_react33.useContext)(ChangeCommitContext);
     const {
       getNetworkInterfaces
-    } = (0, import_react34.useContext)(NetworkContext);
-    const [interfaces, setInterfaces] = (0, import_react34.useState)(null);
+    } = (0, import_react33.useContext)(NetworkContext);
+    const [interfaces, setInterfaces] = (0, import_react33.useState)(null);
     let t1;
     if ($[0] !== getNetworkInterfaces) {
       t1 = () => {
@@ -39201,7 +39172,7 @@ Data Directory: ${system.dataDirectory}`
       t2 = $[3];
       t3 = $[4];
     }
-    (0, import_react34.useEffect)(t2, t3);
+    (0, import_react33.useEffect)(t2, t3);
     if (data.type !== "artnet") {
       return null;
     }
@@ -39445,8 +39416,8 @@ Data Directory: ${system.dataDirectory}`
     const {
       config,
       updateConfig
-    } = (0, import_react34.useContext)(ConfigContext);
-    const [newData, setNewData] = (0, import_react34.useState)({
+    } = (0, import_react33.useContext)(ConfigContext);
+    const [newData, setNewData] = (0, import_react33.useState)({
       name: "",
       enabled: true,
       definition: {
@@ -39459,7 +39430,7 @@ Data Directory: ${system.dataDirectory}`
       },
       link: null
     });
-    const updateSettings = (0, import_react34.useCallback)((change) => {
+    const updateSettings = (0, import_react33.useCallback)((change) => {
       if (target.type === "add") {
         setNewData(change);
       } else {
@@ -39478,13 +39449,13 @@ Data Directory: ${system.dataDirectory}`
         });
       }
     }, [target, updateConfig]);
-    const updateDefinition = (0, import_react34.useCallback)((change_0) => {
+    const updateDefinition = (0, import_react33.useCallback)((change_0) => {
       updateSettings((current_0) => ({
         ...current_0,
         definition: change_0(current_0.definition)
       }));
     }, [updateSettings]);
-    const addOutput = (0, import_react34.useCallback)(() => {
+    const addOutput = (0, import_react33.useCallback)(() => {
       updateConfig((current_1) => {
         return {
           ...current_1,
@@ -39498,7 +39469,7 @@ Data Directory: ${system.dataDirectory}`
     }, [newData, close, updateConfig]);
     const resolvedTarget = target.type === "add" ? "add" : config.outputs?.[target.uuid];
     const data = resolvedTarget === "add" ? newData : resolvedTarget;
-    const commitChanges = (0, import_react34.useCallback)(() => {
+    const commitChanges = (0, import_react33.useCallback)(() => {
       if (target.type === "add") {
         addOutput();
       } else {
@@ -39587,7 +39558,7 @@ Data Directory: ${system.dataDirectory}`
     });
   };
   var OutputDisplay = (t0) => {
-    const $ = (0, import_compiler_runtime10.c)(57);
+    const $ = (0, import_compiler_runtime9.c)(57);
     const {
       uuid,
       config,
@@ -39598,7 +39569,7 @@ Data Directory: ${system.dataDirectory}`
     const applicationState = useApplicationState();
     const {
       updateConfig
-    } = (0, import_react34.useContext)(ConfigContext);
+    } = (0, import_react33.useContext)(ConfigContext);
     let t1;
     if ($[0] !== setAssignToOutput || $[1] !== updateConfig || $[2] !== uuid) {
       t1 = () => {
@@ -39862,7 +39833,7 @@ Data Directory: ${system.dataDirectory}`
     return t24;
   };
   var OutputsSection = (t0) => {
-    const $ = (0, import_compiler_runtime10.c)(11);
+    const $ = (0, import_compiler_runtime9.c)(11);
     const {
       setDialogMode,
       assignToOutput,
@@ -39870,7 +39841,7 @@ Data Directory: ${system.dataDirectory}`
     } = t0;
     const {
       config
-    } = (0, import_react34.useContext)(ConfigContext);
+    } = (0, import_react33.useContext)(ConfigContext);
     let t1;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
       t1 = ["artnet"];
@@ -39956,18 +39927,18 @@ Data Directory: ${system.dataDirectory}`
   }
 
   // src/components/frontend/toolbox/generators.tsx
-  var import_compiler_runtime11 = __toESM(require_compiler_runtime());
-  var import_react35 = __toESM(require_react());
+  var import_compiler_runtime10 = __toESM(require_compiler_runtime());
+  var import_react34 = __toESM(require_react());
   var import_jsx_runtime46 = __toESM(require_jsx_runtime());
   var ClockSpecificSettings = (t0) => {
-    const $ = (0, import_compiler_runtime11.c)(9);
+    const $ = (0, import_compiler_runtime10.c)(9);
     const {
       data,
       updateSettings
     } = t0;
     const {
       commitChanges
-    } = (0, import_react35.useContext)(ChangeCommitContext);
+    } = (0, import_react34.useContext)(ChangeCommitContext);
     if (data.type !== "clock") {
       return null;
     }
@@ -40036,15 +40007,15 @@ Data Directory: ${system.dataDirectory}`
     const {
       config,
       updateConfig
-    } = (0, import_react35.useContext)(ConfigContext);
-    const [newData, setNewData] = (0, import_react35.useState)({
+    } = (0, import_react34.useContext)(ConfigContext);
+    const [newData, setNewData] = (0, import_react34.useState)({
       name: "",
       definition: {
         type: generator,
         speed: 1
       }
     });
-    const updateSettings = (0, import_react35.useCallback)((change) => {
+    const updateSettings = (0, import_react34.useCallback)((change) => {
       if (target.type === "add") {
         setNewData(change);
       } else {
@@ -40063,13 +40034,13 @@ Data Directory: ${system.dataDirectory}`
         });
       }
     }, [target, updateConfig]);
-    const updateDefinition = (0, import_react35.useCallback)((change_0) => {
+    const updateDefinition = (0, import_react34.useCallback)((change_0) => {
       updateSettings((current_0) => ({
         ...current_0,
         definition: change_0(current_0.definition)
       }));
     }, [updateSettings]);
-    const addGenerator = (0, import_react35.useCallback)(() => {
+    const addGenerator = (0, import_react34.useCallback)(() => {
       updateConfig((current_1) => {
         return {
           ...current_1,
@@ -40083,7 +40054,7 @@ Data Directory: ${system.dataDirectory}`
     }, [newData, close, updateConfig]);
     const resolvedTarget = target.type === "add" ? "add" : config.generators?.[target.uuid];
     const data = resolvedTarget === "add" ? newData : resolvedTarget;
-    const commitChanges = (0, import_react35.useCallback)(() => {
+    const commitChanges = (0, import_react34.useCallback)(() => {
       if (target.type === "add") {
         addGenerator();
       } else {
@@ -40152,7 +40123,7 @@ Data Directory: ${system.dataDirectory}`
     });
   };
   var GeneratorDisplay = (t0) => {
-    const $ = (0, import_compiler_runtime11.c)(19);
+    const $ = (0, import_compiler_runtime10.c)(19);
     const {
       uuid,
       config,
@@ -40246,14 +40217,14 @@ Data Directory: ${system.dataDirectory}`
     return t8;
   };
   var GeneratorsSection = (t0) => {
-    const $ = (0, import_compiler_runtime11.c)(10);
+    const $ = (0, import_compiler_runtime10.c)(10);
     const {
       setDialogMode,
       assignToOutput
     } = t0;
     const {
       config
-    } = (0, import_react35.useContext)(ConfigContext);
+    } = (0, import_react34.useContext)(ConfigContext);
     let t1;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
       t1 = ["clock"];
@@ -40324,22 +40295,22 @@ Data Directory: ${system.dataDirectory}`
   };
 
   // src/components/frontend/toolbox/inputs.tsx
-  var import_compiler_runtime12 = __toESM(require_compiler_runtime());
-  var import_react36 = __toESM(require_react());
+  var import_compiler_runtime11 = __toESM(require_compiler_runtime());
+  var import_react35 = __toESM(require_react());
   var import_jsx_runtime47 = __toESM(require_jsx_runtime());
   var DmxConnectionSettings2 = (t0) => {
-    const $ = (0, import_compiler_runtime12.c)(31);
+    const $ = (0, import_compiler_runtime11.c)(31);
     const {
       data,
       updateSettings
     } = t0;
     const {
       commitChanges
-    } = (0, import_react36.useContext)(ChangeCommitContext);
+    } = (0, import_react35.useContext)(ChangeCommitContext);
     const {
       getNetworkInterfaces
-    } = (0, import_react36.useContext)(NetworkContext);
-    const [interfaces, setInterfaces] = (0, import_react36.useState)(null);
+    } = (0, import_react35.useContext)(NetworkContext);
+    const [interfaces, setInterfaces] = (0, import_react35.useState)(null);
     let t1;
     if ($[0] !== getNetworkInterfaces) {
       t1 = () => {
@@ -40366,7 +40337,7 @@ Data Directory: ${system.dataDirectory}`
       t2 = $[3];
       t3 = $[4];
     }
-    (0, import_react36.useEffect)(t2, t3);
+    (0, import_react35.useEffect)(t2, t3);
     if (data.type !== "artnet") {
       return null;
     }
@@ -40518,15 +40489,15 @@ Data Directory: ${system.dataDirectory}`
     return t16;
   };
   var TCNetConnectionSettings = (t0) => {
-    const $ = (0, import_compiler_runtime12.c)(21);
+    const $ = (0, import_compiler_runtime11.c)(21);
     const {
       data,
       updateSettings
     } = t0;
     const {
       getNetworkInterfaces
-    } = (0, import_react36.useContext)(NetworkContext);
-    const [interfaces, setInterfaces] = (0, import_react36.useState)(null);
+    } = (0, import_react35.useContext)(NetworkContext);
+    const [interfaces, setInterfaces] = (0, import_react35.useState)(null);
     let t1;
     if ($[0] !== getNetworkInterfaces) {
       t1 = () => {
@@ -40553,7 +40524,7 @@ Data Directory: ${system.dataDirectory}`
       t2 = $[3];
       t3 = $[4];
     }
-    (0, import_react36.useEffect)(t2, t3);
+    (0, import_react35.useEffect)(t2, t3);
     if (data.type !== "tcnet") {
       return null;
     }
@@ -40658,8 +40629,8 @@ Data Directory: ${system.dataDirectory}`
     const {
       config,
       updateConfig
-    } = (0, import_react36.useContext)(ConfigContext);
-    const [newData, setNewData] = (0, import_react36.useState)({
+    } = (0, import_react35.useContext)(ConfigContext);
+    const [newData, setNewData] = (0, import_react35.useState)({
       name: "",
       enabled: true,
       definition: input === "artnet" ? {
@@ -40671,7 +40642,7 @@ Data Directory: ${system.dataDirectory}`
         iface: ""
       }
     });
-    const updateSettings = (0, import_react36.useCallback)((change) => {
+    const updateSettings = (0, import_react35.useCallback)((change) => {
       if (target.type === "add") {
         setNewData(change);
       } else {
@@ -40690,13 +40661,13 @@ Data Directory: ${system.dataDirectory}`
         });
       }
     }, [target, updateConfig]);
-    const updateDefinition = (0, import_react36.useCallback)((change_0) => {
+    const updateDefinition = (0, import_react35.useCallback)((change_0) => {
       updateSettings((current_0) => ({
         ...current_0,
         definition: change_0(current_0.definition)
       }));
     }, [updateSettings]);
-    const addInput = (0, import_react36.useCallback)(() => {
+    const addInput = (0, import_react35.useCallback)(() => {
       updateConfig((current_1) => {
         return {
           ...current_1,
@@ -40710,7 +40681,7 @@ Data Directory: ${system.dataDirectory}`
     }, [newData, close, updateConfig]);
     const resolvedTarget = target.type === "add" ? "add" : config.inputs?.[target.uuid];
     const data = resolvedTarget === "add" ? newData : resolvedTarget;
-    const commitChanges = (0, import_react36.useCallback)(() => {
+    const commitChanges = (0, import_react35.useCallback)(() => {
       if (target.type === "add") {
         addInput();
       } else {
@@ -40802,7 +40773,7 @@ Data Directory: ${system.dataDirectory}`
     });
   };
   var InputDisplay = (t0) => {
-    const $ = (0, import_compiler_runtime12.c)(29);
+    const $ = (0, import_compiler_runtime11.c)(29);
     const {
       uuid,
       config,
@@ -40811,7 +40782,7 @@ Data Directory: ${system.dataDirectory}`
     } = t0;
     const {
       updateConfig
-    } = (0, import_react36.useContext)(ConfigContext);
+    } = (0, import_react35.useContext)(ConfigContext);
     const {
       inputs
     } = useApplicationState();
@@ -40952,14 +40923,14 @@ Data Directory: ${system.dataDirectory}`
     return t13;
   };
   var InputsSection = (t0) => {
-    const $ = (0, import_compiler_runtime12.c)(10);
+    const $ = (0, import_compiler_runtime11.c)(10);
     const {
       setDialogMode,
       assignToOutput
     } = t0;
     const {
       config
-    } = (0, import_react36.useContext)(ConfigContext);
+    } = (0, import_react35.useContext)(ConfigContext);
     let t1;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
       t1 = ["artnet", "tcnet"];
@@ -41042,15 +41013,15 @@ Data Directory: ${system.dataDirectory}`
   }
 
   // src/components/frontend/toolbox/settings.tsx
-  var import_compiler_runtime14 = __toESM(require_compiler_runtime());
-  var import_react39 = __toESM(require_react());
+  var import_compiler_runtime13 = __toESM(require_compiler_runtime());
+  var import_react38 = __toESM(require_react());
 
   // ../../packages/sigil/dist/frontend/appearance.js
-  var import_compiler_runtime13 = __toESM(require_compiler_runtime(), 1);
-  var import_react37 = __toESM(require_react(), 1);
+  var import_compiler_runtime12 = __toESM(require_compiler_runtime(), 1);
+  var import_react36 = __toESM(require_react(), 1);
   var import_jsx_runtime48 = __toESM(require_jsx_runtime(), 1);
   var AppearanceSwitcher = (t0) => {
-    const $ = (0, import_compiler_runtime13.c)(16);
+    const $ = (0, import_compiler_runtime12.c)(16);
     const {
       color,
       onColorChange
@@ -41164,9 +41135,9 @@ Data Directory: ${system.dataDirectory}`
   };
 
   // ../../packages/sigil/dist/frontend/preferences.js
-  var import_react38 = __toESM(require_react(), 1);
+  var import_react37 = __toESM(require_react(), 1);
   var createBrowserPreferencesHook = (def) => () => {
-    const [preferences, setPreference] = (0, import_react38.useState)(() => {
+    const [preferences, setPreference] = (0, import_react37.useState)(() => {
       const stored = window.localStorage.getItem(def.key);
       if (stored) {
         try {
@@ -41185,7 +41156,7 @@ Data Directory: ${system.dataDirectory}`
         newValue
       }));
     };
-    (0, import_react38.useEffect)(() => {
+    (0, import_react37.useEffect)(() => {
       const onStorageChange = (event) => {
         if (event.key === def.key) {
           const newValue = event.newValue;
@@ -41237,7 +41208,7 @@ Data Directory: ${system.dataDirectory}`
     timeStyle: "medium"
   });
   var Settings = (t0) => {
-    const $ = (0, import_compiler_runtime14.c)(29);
+    const $ = (0, import_compiler_runtime13.c)(29);
     const {
       setWindowMode
     } = t0;
@@ -41248,7 +41219,7 @@ Data Directory: ${system.dataDirectory}`
     const {
       config,
       updateConfig
-    } = (0, import_react39.useContext)(ConfigContext);
+    } = (0, import_react38.useContext)(ConfigContext);
     const {
       updates
     } = useApplicationState();
@@ -41420,10 +41391,10 @@ Data Directory: ${system.dataDirectory}`
   var import_react41 = __toESM(require_react());
 
   // src/components/frontend/toolbox/logo.tsx
-  var import_compiler_runtime15 = __toESM(require_compiler_runtime());
+  var import_compiler_runtime14 = __toESM(require_compiler_runtime());
   var import_jsx_runtime50 = __toESM(require_jsx_runtime());
   var TimecodeToolboxLogo = (props) => {
-    const $ = (0, import_compiler_runtime15.c)(33);
+    const $ = (0, import_compiler_runtime14.c)(33);
     let t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
       t0 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("mask", {
@@ -41843,10 +41814,10 @@ Data Directory: ${system.dataDirectory}`
   var import_react40 = __toESM(require_react());
 
   // src/components/frontend/toolbox/core/footer.tsx
-  var import_compiler_runtime16 = __toESM(require_compiler_runtime());
+  var import_compiler_runtime15 = __toESM(require_compiler_runtime());
   var import_jsx_runtime51 = __toESM(require_jsx_runtime());
   var Footer = (t0) => {
-    const $ = (0, import_compiler_runtime16.c)(7);
+    const $ = (0, import_compiler_runtime15.c)(7);
     const {
       openLicenseDetails
     } = t0;
@@ -41900,6 +41871,35 @@ Data Directory: ${system.dataDirectory}`
     return t5;
   };
 
+  // ../../packages/sigil/dist/frontend/styling.hooks.js
+  var import_compiler_runtime16 = __toESM(require_compiler_runtime(), 1);
+  var import_react39 = __toESM(require_react(), 1);
+  var useRootHintVariables = (color) => {
+    const $ = (0, import_compiler_runtime16.c)(3);
+    let t0;
+    let t1;
+    if ($[0] !== color) {
+      t0 = () => {
+        const root = document.querySelector(".arcane-theme-root");
+        if (!root) {
+          return;
+        }
+        Object.entries(cssHintColorVariables(color)).forEach((t2) => {
+          const [key, value] = t2;
+          root.style.setProperty(key, value);
+        });
+      };
+      t1 = [color];
+      $[0] = color;
+      $[1] = t0;
+      $[2] = t1;
+    } else {
+      t0 = $[1];
+      t1 = $[2];
+    }
+    (0, import_react39.useEffect)(t0, t1);
+  };
+
   // src/components/frontend/toolbox/core/layout.tsx
   var import_jsx_runtime52 = __toESM(require_jsx_runtime());
   var Layout = (t0) => {