@arcanewizards/timecode-toolbox 0.1.0 → 0.1.2

package/dist/entrypoint.js

@@ -8020,7 +8020,7 @@
         function mountLayoutEffect(create, deps) {
           var fiberFlags = 4194308;
           (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode && (fiberFlags |= 134217728);
-          return mountEffectImpl(fiberFlags, Layout, create, deps);
+          return mountEffectImpl(fiberFlags, Layout2, create, deps);
         }
         function imperativeHandleEffect(create, ref) {
           if ("function" === typeof ref) {
@@ -8048,7 +8048,7 @@
           (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode && (fiberFlags |= 134217728);
           mountEffectImpl(
             fiberFlags,
-            Layout,
+            Layout2,
             imperativeHandleEffect.bind(null, create, ref),
             deps
           );
@@ -8061,7 +8061,7 @@
           deps = null !== deps && void 0 !== deps ? deps.concat([ref]) : null;
           updateEffectImpl(
             4,
-            Layout,
+            Layout2,
             imperativeHandleEffect.bind(null, create, ref),
             deps
           );
@@ -10975,7 +10975,7 @@
                   updateQueue
                 ), (flags & Insertion) !== NoFlags && (isRunningInsertionEffect = false), void 0 !== lastEffect && "function" !== typeof lastEffect)) {
                   var hookName = void 0;
-                  hookName = 0 !== (updateQueue.tag & Layout) ? "useLayoutEffect" : 0 !== (updateQueue.tag & Insertion) ? "useInsertionEffect" : "useEffect";
+                  hookName = 0 !== (updateQueue.tag & Layout2) ? "useLayoutEffect" : 0 !== (updateQueue.tag & Insertion) ? "useInsertionEffect" : "useEffect";
                   var addendum = void 0;
                   addendum = null === lastEffect ? " You returned null. If your effect does not require clean up, return undefined (or nothing)." : "function" === typeof lastEffect.then ? "\n\nIt looks like you wrote " + hookName + "(async () => ...) or returned a Promise. Instead, write the async function inside your effect and call it immediately:\n\n" + hookName + "(() => {\n  async function fetchData() {\n    // You can await here\n    const response = await MyAPI.getData(someId);\n    // ...\n  }\n  fetchData();\n}, [someId]); // Or [] if effect doesn't need props or state\n\nLearn more about data fetching with Hooks: https://react.dev/link/hooks-data-fetching" : " You returned: " + lastEffect;
                   runWithFiberInDEV(
@@ -11462,7 +11462,7 @@
             case 11:
             case 15:
               recursivelyTraverseLayoutEffects(finishedRoot, finishedWork);
-              flags & 4 && commitHookLayoutEffects(finishedWork, Layout | HasEffect);
+              flags & 4 && commitHookLayoutEffects(finishedWork, Layout2 | HasEffect);
               break;
             case 1:
               recursivelyTraverseLayoutEffects(finishedRoot, finishedWork);
@@ -11793,7 +11793,7 @@
               offscreenSubtreeWasHidden || commitHookLayoutUnmountEffects(
                 deletedFiber,
                 nearestMountedAncestor,
-                Layout
+                Layout2
               );
               recursivelyTraverseDeletionEffects(
                 finishedRoot,
@@ -11972,7 +11972,7 @@
               ), commitHookEffectListMount(Insertion | HasEffect, finishedWork), commitHookLayoutUnmountEffects(
                 finishedWork,
                 finishedWork.return,
-                Layout | HasEffect
+                Layout2 | HasEffect
               ));
               break;
             case 1:
@@ -12362,7 +12362,7 @@
               commitHookLayoutUnmountEffects(
                 finishedWork,
                 finishedWork.return,
-                Layout
+                Layout2
               );
               recursivelyTraverseDisappearLayoutEffects(finishedWork);
               break;
@@ -12423,7 +12423,7 @@
                 finishedWork,
                 includeWorkInProgressEffects
               );
-              commitHookLayoutEffects(finishedWork, Layout);
+              commitHookLayoutEffects(finishedWork, Layout2);
               break;
             case 1:
               recursivelyTraverseReappearLayoutEffects(
@@ -20188,7 +20188,7 @@
         var reconcileChildFibers = createChildReconciler(true), mountChildFibers = createChildReconciler(false), UpdateState = 0, ReplaceState = 1, ForceUpdate = 2, CaptureUpdate = 3, hasForceUpdate = false;
         var didWarnUpdateInsideUpdate = false;
         var currentlyProcessingQueue = null;
-        var didReadFromEntangledAsyncAction = false, currentTreeHiddenStackCursor = createCursor(null), prevEntangledRenderLanesCursor = createCursor(0), suspenseHandlerStackCursor = createCursor(null), shellBoundary = null, SubtreeSuspenseContextMask = 1, ForceSuspenseFallback = 2, suspenseStackCursor = createCursor(0), NoFlags = 0, HasEffect = 1, Insertion = 2, Layout = 4, Passive = 8, didWarnUncachedGetSnapshot;
+        var didReadFromEntangledAsyncAction = false, currentTreeHiddenStackCursor = createCursor(null), prevEntangledRenderLanesCursor = createCursor(0), suspenseHandlerStackCursor = createCursor(null), shellBoundary = null, SubtreeSuspenseContextMask = 1, ForceSuspenseFallback = 2, suspenseStackCursor = createCursor(0), NoFlags = 0, HasEffect = 1, Insertion = 2, Layout2 = 4, Passive = 8, didWarnUncachedGetSnapshot;
         var didWarnAboutMismatchedHooksForComponent = /* @__PURE__ */ new Set();
         var didWarnAboutUseWrappedInTryCatch = /* @__PURE__ */ new Set();
         var didWarnAboutAsyncClientComponent = /* @__PURE__ */ new Set();
@@ -20519,7 +20519,7 @@
           useLayoutEffect: function(create, deps) {
             currentHookNameInDev = "useLayoutEffect";
             updateHookTypesDev();
-            return updateEffectImpl(4, Layout, create, deps);
+            return updateEffectImpl(4, Layout2, create, deps);
           },
           useMemo: function(create, deps) {
             currentHookNameInDev = "useMemo";
@@ -20649,7 +20649,7 @@
           useLayoutEffect: function(create, deps) {
             currentHookNameInDev = "useLayoutEffect";
             updateHookTypesDev();
-            return updateEffectImpl(4, Layout, create, deps);
+            return updateEffectImpl(4, Layout2, create, deps);
           },
           useMemo: function(create, deps) {
             currentHookNameInDev = "useMemo";
@@ -20944,7 +20944,7 @@
             currentHookNameInDev = "useLayoutEffect";
             warnInvalidHookAccess();
             updateHookTypesDev();
-            return updateEffectImpl(4, Layout, create, deps);
+            return updateEffectImpl(4, Layout2, create, deps);
           },
           useMemo: function(create, deps) {
             currentHookNameInDev = "useMemo";
@@ -21099,7 +21099,7 @@
             currentHookNameInDev = "useLayoutEffect";
             warnInvalidHookAccess();
             updateHookTypesDev();
-            return updateEffectImpl(4, Layout, create, deps);
+            return updateEffectImpl(4, Layout2, create, deps);
           },
           useMemo: function(create, deps) {
             currentHookNameInDev = "useMemo";
@@ -25238,8 +25238,8 @@
     return t4;
   };
 
-  // ../../packages/sigil/dist/chunk-XAK7WC3D.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-XAK7WC3D.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-XAK7WC3D.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) => {
@@ -35514,9 +35485,10 @@
     active,
     touching,
     position,
-    className
-  }) => 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`), clsControlPosition(position), className);
-  var ControlButtonFrame = /* @__PURE__ */ (0, import_react13.forwardRef)(({
+    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_react12.forwardRef)(({
     children,
     className,
     type,
@@ -35528,6 +35500,7 @@
     title,
     tooltipSide,
     position,
+    primary,
     ...props
   }, ref) => {
     const btn = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", {
@@ -35540,6 +35513,7 @@
         active,
         touching,
         position,
+        primary,
         className
       }),
       children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", {
@@ -35557,7 +35531,7 @@
     });
   });
   ControlButtonFrame.displayName = "ControlButtonFrame";
-  var ControlButton = /* @__PURE__ */ (0, import_react13.forwardRef)(({
+  var ControlButton = /* @__PURE__ */ (0, import_react12.forwardRef)(({
     onClick,
     disabled,
     ...props
@@ -35575,7 +35549,7 @@
     });
   });
   ControlButton.displayName = "ControlButton";
-  var CheckboxControlButton = /* @__PURE__ */ (0, import_react13.forwardRef)(({
+  var CheckboxControlButton = /* @__PURE__ */ (0, import_react12.forwardRef)(({
     active,
     label,
     ...props
@@ -35588,7 +35562,7 @@
     }), label]
   }));
   CheckboxControlButton.displayName = "CheckboxControlButton";
-  var LongPressableControlButton = /* @__PURE__ */ (0, import_react13.forwardRef)(({
+  var LongPressableControlButton = /* @__PURE__ */ (0, import_react12.forwardRef)(({
     active,
     disabled,
     onPress,
@@ -35611,7 +35585,7 @@
     });
   });
   LongPressableControlButton.displayName = "LongPressableControlButton";
-  var ControlButtonGroup = /* @__PURE__ */ (0, import_react13.forwardRef)(({
+  var ControlButtonGroup = /* @__PURE__ */ (0, import_react12.forwardRef)(({
     children,
     className,
     position,
@@ -35626,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",
@@ -35647,7 +35621,7 @@
         `), className)
   }));
   ControlParagraph.displayName = "ControlParagraph";
-  var ControlLabel = /* @__PURE__ */ (0, import_react14.forwardRef)(({
+  var ControlLabel = /* @__PURE__ */ (0, import_react13.forwardRef)(({
     className,
     disabled,
     nonMicro,
@@ -35662,7 +35636,7 @@
     });
   });
   ControlLabel.displayName = "ControlLabel";
-  var ControlDetails = /* @__PURE__ */ (0, import_react14.forwardRef)(({
+  var ControlDetails = /* @__PURE__ */ (0, import_react13.forwardRef)(({
     align,
     className,
     position = "all",
@@ -35673,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
@@ -35683,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
@@ -35712,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);
       }
@@ -35772,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,
@@ -35983,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
@@ -35996,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", {
@@ -36006,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,
@@ -36016,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) {
@@ -36034,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();
@@ -36120,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");
@@ -36148,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 {
@@ -36220,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",
       {
@@ -36238,7 +36212,7 @@
     );
   };
   NestedContent.displayName = "NestedContent";
-  var GroupStateContext = import_react20.default.createContext({
+  var GroupStateContext = import_react19.default.createContext({
     isCollapsed: () => {
       throw new Error("missing GroupStateContext");
     },
@@ -36247,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) {
@@ -36268,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",
       {
@@ -36461,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",
@@ -36480,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;
@@ -36488,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);
@@ -36682,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",
@@ -36695,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);
@@ -36800,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",
@@ -36853,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;
       }
@@ -36885,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) {
@@ -36988,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
@@ -37126,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);
@@ -37149,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) {
@@ -37184,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 });
@@ -37240,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;
@@ -37276,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 = {
@@ -37301,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);
       }
@@ -37334,7 +37308,7 @@
         window.clearInterval(interval);
       };
     }, [clockSync, connection.state, sendMessage]);
-    const stageContext = (0, import_react27.useMemo)(
+    const stageContext = (0, import_react26.useMemo)(
       () => ({
         sendMessage,
         renderComponent,
@@ -37475,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.");
     }
@@ -37490,7 +37464,7 @@
     });
   };
   var useBrowserContext = () => {
-    return (0, import_react29.useContext)(BrowserContext);
+    return (0, import_react28.useContext)(BrowserContext);
   };
   var AppRoot = ({
     info,
@@ -37503,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({
@@ -37528,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]);
@@ -37564,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();
@@ -37574,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);
@@ -37589,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
@@ -37616,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]);
@@ -37770,7 +37744,12 @@ Data Directory: ${system.dataDirectory}`
   var TOOLBOX_CONFIG = zod_default.object({
     inputs: zod_default.record(zod_default.string(), INPUT_CONFIG),
     generators: zod_default.record(zod_default.string(), GENERATOR_CONFIG),
-    outputs: zod_default.record(zod_default.string(), OUTPUT_CONFIG)
+    outputs: zod_default.record(zod_default.string(), OUTPUT_CONFIG),
+    /**
+     * Hash of the license the user has agreed to.
+     */
+    agreedToLicense: zod_default.string().optional(),
+    checkForUpdates: zod_default.boolean().optional().default(true)
   });
   var isTimecodeInstance = (instance) => instance !== null && "state" in instance && "metadata" in instance;
   var isTimecodeGroup = (instance) => instance !== null && "timecodes" in instance;
@@ -37778,16 +37757,235 @@ Data Directory: ${system.dataDirectory}`
   var isTimecodeToolboxComponent = (component) => component.namespace === NAMESPACE;
 
   // src/components/frontend/toolbox/root.tsx
-  var import_compiler_runtime15 = __toESM(require_compiler_runtime());
-  var import_react39 = __toESM(require_react());
+  var import_compiler_runtime20 = __toESM(require_compiler_runtime());
+  var import_react43 = __toESM(require_react());
 
-  // src/components/frontend/toolbox/content.tsx
+  // ../../packages/artnet/dist/chunk-J2HDMITA.js
+  var ARTNET_PORT = 6454;
+  var TIMECODE_FPS = {
+    FILM: 24,
+    EBU: 25,
+    DF: 29.97,
+    SMPTE: 30
+  };
+
+  // src/components/frontend/constants.ts
+  var MS_FORMAT = new Intl.NumberFormat(void 0, {
+    style: "unit",
+    unit: "millisecond",
+    maximumFractionDigits: 0
+  });
+  var SOURCE_CODE_URL = "https://github.com/ArcaneWizards/open-source/tree/main/apps/timecode-toolbox";
+  var STRINGS = {
+    title: "Timecode Toolbox",
+    debugger: "Debug Tools & Log",
+    connectionError: "Disconnected from Timecode Toolbox Server",
+    reconnect: "Reconnect",
+    openInNewWindow: "Open in new window",
+    toggle: (text) => `Toggle ${text}`,
+    close: (text) => `Close ${text}`,
+    license: "License & About",
+    acceptLicense: "Accept License",
+    licensePrompt: "Please review and accept the license to use Timecode Toolbox",
+    sourceCode: "Source Code",
+    protocols: {
+      artnet: {
+        short: "ArtNet",
+        long: "ArtNet"
+      },
+      tcnet: {
+        short: "TCNet",
+        long: "TCNet (ShowKontrol / Pioneer)"
+      }
+    },
+    inputs: {
+      title: "INPUTS",
+      noChildren: "No inputs yet. Please add one using the buttons below.",
+      addButton: (protocol) => `Add ${protocol}`,
+      addDialog: (protocol) => `Add ${protocol} Input`,
+      editDialog: (protocol, name) => `Edit ${protocol} Input ${name}`
+    },
+    smtpeModes: {
+      SMPTE: `SMPTE ${TIMECODE_FPS.SMPTE}FPS`,
+      FILM: `FILM ${TIMECODE_FPS.FILM}FPS`,
+      EBU: `EBU ${TIMECODE_FPS.EBU}FPS`,
+      DF: `DF ${TIMECODE_FPS.DF}FPS`
+    },
+    smtpeModeOptions: {
+      SMPTE: `SMPTE (${TIMECODE_FPS.SMPTE}FPS) (Recommended)`,
+      FILM: `FILM (${TIMECODE_FPS.FILM}FPS)`,
+      EBU: `EBU (${TIMECODE_FPS.EBU}FPS)`,
+      DF: `DF (${TIMECODE_FPS.DF}FPS)`
+    },
+    accuracy: (accuracyMillis) => `Accuracy: ${MS_FORMAT.format(accuracyMillis)}`,
+    delay: (delayMs) => `Delay: ${MS_FORMAT.format(delayMs)}`,
+    generators: {
+      title: "GENERATORS",
+      noChildren: "No generators yet. Please add one using the buttons below.",
+      type: {
+        clock: "Clock"
+      },
+      addDialog: (protocol) => `Add ${protocol} Generator`,
+      editDialog: (protocol, name) => `Edit ${protocol} Generator ${name}`
+    },
+    outputs: {
+      title: "OUTPUTS",
+      noChildren: "No outputs yet. Please add one using the buttons below.",
+      addButton: (protocol) => `Add ${protocol}`,
+      addDialog: (protocol) => `Add ${protocol} Output`,
+      editDialog: (protocol, name) => `Edit ${protocol} Output ${name}`
+    },
+    settings: {
+      title: "Settings"
+    },
+    controls: {
+      play: "Play",
+      pause: "Pause",
+      beginning: "Reset timecode to start",
+      back5seconds: "Back 5 Seconds",
+      forward5seconds: "Forward 5 Seconds"
+    },
+    errors: {
+      unknownTimecodeID: "Unknown timecode ID, please close the window"
+    },
+    updates: {
+      updateAvailable: (current, latest) => `Version ${latest} is available! You are currently on version ${current}.`,
+      download: "Download",
+      settingsLabel: "Automatically check for updates",
+      settingsDetails: `When enabled, the app will automatically check for updates periodically and display a message when a new version is available.`,
+      lastChecked: (time) => `Last checked: ${time}`
+    },
+    general: {
+      enabled: "Enabled",
+      disabled: "Disabled"
+    }
+  };
+
+  // src/components/frontend/toolbox/outputs.tsx
+  var import_compiler_runtime9 = __toESM(require_compiler_runtime());
+  var import_react33 = __toESM(require_react());
+
+  // src/components/frontend/toolbox/util.tsx
+  var import_compiler_runtime5 = __toESM(require_compiler_runtime());
+  var import_jsx_runtime41 = __toESM(require_jsx_runtime());
+  var PrimaryToolboxSection = (t0) => {
+    const $ = (0, import_compiler_runtime5.c)(12);
+    const {
+      title,
+      children,
+      buttons
+    } = t0;
+    let t1;
+    if ($[0] !== title) {
+      t1 = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", {
+        className: "\n          flex items-center justify-center bg-sigil-bg-light p-1\n          writing-mode-vertical-rl\n        ",
+        children: title
+      });
+      $[0] = title;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    let t2;
+    if ($[2] !== children) {
+      t2 = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", {
+        className: "flex grow flex-col gap-px",
+        children
+      });
+      $[2] = children;
+      $[3] = t2;
+    } else {
+      t2 = $[3];
+    }
+    let t3;
+    if ($[4] !== buttons) {
+      t3 = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", {
+        className: "flex w-full flex-wrap gap-1 bg-sigil-bg-light p-1",
+        children: buttons
+      });
+      $[4] = buttons;
+      $[5] = t3;
+    } else {
+      t3 = $[5];
+    }
+    let t4;
+    if ($[6] !== t2 || $[7] !== t3) {
+      t4 = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", {
+        className: "flex grow flex-col gap-px",
+        children: [t2, t3]
+      });
+      $[6] = t2;
+      $[7] = t3;
+      $[8] = t4;
+    } else {
+      t4 = $[8];
+    }
+    let t5;
+    if ($[9] !== t1 || $[10] !== t4) {
+      t5 = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", {
+        className: "flex grow gap-px",
+        children: [t1, t4]
+      });
+      $[9] = t1;
+      $[10] = t4;
+      $[11] = t5;
+    } else {
+      t5 = $[11];
+    }
+    return t5;
+  };
+  function displayMillis(totalMilliseconds) {
+    if (totalMilliseconds < 0) {
+      return "-" + displayMillis(-totalMilliseconds);
+    }
+    let remaining = totalMilliseconds;
+    const hours = remaining / 36e5 | 0;
+    remaining -= hours * 36e5;
+    const mins = remaining / 6e4 | 0;
+    remaining -= mins * 6e4;
+    const seconds = remaining / 1e3 | 0;
+    remaining -= seconds * 1e3;
+    const millis = remaining | 0;
+    return (hours < 10 ? "0" : "") + hours + ":" + (mins < 10 ? "0" : "") + mins + ":" + (seconds < 10 ? "0" : "") + seconds + ":" + (millis < 10 ? "00" : millis < 100 ? "0" : "") + millis;
+  }
+
+  // src/components/frontend/toolbox/context.tsx
+  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_react30.createContext)(new Proxy({}, {
+    get() {
+      throw new Error("ApplicationStateContext not initialized");
+    }
+  }));
+  var useApplicationState = () => {
+    return (0, import_react30.useContext)(ApplicationStateContext);
+  };
+  var ApplicationHandlersContext = /* @__PURE__ */ (0, import_react30.createContext)(new Proxy({}, {
+    get() {
+      throw new Error("ApplicationHandlersContext not initialized");
+    }
+  }));
+  var useApplicationHandlers = () => {
+    return (0, import_react30.useContext)(ApplicationHandlersContext);
+  };
+  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_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_runtime41 = __toESM(require_jsx_runtime());
+  var import_jsx_runtime42 = __toESM(require_jsx_runtime());
   var SizeAwareDiv = (t0) => {
     const $ = (0, import_compiler_runtime6.c)(16);
     let children;
@@ -37861,7 +38059,7 @@ Data Directory: ${system.dataDirectory}`
     }
     let t5;
     if ($[12] !== children || $[13] !== rest || $[14] !== t4) {
-      t5 = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", {
+      t5 = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", {
         ref: setDiv,
         ...rest,
         style: t4,
@@ -37877,286 +38075,6 @@ Data Directory: ${system.dataDirectory}`
     return t5;
   };
 
-  // src/components/frontend/toolbox/content.tsx
-  var import_jsx_runtime42 = __toESM(require_jsx_runtime());
-  var ExternalLink = (t0) => {
-    const $ = (0, import_compiler_runtime7.c)(7);
-    const {
-      href,
-      children
-    } = t0;
-    const {
-      openExternalLink
-    } = useBrowserContext();
-    let t1;
-    if ($[0] !== href || $[1] !== openExternalLink) {
-      t1 = (e) => {
-        e.preventDefault();
-        openExternalLink(href);
-      };
-      $[0] = href;
-      $[1] = openExternalLink;
-      $[2] = t1;
-    } else {
-      t1 = $[2];
-    }
-    let t2;
-    if ($[3] !== children || $[4] !== href || $[5] !== t1) {
-      t2 = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("a", {
-        href,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        onClick: t1,
-        className: "\n        text-sigil-usage-hint-foreground no-underline\n        hover:underline\n      ",
-        children
-      });
-      $[3] = children;
-      $[4] = href;
-      $[5] = t1;
-      $[6] = t2;
-    } else {
-      t2 = $[6];
-    }
-    return t2;
-  };
-  var NoToolboxChildren = (t0) => {
-    const $ = (0, import_compiler_runtime7.c)(3);
-    const {
-      text
-    } = t0;
-    let t1;
-    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-      t1 = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon2, {
-        icon: "handyman",
-        className: "text-block-icon"
-      });
-      $[0] = t1;
-    } else {
-      t1 = $[0];
-    }
-    let t2;
-    if ($[1] !== text) {
-      t2 = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(SizeAwareDiv, {
-        className: "\n        flex grow flex-col items-center justify-center gap-1 bg-sigil-bg-light\n        p-1 text-sigil-foreground-muted\n      ",
-        children: [t1, /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", {
-          className: "text-center",
-          children: text
-        })]
-      });
-      $[1] = text;
-      $[2] = t2;
-    } else {
-      t2 = $[2];
-    }
-    return t2;
-  };
-
-  // ../../packages/artnet/dist/chunk-J2HDMITA.js
-  var ARTNET_PORT = 6454;
-  var TIMECODE_FPS = {
-    FILM: 24,
-    EBU: 25,
-    DF: 29.97,
-    SMPTE: 30
-  };
-
-  // src/components/frontend/constants.ts
-  var MS_FORMAT = new Intl.NumberFormat(void 0, {
-    style: "unit",
-    unit: "millisecond",
-    maximumFractionDigits: 0
-  });
-  var STRINGS = {
-    title: "Timecode Toolbox",
-    debugger: "Debug Tools & Log",
-    connectionError: "Disconnected from Timecode Toolbox Server",
-    reconnect: "Reconnect",
-    openInNewWindow: "Open in new window",
-    toggle: (text) => `Toggle ${text}`,
-    close: (text) => `Close ${text}`,
-    protocols: {
-      artnet: {
-        short: "ArtNet",
-        long: "ArtNet"
-      },
-      tcnet: {
-        short: "TCNet",
-        long: "TCNet (ShowKontrol / Pioneer)"
-      }
-    },
-    inputs: {
-      title: "INPUTS",
-      noChildren: "No inputs yet. Please add one using the buttons below.",
-      addButton: (protocol) => `Add ${protocol}`,
-      addDialog: (protocol) => `Add ${protocol} Input`,
-      editDialog: (protocol, name) => `Edit ${protocol} Input ${name}`
-    },
-    smtpeModes: {
-      SMPTE: `SMPTE ${TIMECODE_FPS.SMPTE}FPS`,
-      FILM: `FILM ${TIMECODE_FPS.FILM}FPS`,
-      EBU: `EBU ${TIMECODE_FPS.EBU}FPS`,
-      DF: `DF ${TIMECODE_FPS.DF}FPS`
-    },
-    smtpeModeOptions: {
-      SMPTE: `SMPTE (${TIMECODE_FPS.SMPTE}FPS) (Recommended)`,
-      FILM: `FILM (${TIMECODE_FPS.FILM}FPS)`,
-      EBU: `EBU (${TIMECODE_FPS.EBU}FPS)`,
-      DF: `DF (${TIMECODE_FPS.DF}FPS)`
-    },
-    accuracy: (accuracyMillis) => `Accuracy: ${MS_FORMAT.format(accuracyMillis)}`,
-    delay: (delayMs) => `Delay: ${MS_FORMAT.format(delayMs)}`,
-    generators: {
-      title: "GENERATORS",
-      noChildren: "No generators yet. Please add one using the buttons below.",
-      type: {
-        clock: "Clock"
-      },
-      addDialog: (protocol) => `Add ${protocol} Generator`,
-      editDialog: (protocol, name) => `Edit ${protocol} Generator ${name}`
-    },
-    outputs: {
-      title: "OUTPUTS",
-      noChildren: "No outputs yet. Please add one using the buttons below.",
-      addButton: (protocol) => `Add ${protocol}`,
-      addDialog: (protocol) => `Add ${protocol} Output`,
-      editDialog: (protocol, name) => `Edit ${protocol} Output ${name}`
-    },
-    settings: {
-      title: "Settings"
-    },
-    controls: {
-      play: "Play",
-      pause: "Pause",
-      beginning: "Reset timecode to start",
-      back5seconds: "Back 5 Seconds",
-      forward5seconds: "Forward 5 Seconds"
-    },
-    errors: {
-      unknownTimecodeID: "Unknown timecode ID, please close the window"
-    }
-  };
-
-  // src/components/frontend/toolbox/outputs.tsx
-  var import_compiler_runtime10 = __toESM(require_compiler_runtime());
-  var import_react34 = __toESM(require_react());
-
-  // src/components/frontend/toolbox/util.tsx
-  var import_compiler_runtime8 = __toESM(require_compiler_runtime());
-  var import_jsx_runtime43 = __toESM(require_jsx_runtime());
-  var PrimaryToolboxSection = (t0) => {
-    const $ = (0, import_compiler_runtime8.c)(12);
-    const {
-      title,
-      children,
-      buttons
-    } = t0;
-    let t1;
-    if ($[0] !== title) {
-      t1 = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
-        className: "\n          flex items-center justify-center bg-sigil-bg-light p-1\n          writing-mode-vertical-rl\n        ",
-        children: title
-      });
-      $[0] = title;
-      $[1] = t1;
-    } else {
-      t1 = $[1];
-    }
-    let t2;
-    if ($[2] !== children) {
-      t2 = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
-        className: "flex grow flex-col gap-px",
-        children
-      });
-      $[2] = children;
-      $[3] = t2;
-    } else {
-      t2 = $[3];
-    }
-    let t3;
-    if ($[4] !== buttons) {
-      t3 = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
-        className: "flex w-full flex-wrap gap-1 bg-sigil-bg-light p-1",
-        children: buttons
-      });
-      $[4] = buttons;
-      $[5] = t3;
-    } else {
-      t3 = $[5];
-    }
-    let t4;
-    if ($[6] !== t2 || $[7] !== t3) {
-      t4 = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
-        className: "flex grow flex-col gap-px",
-        children: [t2, t3]
-      });
-      $[6] = t2;
-      $[7] = t3;
-      $[8] = t4;
-    } else {
-      t4 = $[8];
-    }
-    let t5;
-    if ($[9] !== t1 || $[10] !== t4) {
-      t5 = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
-        className: "flex grow gap-px",
-        children: [t1, t4]
-      });
-      $[9] = t1;
-      $[10] = t4;
-      $[11] = t5;
-    } else {
-      t5 = $[11];
-    }
-    return t5;
-  };
-  function displayMillis(totalMilliseconds) {
-    if (totalMilliseconds < 0) {
-      return "-" + displayMillis(-totalMilliseconds);
-    }
-    let remaining = totalMilliseconds;
-    const hours = remaining / 36e5 | 0;
-    remaining -= hours * 36e5;
-    const mins = remaining / 6e4 | 0;
-    remaining -= mins * 6e4;
-    const seconds = remaining / 1e3 | 0;
-    remaining -= seconds * 1e3;
-    const millis = remaining | 0;
-    return (hours < 10 ? "0" : "") + hours + ":" + (mins < 10 ? "0" : "") + mins + ":" + (seconds < 10 ? "0" : "") + seconds + ":" + (millis < 10 ? "00" : millis < 100 ? "0" : "") + millis;
-  }
-
-  // src/components/frontend/toolbox/context.tsx
-  var import_react32 = __toESM(require_react());
-  var ConfigContext = /* @__PURE__ */ (0, import_react32.createContext)(new Proxy({}, {
-    get() {
-      throw new Error("ConfigContext not initialized");
-    }
-  }));
-  var ApplicationStateContext = /* @__PURE__ */ (0, import_react32.createContext)(new Proxy({}, {
-    get() {
-      throw new Error("ApplicationStateContext not initialized");
-    }
-  }));
-  var useApplicationState = () => {
-    return (0, import_react32.useContext)(ApplicationStateContext);
-  };
-  var ApplicationHandlersContext = /* @__PURE__ */ (0, import_react32.createContext)(new Proxy({}, {
-    get() {
-      throw new Error("ApplicationHandlersContext not initialized");
-    }
-  }));
-  var useApplicationHandlers = () => {
-    return (0, import_react32.useContext)(ApplicationHandlersContext);
-  };
-  var NetworkContext = /* @__PURE__ */ (0, import_react32.createContext)(new Proxy({}, {
-    get() {
-      throw new Error("NetworkContext not initialized");
-    }
-  }));
-
-  // src/components/frontend/toolbox/core/timecode-display.tsx
-  var import_compiler_runtime9 = __toESM(require_compiler_runtime());
-  var import_react33 = __toESM(require_react());
-
   // src/tree.ts
   var isTreeNode = (node) => "children" in node && typeof node.children === "object" && node.children !== null;
   var getTreeValue = (current, path) => {
@@ -38264,17 +38182,17 @@ Data Directory: ${system.dataDirectory}`
   };
 
   // src/components/frontend/toolbox/core/timecode-display.tsx
-  var import_jsx_runtime44 = __toESM(require_jsx_runtime());
+  var import_jsx_runtime43 = __toESM(require_jsx_runtime());
   var ActiveTimecodeText = (t0) => {
-    const $ = (0, import_compiler_runtime9.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) {
@@ -38303,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);
@@ -38315,15 +38233,15 @@ Data Directory: ${system.dataDirectory}`
     return t3;
   };
   var Timeline2 = (t0) => {
-    const $ = (0, import_compiler_runtime9.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 = () => {
@@ -38367,15 +38285,15 @@ 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) {
-      t4 = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", {
+      t4 = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
         className: "w-full border border-timecode-usage-foreground p-px",
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
           className: "relative h-1 w-full overflow-hidden",
-          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", {
+          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
             className: "absolute inset-y-0 left-0 bg-timecode-usage-foreground",
             style: {
               width: t3
@@ -38391,7 +38309,7 @@ Data Directory: ${system.dataDirectory}`
     return t4;
   };
   var TimecodeDisplay = (t0) => {
-    const $ = (0, import_compiler_runtime9.c)(71);
+    const $ = (0, import_compiler_runtime7.c)(71);
     const {
       id,
       timecode: t1,
@@ -38538,7 +38456,7 @@ Data Directory: ${system.dataDirectory}`
     }
     let t11;
     if ($[26] !== headerComponents) {
-      t11 = headerComponents && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", {
+      t11 = headerComponents && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
         className: "flex flex-wrap gap-0.25",
         children: headerComponents
       });
@@ -38570,7 +38488,7 @@ Data Directory: ${system.dataDirectory}`
     }
     let t15;
     if ($[33] !== state.effectiveStartTimeMillis || $[34] !== state.positionMillis || $[35] !== state.speed || $[36] !== state.state) {
-      t15 = state.state === "none" ? "--:--:--:---" : state.state === "stopped" ? displayMillis(state.positionMillis) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ActiveTimecodeText, {
+      t15 = state.state === "none" ? "--:--:--:---" : state.state === "stopped" ? displayMillis(state.positionMillis) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ActiveTimecodeText, {
         effectiveStartTimeMillis: state.effectiveStartTimeMillis,
         speed: state.speed
       });
@@ -38584,9 +38502,9 @@ Data Directory: ${system.dataDirectory}`
     }
     let t16;
     if ($[38] !== t15) {
-      t16 = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", {
+      t16 = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
         className: "absolute inset-0 flex items-center justify-center",
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", {
           className: t14,
           children: t15
         })
@@ -38598,7 +38516,7 @@ Data Directory: ${system.dataDirectory}`
     }
     let t17;
     if ($[40] !== t13 || $[41] !== t16 || $[42] !== toggle) {
-      t17 = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SizeAwareDiv, {
+      t17 = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SizeAwareDiv, {
         className: t13,
         onClick: toggle,
         children: t16
@@ -38612,37 +38530,37 @@ Data Directory: ${system.dataDirectory}`
     }
     let t18;
     if ($[44] !== back5seconds || $[45] !== beginning || $[46] !== forward5seconds || $[47] !== hooks || $[48] !== pause || $[49] !== play || $[50] !== state.state) {
-      t18 = hooks?.pause || hooks?.play ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", {
+      t18 = hooks?.pause || hooks?.play ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
         className: "flex justify-center gap-px",
-        children: [hooks.beginning && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ControlButton, {
+        children: [hooks.beginning && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlButton, {
           onClick: beginning,
           variant: "large",
           icon: "skip_previous",
           disabled: !hooks?.beginning,
           title: STRINGS.controls.beginning,
           className: "text-timecode-usage-foreground!"
-        }), hooks.seekRelative && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ControlButton, {
+        }), hooks.seekRelative && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlButton, {
           onClick: back5seconds,
           variant: "large",
           icon: "replay_5",
           disabled: !hooks?.seekRelative,
           title: STRINGS.controls.back5seconds,
           className: "text-timecode-usage-foreground!"
-        }), state.state === "none" || state.state === "stopped" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ControlButton, {
+        }), state.state === "none" || state.state === "stopped" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlButton, {
           onClick: play,
           variant: "large",
           icon: "play_arrow",
           disabled: !hooks?.play,
           title: STRINGS.controls.play,
           className: "text-timecode-usage-foreground!"
-        }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ControlButton, {
+        }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlButton, {
           onClick: pause,
           variant: "large",
           icon: "pause",
           disabled: !hooks?.pause,
           title: STRINGS.controls.pause,
           className: "text-timecode-usage-foreground!"
-        }), hooks.seekRelative && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ControlButton, {
+        }), hooks.seekRelative && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlButton, {
           onClick: forward5seconds,
           variant: "large",
           icon: "forward_5",
@@ -38664,7 +38582,7 @@ Data Directory: ${system.dataDirectory}`
     }
     let t19;
     if ($[52] !== metadata || $[53] !== state) {
-      t19 = metadata?.totalTime && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Timeline2, {
+      t19 = metadata?.totalTime && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Timeline2, {
         state,
         totalTime: metadata.totalTime
       });
@@ -38676,7 +38594,7 @@ Data Directory: ${system.dataDirectory}`
     }
     let t20;
     if ($[55] !== t10 || $[56] !== t11 || $[57] !== t17 || $[58] !== t18 || $[59] !== t19) {
-      t20 = /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", {
+      t20 = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
         className: t10,
         children: [t11, t17, t18, t19]
       });
@@ -38691,15 +38609,15 @@ Data Directory: ${system.dataDirectory}`
     }
     let t21;
     if ($[61] !== config || $[62] !== state.accuracyMillis || $[63] !== state.smpteMode) {
-      t21 = (state.smpteMode !== null || state.accuracyMillis !== null || config.delayMs !== null) && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", {
+      t21 = (state.smpteMode !== null || state.accuracyMillis !== null || config.delayMs !== null) && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
         className: "flex gap-px",
-        children: [config.delayMs !== null && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", {
+        children: [config.delayMs !== null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
           className: "grow basis-0 truncate bg-sigil-bg-light p-0.5",
           children: STRINGS.delay(config.delayMs)
-        }), state.smpteMode !== null && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", {
+        }), state.smpteMode !== null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
           className: "grow basis-0 truncate bg-sigil-bg-light p-0.5",
           children: STRINGS.smtpeModes[state.smpteMode]
-        }), state.accuracyMillis !== null && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", {
+        }), state.accuracyMillis !== null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
           className: "grow basis-0 truncate bg-sigil-bg-light p-0.5",
           children: STRINGS.accuracy(state.accuracyMillis)
         })]
@@ -38713,26 +38631,26 @@ Data Directory: ${system.dataDirectory}`
     }
     let t22;
     if ($[65] !== metadata) {
-      t22 = metadata?.artist || metadata?.title ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TooltipWrapper, {
-        tooltip: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, {
-          children: [metadata.title && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", {
-            children: [/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", {
+      t22 = metadata?.artist || metadata?.title ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipWrapper, {
+        tooltip: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, {
+          children: [metadata.title && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
+            children: [/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", {
               className: "font-bold",
               children: "Title:"
             }), " ", metadata.title]
-          }), metadata.artist && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", {
-            children: [/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", {
+          }), metadata.artist && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
+            children: [/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", {
               className: "font-bold",
               children: "Artist:"
             }), " ", metadata.artist]
           })]
         }),
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
           className: "flex gap-px",
-          children: [metadata.title && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", {
+          children: [metadata.title && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
             className: "grow truncate bg-sigil-bg-light p-0.5 font-bold",
             children: metadata.title
-          }), metadata.artist && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", {
+          }), metadata.artist && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
             className: "grow truncate bg-sigil-bg-light p-0.5",
             children: metadata.artist
           })]
@@ -38745,7 +38663,7 @@ Data Directory: ${system.dataDirectory}`
     }
     let t23;
     if ($[67] !== t20 || $[68] !== t21 || $[69] !== t22) {
-      t23 = /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", {
+      t23 = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
         className: "flex grow flex-col gap-px",
         children: [t20, t21, t22]
       });
@@ -38785,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: {
@@ -38799,7 +38717,7 @@ Data Directory: ${system.dataDirectory}`
     }, [id, openNewWidow]);
     name = timecode?.name ? [...name, timecode.name] : name;
     if (isTimecodeGroup(timecode) && Object.values(timecode.timecodes).length) {
-      return Object.entries(timecode.timecodes).map(([key, child]) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TimecodeTreeDisplay, {
+      return Object.entries(timecode.timecodes).map(([key, child]) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TimecodeTreeDisplay, {
         config,
         id: extendId(id, key),
         type,
@@ -38811,26 +38729,26 @@ Data Directory: ${system.dataDirectory}`
         assignToOutput
       }, key));
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", {
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
       className: "relative flex grow flex-col text-timecode-usage-foreground",
       style: color && cssSigilColorUsageVariables("timecode-usage", sigilColorUsage(color)),
-      children: [/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TimecodeDisplay, {
+      children: [/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TimecodeDisplay, {
         id,
         timecode: isTimecodeInstance(timecode) ? timecode : EMPTY_TIMECODE,
         config,
-        headerComponents: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, {
-          children: [/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", {
+        headerComponents: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, {
+          children: [/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
             className: "flex grow items-start gap-0.25",
-            children: [/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", {
+            children: [/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
               className: " m-0.25 rounded-md border border-sigil-bg-light bg-timecode-usage-foreground px-1 py-0.25 text-sigil-control text-timecode-usage-text ",
               children: type
-            }), /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", {
+            }), /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
               className: cn("grow basis-0 truncate p-0.5", cnd(name.length, "font-bold", "italic opacity-50")),
               children: name.length ? name.join(" / ") : namePlaceholder
             })]
-          }), /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(ControlButtonGroup, {
+          }), /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(ControlButtonGroup, {
             className: "rounded-md bg-sigil-bg-light",
-            children: [/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ControlButton, {
+            children: [/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlButton, {
               variant: "toolbar",
               icon: "open_in_new",
               title: STRINGS.openInNewWindow,
@@ -38838,10 +38756,10 @@ Data Directory: ${system.dataDirectory}`
             }), buttons]
           })]
         })
-      }), assignToOutput && id && !isOutputInstanceId(id) && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SizeAwareDiv, {
+      }), assignToOutput && id && !isOutputInstanceId(id) && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SizeAwareDiv, {
         className: " absolute inset-0 flex cursor-pointer items-center justify-center bg-timecode-backdrop text-timecode-usage-text hover:bg-timecode-backdrop-hover ",
         onClick: () => assignToOutput(id),
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon2, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon2, {
           icon: "link",
           className: "text-block-icon"
         })
@@ -38849,14 +38767,14 @@ Data Directory: ${system.dataDirectory}`
     });
   };
   var FullscreenTimecodeDisplay = (t0) => {
-    const $ = (0, import_compiler_runtime9.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;
@@ -39027,12 +38945,12 @@ Data Directory: ${system.dataDirectory}`
     if (!instanceConfig) {
       let t32;
       if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
-        t32 = /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(SizeAwareDiv, {
+        t32 = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(SizeAwareDiv, {
           className: "\n          flex grow flex-col items-center justify-center gap-1 bg-sigil-bg-light\n          p-1 text-sigil-foreground-muted\n        ",
-          children: [/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon2, {
+          children: [/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon2, {
             icon: "question_mark",
             className: "text-block-icon"
-          }), /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", {
+          }), /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
             className: "text-center",
             children: STRINGS.errors.unknownTimecodeID
           })]
@@ -39045,9 +38963,9 @@ Data Directory: ${system.dataDirectory}`
     }
     let t3;
     if ($[34] !== id || $[35] !== instanceConfig || $[36] !== timecode) {
-      t3 = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", {
+      t3 = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
         className: "\n        flex h-0 grow flex-col gap-px overflow-y-auto bg-sigil-border\n        scrollbar-sigil\n      ",
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TimecodeTreeDisplay, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TimecodeTreeDisplay, {
           id,
           timecode,
           assignToOutput: null,
@@ -39117,21 +39035,117 @@ Data Directory: ${system.dataDirectory}`
   }
   var v4_default = v4;
 
+  // src/components/frontend/toolbox/content.tsx
+  var import_compiler_runtime8 = __toESM(require_compiler_runtime());
+  var import_jsx_runtime44 = __toESM(require_jsx_runtime());
+  var ExternalLink = (t0) => {
+    const $ = (0, import_compiler_runtime8.c)(7);
+    const {
+      href,
+      children
+    } = t0;
+    const {
+      openExternalLink
+    } = useBrowserContext();
+    let t1;
+    if ($[0] !== href || $[1] !== openExternalLink) {
+      t1 = (e) => {
+        e.preventDefault();
+        openExternalLink(href);
+      };
+      $[0] = href;
+      $[1] = openExternalLink;
+      $[2] = t1;
+    } else {
+      t1 = $[2];
+    }
+    let t2;
+    if ($[3] !== children || $[4] !== href || $[5] !== t1) {
+      t2 = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("a", {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        onClick: t1,
+        className: "\n        text-sigil-usage-hint-foreground no-underline\n        hover:underline\n      ",
+        children
+      });
+      $[3] = children;
+      $[4] = href;
+      $[5] = t1;
+      $[6] = t2;
+    } else {
+      t2 = $[6];
+    }
+    return t2;
+  };
+  var TextButton = (t0) => {
+    const $ = (0, import_compiler_runtime8.c)(3);
+    const {
+      onClick,
+      children
+    } = t0;
+    let t1;
+    if ($[0] !== children || $[1] !== onClick) {
+      t1 = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", {
+        onClick,
+        className: "\n        cursor-pointer text-sigil-usage-hint-foreground\n        hover:underline\n      ",
+        children
+      });
+      $[0] = children;
+      $[1] = onClick;
+      $[2] = t1;
+    } else {
+      t1 = $[2];
+    }
+    return t1;
+  };
+  var NoToolboxChildren = (t0) => {
+    const $ = (0, import_compiler_runtime8.c)(3);
+    const {
+      text
+    } = t0;
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon2, {
+        icon: "handyman",
+        className: "text-block-icon"
+      });
+      $[0] = t1;
+    } else {
+      t1 = $[0];
+    }
+    let t2;
+    if ($[1] !== text) {
+      t2 = /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(SizeAwareDiv, {
+        className: "\n        flex grow flex-col items-center justify-center gap-1 bg-sigil-bg-light\n        p-1 text-sigil-foreground-muted\n      ",
+        children: [t1, /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", {
+          className: "text-center",
+          children: text
+        })]
+      });
+      $[1] = text;
+      $[2] = t2;
+    } else {
+      t2 = $[2];
+    }
+    return t2;
+  };
+
   // 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 = () => {
@@ -39158,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;
     }
@@ -39402,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: {
@@ -39416,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 {
@@ -39435,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,
@@ -39455,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 {
@@ -39544,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,
@@ -39555,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 = () => {
@@ -39819,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,
@@ -39827,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"];
@@ -39913,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;
     }
@@ -39993,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 {
@@ -40020,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,
@@ -40040,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 {
@@ -40109,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,
@@ -40203,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"];
@@ -40281,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 = () => {
@@ -40323,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;
     }
@@ -40475,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 = () => {
@@ -40510,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;
     }
@@ -40615,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" ? {
@@ -40628,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 {
@@ -40647,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,
@@ -40667,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 {
@@ -40759,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,
@@ -40768,7 +40782,7 @@ Data Directory: ${system.dataDirectory}`
     } = t0;
     const {
       updateConfig
-    } = (0, import_react36.useContext)(ConfigContext);
+    } = (0, import_react35.useContext)(ConfigContext);
     const {
       inputs
     } = useApplicationState();
@@ -40909,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"];
@@ -40999,14 +41013,15 @@ Data Directory: ${system.dataDirectory}`
   }
 
   // src/components/frontend/toolbox/settings.tsx
-  var import_compiler_runtime14 = __toESM(require_compiler_runtime());
+  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
@@ -41120,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 {
@@ -41141,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;
@@ -41182,8 +41197,18 @@ Data Directory: ${system.dataDirectory}`
 
   // src/components/frontend/toolbox/settings.tsx
   var import_jsx_runtime49 = __toESM(require_jsx_runtime());
+  var ENABLED_DISABLED_OPTIONS = [{
+    value: "enabled",
+    label: STRINGS.general.enabled
+  }, {
+    value: "disabled",
+    label: STRINGS.general.disabled
+  }];
+  var DATE_FORMATTER = new Intl.DateTimeFormat(void 0, {
+    timeStyle: "medium"
+  });
   var Settings = (t0) => {
-    const $ = (0, import_compiler_runtime14.c)(16);
+    const $ = (0, import_compiler_runtime13.c)(29);
     const {
       setWindowMode
     } = t0;
@@ -41191,6 +41216,13 @@ Data Directory: ${system.dataDirectory}`
       preferences,
       updateBrowserPrefs
     } = useBrowserPreferences();
+    const {
+      config,
+      updateConfig
+    } = (0, import_react38.useContext)(ConfigContext);
+    const {
+      updates
+    } = useApplicationState();
     let t1;
     let t2;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -41259,15 +41291,9 @@ Data Directory: ${system.dataDirectory}`
     }
     let t8;
     if ($[10] !== preferences.color || $[11] !== t7) {
-      t8 = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", {
-        className: "\n          grow basis-0 overflow-y-auto bg-sigil-bg-light scrollbar-sigil\n        ",
-        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", {
-          className: "control-grid-large",
-          children: [t6, /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(AppearanceSwitcher, {
-            color: preferences.color,
-            onColorChange: t7
-          })]
-        })
+      t8 = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(AppearanceSwitcher, {
+        color: preferences.color,
+        onColorChange: t7
       });
       $[10] = preferences.color;
       $[11] = t7;
@@ -41276,44 +41302,1090 @@ Data Directory: ${system.dataDirectory}`
       t8 = $[12];
     }
     let t9;
-    if ($[13] !== t5 || $[14] !== t8) {
-      t9 = /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", {
+    if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+      t9 = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ControlLabel, {
+        children: STRINGS.updates.settingsLabel
+      });
+      $[13] = t9;
+    } else {
+      t9 = $[13];
+    }
+    const t10 = config.checkForUpdates ? "enabled" : "disabled";
+    let t11;
+    if ($[14] !== updateConfig) {
+      t11 = (value) => updateConfig((current_0) => ({
+        ...current_0,
+        checkForUpdates: value === "enabled"
+      }));
+      $[14] = updateConfig;
+      $[15] = t11;
+    } else {
+      t11 = $[15];
+    }
+    let t12;
+    if ($[16] !== t10 || $[17] !== t11) {
+      t12 = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ControlSelect, {
+        value: t10,
+        options: ENABLED_DISABLED_OPTIONS,
+        onChange: t11,
+        variant: "large"
+      });
+      $[16] = t10;
+      $[17] = t11;
+      $[18] = t12;
+    } else {
+      t12 = $[18];
+    }
+    let t13;
+    if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+      t13 = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ControlDetails, {
+        children: STRINGS.updates.settingsDetails
+      });
+      $[19] = t13;
+    } else {
+      t13 = $[19];
+    }
+    let t14;
+    if ($[20] !== updates) {
+      t14 = updates && "lastCheckedMillis" in updates && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ControlDetails, {
+        children: STRINGS.updates.lastChecked(DATE_FORMATTER.format(updates.lastCheckedMillis))
+      });
+      $[20] = updates;
+      $[21] = t14;
+    } else {
+      t14 = $[21];
+    }
+    let t15;
+    if ($[22] !== t12 || $[23] !== t14 || $[24] !== t8) {
+      t15 = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", {
+        className: "\n          grow basis-0 overflow-y-auto bg-sigil-bg-light scrollbar-sigil\n        ",
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", {
+          className: "control-grid-large",
+          children: [t6, t8, t9, t12, t13, t14]
+        })
+      });
+      $[22] = t12;
+      $[23] = t14;
+      $[24] = t8;
+      $[25] = t15;
+    } else {
+      t15 = $[25];
+    }
+    let t16;
+    if ($[26] !== t15 || $[27] !== t5) {
+      t16 = /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", {
         className: "flex grow flex-col",
-        children: [t5, t8]
+        children: [t5, t15]
       });
-      $[13] = t5;
-      $[14] = t8;
-      $[15] = t9;
+      $[26] = t15;
+      $[27] = t5;
+      $[28] = t16;
     } else {
-      t9 = $[15];
+      t16 = $[28];
     }
-    return t9;
+    return t16;
   };
 
-  // src/components/frontend/toolbox/root.tsx
+  // src/components/frontend/toolbox/license.tsx
+  var import_compiler_runtime18 = __toESM(require_compiler_runtime());
+  var import_react41 = __toESM(require_react());
+
+  // src/components/frontend/toolbox/logo.tsx
+  var import_compiler_runtime14 = __toESM(require_compiler_runtime());
   var import_jsx_runtime50 = __toESM(require_jsx_runtime());
-  var ToolboxRoot = (t0) => {
-    const $ = (0, import_compiler_runtime15.c)(64);
+  var TimecodeToolboxLogo = (props) => {
+    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", {
+        id: "b",
+        maskUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+          fill: "#fff",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "stroke-width": "50.12",
+          d: "m347.83 438.376 11.825 188.138-36.885 62.692v411.759h986.987v-411.76l-36.886-62.691 11.825-188.138z"
+        })
+      });
+      $[0] = t0;
+    } else {
+      t0 = $[0];
+    }
+    let t1;
+    if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("mask", {
+        id: "g",
+        maskUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+          fill: "#fff",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "stroke-width": "5.581",
+          d: "m523.18 899.13 300.24-394.065s34.365-35.915 46.091-69.549c11.727-33.634.988-72.204-2.46-104.403-5.358-50.016 59.283-109.877 59.283-109.877s69.906-48.692 76.993-40.385-46.397 95.284-39.707 122.272c10.605 42.782 80.61 74.691 115.162 58.516s54.191-119.781 68.45-123.27c14.259-3.49 31.217 85.629 29.104 137.042s-52.322 83.478-83.625 93.094-71.227 10.846-102.507 35.2-361.42 471.203-361.42 471.203z"
+        })
+      });
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    let t2;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("mask", {
+        id: "f",
+        maskUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+          fill: "#fff",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "stroke-width": "5.581",
+          d: "m523.18 899.13 300.24-394.065s34.365-35.915 46.091-69.549c11.727-33.634.988-72.204-2.46-104.403-5.358-50.016 59.283-109.877 59.283-109.877s69.906-48.692 76.993-40.385-46.397 95.284-39.707 122.272c10.605 42.782 80.61 74.691 115.162 58.516s54.191-119.781 68.45-123.27c14.259-3.49 31.217 85.629 29.104 137.042s-52.322 83.478-83.625 93.094-71.227 10.846-102.507 35.2-361.42 471.203-361.42 471.203z"
+        })
+      });
+      $[2] = t2;
+    } else {
+      t2 = $[2];
+    }
+    let t3;
+    if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("mask", {
+        id: "e",
+        maskUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+          fill: "#fff",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "stroke-width": "5.581",
+          d: "m523.18 899.13 300.24-394.065s34.365-35.915 46.091-69.549c11.727-33.634.988-72.204-2.46-104.403-5.358-50.016 59.283-109.877 59.283-109.877s69.906-48.692 76.993-40.385-46.397 95.284-39.707 122.272c10.605 42.782 80.61 74.691 115.162 58.516s54.191-119.781 68.45-123.27c14.259-3.49 31.217 85.629 29.104 137.042s-52.322 83.478-83.625 93.094-71.227 10.846-102.507 35.2-361.42 471.203-361.42 471.203z"
+        })
+      });
+      $[3] = t3;
+    } else {
+      t3 = $[3];
+    }
+    let t4;
+    if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+      t4 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("mask", {
+        id: "d",
+        maskUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+          fill: "#fff",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "stroke-width": "5.581",
+          d: "m523.18 899.13 300.24-394.065s34.365-35.915 46.091-69.549c11.727-33.634.988-72.204-2.46-104.403-5.358-50.016 59.283-109.877 59.283-109.877s69.906-48.692 76.993-40.385-46.397 95.284-39.707 122.272c10.605 42.782 80.61 74.691 115.162 58.516s54.191-119.781 68.45-123.27c14.259-3.49 31.217 85.629 29.104 137.042s-52.322 83.478-83.625 93.094-71.227 10.846-102.507 35.2-361.42 471.203-361.42 471.203z"
+        })
+      });
+      $[4] = t4;
+    } else {
+      t4 = $[4];
+    }
+    let t5;
+    if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+      t5 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("mask", {
+        id: "c",
+        maskUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+          fill: "#fff",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "stroke-width": "5.581",
+          d: "m523.18 899.13 300.24-394.065s34.365-35.915 46.091-69.549c11.727-33.634.988-72.204-2.46-104.403-5.358-50.016 59.283-109.877 59.283-109.877s69.906-48.692 76.993-40.385-46.397 95.284-39.707 122.272c10.605 42.782 80.61 74.691 115.162 58.516s54.191-119.781 68.45-123.27c14.259-3.49 31.217 85.629 29.104 137.042s-52.322 83.478-83.625 93.094-71.227 10.846-102.507 35.2-361.42 471.203-361.42 471.203z"
+        })
+      });
+      $[5] = t5;
+    } else {
+      t5 = $[5];
+    }
+    let t6;
+    if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("mask", {
+        id: "k",
+        maskUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+          fill: "#fff",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "stroke-width": "7.033",
+          d: "m209.947 266.846 76.909 154.59 31.315-12.212 281.763 384.488 39.973-29.294-281.646-384.327 21.561-26.783-124.246-119.9Z"
+        })
+      });
+      $[6] = t6;
+    } else {
+      t6 = $[6];
+    }
+    let t7;
+    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+      t7 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("mask", {
+        id: "j",
+        maskUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+          fill: "#fff",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "stroke-width": "7.033",
+          d: "m209.947 266.846 76.909 154.59 31.315-12.212 281.763 384.488 39.973-29.294-281.646-384.327 21.561-26.783-124.246-119.9Z"
+        })
+      });
+      $[7] = t7;
+    } else {
+      t7 = $[7];
+    }
+    let t8;
+    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+      t8 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("mask", {
+        id: "i",
+        maskUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+          fill: "#fff",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "stroke-width": "7.033",
+          d: "m209.947 266.846 76.909 154.59 31.315-12.212 281.763 384.488 39.973-29.294-281.646-384.327 21.561-26.783-124.246-119.9Z"
+        })
+      });
+      $[8] = t8;
+    } else {
+      t8 = $[8];
+    }
+    let t9;
+    if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+      t9 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("mask", {
+        id: "h",
+        maskUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+          fill: "#fff",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "stroke-width": "7.033",
+          d: "m209.947 266.846 76.909 154.59 31.315-12.212 281.763 384.488 39.973-29.294-281.646-384.327 21.561-26.783-124.246-119.9Z"
+        })
+      });
+      $[9] = t9;
+    } else {
+      t9 = $[9];
+    }
+    let t10;
+    if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+      t10 = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("defs", {
+        children: [t0, t1, t2, t3, t4, t5, t6, t7, t8, t9, /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("filter", {
+          id: "a",
+          width: "1.201",
+          height: "1.19",
+          x: "-.101",
+          y: "-.074",
+          "color-interpolation-filters": "sRGB",
+          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("feGaussianBlur", {
+            stdDeviation: "10.298"
+          })
+        })]
+      });
+      $[10] = t10;
+    } else {
+      t10 = $[10];
+    }
+    let t11;
+    if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+      t11 = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("g", {
+        stroke: "#000",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        filter: "url(#a)",
+        opacity: ".25",
+        transform: "translate(-216.03 -84.295)scale(1.10099)",
+        children: [/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+          "stroke-width": "153.76517303999998",
+          d: "m337.226 438.886 12.093 192.397-37.72 64.11v421.08h1009.328v-421.08l-37.72-64.11 12.093-192.397z",
+          opacity: "1"
+        }), /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+          "stroke-width": "80.096",
+          d: "m671.405 893.22 272.7-357.92s31.213-32.62 41.864-63.169.898-65.581-2.235-94.827c-4.866-45.427 53.846-99.798 53.846-99.798s63.494-44.226 69.93-36.68-42.14 86.544-36.064 111.056c9.632 38.858 73.216 67.84 104.599 53.149 31.382-14.691 49.22-108.795 62.171-111.964s28.353 77.775 26.435 124.473-47.523 75.82-75.955 84.554-64.694 9.851-93.104 31.972c-28.41 22.12-328.269 427.981-328.269 427.981z"
+        }), /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+          "stroke-width": "80.096",
+          d: "m386.903 318.933 69.855 140.41 28.443-11.092 255.918 349.22 36.307-26.606L521.614 421.79l19.583-24.326-112.85-108.903z"
+        })]
+      });
+      $[11] = t11;
+    } else {
+      t11 = $[11];
+    }
+    let t12;
+    let t13;
+    let t14;
+    let t15;
+    let t16;
+    let t17;
+    let t18;
+    let t19;
+    let t20;
+    let t21;
+    let t22;
+    let t23;
+    let t24;
+    let t25;
+    let t26;
+    let t27;
+    let t28;
+    let t29;
+    let t30;
+    if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+      t12 = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("g", {
+        stroke: "#fff",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        children: [/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+          fill: "#8c63d9",
+          "stroke-width": "165.54595738999998",
+          d: "m166.927 398.352 13.02 207.137-40.611 69.024v453.341h1086.661V674.513l-40.61-69.024 13.02-207.137H424.595Z"
+        }), /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+          fill: "none",
+          "stroke-width": "73.48667853999999",
+          d: "m209.947 266.846 76.909 154.59 31.315-12.212 281.763 384.488 39.973-29.294-281.646-384.327 21.561-26.783-124.246-119.9z"
+        }), /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+          fill: "none",
+          "stroke-width": "66.746",
+          d: "m671.405 893.22 272.7-357.92s31.213-32.62 41.864-63.169.898-65.581-2.235-94.827c-4.866-45.427 53.846-99.798 53.846-99.798s63.494-44.226 69.93-36.68-42.14 86.544-36.064 111.056c9.632 38.858 73.216 67.84 104.599 53.149 31.382-14.691 49.22-108.795 62.171-111.964s28.353 77.775 26.435 124.473-47.523 75.82-75.955 84.554-64.694 9.851-93.104 31.972c-28.41 22.12-328.269 427.981-328.269 427.981z",
+          transform: "translate(-216.03 -84.295)scale(1.10099)"
+        })]
+      });
+      t13 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+        fill: "#8c63d9",
+        stroke: "#263238",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "55.182",
+        d: "m166.927 398.352 13.02 207.137-40.611 69.023v453.342h1086.661V674.512l-40.61-69.023 13.02-207.137z"
+      });
+      t14 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+        fill: "#cc7000",
+        stroke: "#ffba66",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "38.593",
+        d: "M322.77 689.206h986.986l-36.885-62.693H359.655Z",
+        mask: "url(#b)",
+        transform: "translate(-216.03 -84.295)scale(1.10099)"
+      });
+      t15 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+        fill: "#ff8c00",
+        d: "m1185.387 605.49 13.02-207.138H166.926l13.02 207.137z"
+      });
+      t16 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+        fill: "none",
+        stroke: "#263238",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "29.395",
+        d: "m523.18 899.13 300.24-394.065s34.365-35.915 46.091-69.549c11.727-33.634.988-72.204-2.46-104.403-5.358-50.016 59.283-109.877 59.283-109.877s69.906-48.692 76.993-40.385-46.397 95.284-39.707 122.272c10.605 42.782 80.61 74.691 115.162 58.516s54.191-119.781 68.45-123.27c14.259-3.49 31.217 85.629 29.104 137.042s-52.322 83.478-83.625 93.094-71.227 10.846-102.507 35.2-361.42 471.203-361.42 471.203z"
+      });
+      t17 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+        fill: "#eceff1",
+        d: "m916.084 52.25 420.493 180.531-532.698 916.066-476.546-308.58Z",
+        mask: "url(#c)"
+      });
+      t18 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+        fill: "#fff",
+        d: "M856.06 362.55s35.273 37.417 44.671 47.481 30.133 23.878 30.133 23.878-19.577-12.395-133.162 132.35c-113.586 144.744-274.29 356.33-274.29 356.33l-74.43-62.208z",
+        mask: "url(#d)"
+      });
+      t19 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+        fill: "#fff",
+        d: "M1003.804 214.75s-61.324 47.811-85.42 85.1c-24.096 37.29-8.4 134.552-8.4 134.552l-119.375-94.095 193.083-235.652 92.963 84.914z",
+        mask: "url(#e)"
+      });
+      t20 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+        fill: "#cfd8dc",
+        d: "M1128.958 213.086s18.838 96.946 18.548 125.56c-.29 28.612-8.26 73.801-33.74 89.024s-63.802 38.756-115.38 20.88-172.024-84.115-172.024-84.115S981.864 470.314 1006.22 474.08s112.252 10.05 112.252 10.05l90.662-46.814 21.129-221.796z",
+        mask: "url(#f)"
+      });
+      t21 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+        fill: "#cfd8dc",
+        d: "M1041.552 459.425s-36.954 8.644-65.379 28.54-170.117 214.54-170.117 214.54L582.36 996.25l52.042 26.094 450.026-523.432z",
+        mask: "url(#g)"
+      });
+      t22 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+        fill: "none",
+        stroke: "#263238",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "29.395",
+        d: "m209.947 266.846 76.909 154.59 31.315-12.212 281.763 384.488 39.973-29.294-281.646-384.327 21.561-26.783-124.246-119.9Z"
+      });
+      t23 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+        fill: "#eceff1",
+        d: "m105.922 257.574 152.745-109.918 438.66 518.005-348.484 67.536Z",
+        mask: "url(#h)"
+      });
+      t24 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+        fill: "#fff",
+        d: "M326.613 211.828s-59.58 39.097-77.947 64.605C232.303 299.16 204.56 380.52 204.56 380.52l-48.272-119.485 119.003-77.722z",
+        mask: "url(#i)"
+      });
+      t25 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+        fill: "#cfd8dc",
+        d: "M248.625 369.326s24.346 28.663 44.076 34.332c15.33 4.405 30.118-5.584 30.118-5.584l212.415 286.577-185.65 5.65z",
+        mask: "url(#j)"
+      });
+      t26 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+        fill: "#cfd8dc",
+        d: "M355.22 375.68s11.46-16.196 12.454-25.01c3.052-27.043-32.344-49.296-32.344-49.296l77.092 54.069-53.634 24.84z",
+        mask: "url(#k)"
+      });
+      t27 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+        fill: "#ffba66",
+        d: "M170.482 652.84h1025.265v453.341H170.482Z"
+      });
+      t28 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+        fill: "#ff8c00",
+        d: "M139.336 674.512h1086.662v453.342H139.336Z"
+      });
+      t29 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("rect", {
+        width: "875.482",
+        height: "332.3",
+        x: "244.926",
+        y: "735.033",
+        fill: "#cc7000",
+        rx: "77.883",
+        ry: "77.883"
+      });
+      t30 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", {
+        fill: "#fff",
+        d: "M316.789 901.245q0-47.968 15.206-71.828 15.206-23.984 45.743-23.984 30.66 0 45.866 23.86t15.206 71.952q0 47.968-15.206 71.828-15.207 23.86-45.866 23.86-30.537 0-45.743-23.86-15.206-23.984-15.206-71.828m42.528 49.328q5.81 15.453 18.42 15.453 12.734 0 18.545-15.453 5.81-15.454 5.81-49.328 0-12.857-.865-22.995l-43.146 68.737q.618 1.978 1.236 3.586m18.42-114.233q-12.61 0-18.42 15.453-5.81 15.454-5.81 49.452 0 10.508.494 19.162l42.528-67.872-.247-.742q-5.81-15.453-18.544-15.453m91.486 64.905q0-47.968 15.206-71.828 15.206-23.984 45.742-23.984 30.66 0 45.867 23.86t15.206 71.952q0 47.968-15.206 71.828-15.207 23.86-45.867 23.86-30.536 0-45.742-23.86-15.206-23.984-15.206-71.828m42.528 49.328q5.81 15.453 18.42 15.453 12.734 0 18.545-15.453 5.81-15.454 5.81-49.328 0-12.858-.865-22.995l-43.147 68.737q.619 1.978 1.237 3.586m18.42-114.233q-12.61 0-18.42 15.453-5.81 15.454-5.81 49.452 0 10.508.494 19.162l42.528-67.872-.247-.742q-5.81-15.453-18.545-15.453M661.96 861.93h41.169v45.124h-41.169Zm0 86.045h41.169v45.372h-41.169Zm112.131-46.731q0-47.968 15.207-71.828 15.206-23.984 45.742-23.984 30.66 0 45.866 23.86 15.207 23.86 15.207 71.952 0 47.968-15.207 71.828-15.206 23.86-45.866 23.86-30.536 0-45.742-23.86-15.207-23.984-15.207-71.828m42.528 49.328q5.811 15.453 18.421 15.453 12.734 0 18.544-15.453 5.81-15.454 5.81-49.328 0-12.858-.865-22.995l-43.146 68.737q.618 1.978 1.236 3.586M835.04 836.34q-12.61 0-18.42 15.453-5.811 15.454-5.811 49.452 0 10.508.494 19.162l42.529-67.872-.248-.742q-5.81-15.453-18.544-15.453m91.485 64.905q0-47.968 15.206-71.828 15.207-23.984 45.743-23.984 30.66 0 45.866 23.86t15.206 71.952q0 47.968-15.206 71.828t-45.866 23.86q-30.536 0-45.743-23.86-15.206-23.984-15.206-71.828m42.528 49.328q5.81 15.453 18.42 15.453 12.735 0 18.545-15.453 5.81-15.454 5.81-49.328 0-12.858-.865-22.995l-43.146 68.737q.618 1.978 1.236 3.586m18.42-114.233q-12.61 0-18.42 15.453-5.81 15.454-5.81 49.452 0 10.508.494 19.162l42.528-67.872-.247-.742q-5.81-15.453-18.544-15.453",
+        "aria-label": "00:00"
+      });
+      $[12] = t12;
+      $[13] = t13;
+      $[14] = t14;
+      $[15] = t15;
+      $[16] = t16;
+      $[17] = t17;
+      $[18] = t18;
+      $[19] = t19;
+      $[20] = t20;
+      $[21] = t21;
+      $[22] = t22;
+      $[23] = t23;
+      $[24] = t24;
+      $[25] = t25;
+      $[26] = t26;
+      $[27] = t27;
+      $[28] = t28;
+      $[29] = t29;
+      $[30] = t30;
+    } else {
+      t12 = $[12];
+      t13 = $[13];
+      t14 = $[14];
+      t15 = $[15];
+      t16 = $[16];
+      t17 = $[17];
+      t18 = $[18];
+      t19 = $[19];
+      t20 = $[20];
+      t21 = $[21];
+      t22 = $[22];
+      t23 = $[23];
+      t24 = $[24];
+      t25 = $[25];
+      t26 = $[26];
+      t27 = $[27];
+      t28 = $[28];
+      t29 = $[29];
+      t30 = $[30];
+    }
+    let t31;
+    if ($[31] !== props) {
+      t31 = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 1365.333 1365.333",
+        ...props,
+        children: [t10, t11, t12, t13, t14, t15, t16, t17, t18, t19, t20, t21, t22, t23, t24, t25, t26, t27, t28, t29, t30]
+      });
+      $[31] = props;
+      $[32] = t31;
+    } else {
+      t31 = $[32];
+    }
+    return t31;
+  };
+
+  // src/components/frontend/toolbox/core/layout.tsx
+  var import_compiler_runtime17 = __toESM(require_compiler_runtime());
+  var import_react40 = __toESM(require_react());
+
+  // src/components/frontend/toolbox/core/footer.tsx
+  var import_compiler_runtime15 = __toESM(require_compiler_runtime());
+  var import_jsx_runtime51 = __toESM(require_jsx_runtime());
+  var Footer = (t0) => {
+    const $ = (0, import_compiler_runtime15.c)(7);
     const {
-      info
+      openLicenseDetails
     } = t0;
-    const [windowMode, setWindowMode] = (0, import_react39.useState)(null);
+    let t1;
+    let t2;
+    let t3;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", {
+        children: ["Created by", "\xA0", /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ExternalLink, {
+          href: "https://arcanewizards.com",
+          children: "Arcane Wizards"
+        })]
+      });
+      t2 = /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ToolbarDivider, {});
+      t3 = /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ExternalLink, {
+        href: SOURCE_CODE_URL,
+        children: STRINGS.sourceCode
+      });
+      $[0] = t1;
+      $[1] = t2;
+      $[2] = t3;
+    } else {
+      t1 = $[0];
+      t2 = $[1];
+      t3 = $[2];
+    }
+    let t4;
+    if ($[3] !== openLicenseDetails) {
+      t4 = openLicenseDetails && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, {
+        children: [/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ToolbarDivider, {}), /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TextButton, {
+          onClick: openLicenseDetails,
+          children: STRINGS.license
+        })]
+      });
+      $[3] = openLicenseDetails;
+      $[4] = t4;
+    } else {
+      t4 = $[4];
+    }
+    let t5;
+    if ($[5] !== t4) {
+      t5 = /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", {
+        className: "\n        flex items-center justify-center gap-1 border-t border-sigil-border\n        bg-sigil-bg-dark p-1 text-[80%]\n      ",
+        children: [t1, t2, t3, t4]
+      });
+      $[5] = t4;
+      $[6] = t5;
+    } else {
+      t5 = $[6];
+    }
+    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) => {
+    const $ = (0, import_compiler_runtime17.c)(21);
     const {
-      config
-    } = info;
+      modes,
+      children,
+      licenseMode,
+      footer
+    } = t0;
+    const [windowMode, setWindowMode] = (0, import_react40.useState)(null);
     const {
-      sendMessage,
-      call,
       connection,
       reconnect
-    } = (0, import_react39.useContext)(StageContext);
-    const [dialogMode, setDialogMode] = (0, import_react39.useState)(null);
-    const [assignToOutput, setAssignToOutput] = (0, import_react39.useState)(null);
+    } = (0, import_react40.useContext)(StageContext);
     const {
       preferences
     } = useBrowserPreferences();
     useRootHintVariables(preferences.color);
     let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", {
+        className: "\n              flex h-full min-h-[36px] grow items-center justify-center px-1\n              app-title-bar\n            ",
+        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", {
+          className: "font-bold text-hint-gradient",
+          children: STRINGS.title
+        })
+      });
+      $[0] = t1;
+    } else {
+      t1 = $[0];
+    }
+    let t2;
+    if ($[1] !== modes || $[2] !== windowMode) {
+      t2 = modes && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, {
+        children: [/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ToolbarDivider, {}), Object.entries(modes).map((t32) => {
+          const [key, t42] = t32;
+          const {
+            icon,
+            title
+          } = t42;
+          return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ControlButton, {
+            onClick: () => setWindowMode((mode) => mode === key ? null : key),
+            variant: "titlebar",
+            icon,
+            active: windowMode === key,
+            title: STRINGS.toggle(title)
+          }, key);
+        })]
+      });
+      $[1] = modes;
+      $[2] = windowMode;
+      $[3] = t2;
+    } else {
+      t2 = $[3];
+    }
+    let t3;
+    if ($[4] !== t2) {
+      t3 = /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ToolbarWrapper, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(ToolbarRow, {
+          children: [t1, t2]
+        })
+      });
+      $[4] = t2;
+      $[5] = t3;
+    } else {
+      t3 = $[5];
+    }
+    let t4;
+    if ($[6] !== children || $[7] !== connection.state || $[8] !== modes || $[9] !== reconnect || $[10] !== windowMode) {
+      t4 = connection.state !== "connected" ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(SizeAwareDiv, {
+        className: "\n              flex grow flex-col items-center justify-center gap-1\n              bg-sigil-bg-light p-1 text-sigil-foreground-muted\n            ",
+        children: [/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon2, {
+          icon: "signal_disconnected",
+          className: "text-block-icon"
+        }), /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", {
+          className: "text-center",
+          children: STRINGS.connectionError
+        }), /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ControlButton, {
+          onClick: reconnect,
+          variant: "large",
+          icon: "replay",
+          children: STRINGS.reconnect
+        })]
+      }) : windowMode && modes?.[windowMode] ? modes[windowMode].child(setWindowMode) : children;
+      $[6] = children;
+      $[7] = connection.state;
+      $[8] = modes;
+      $[9] = reconnect;
+      $[10] = windowMode;
+      $[11] = t4;
+    } else {
+      t4 = $[11];
+    }
+    let t5;
+    if ($[12] !== t4) {
+      t5 = /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", {
+        className: "relative flex h-0 grow flex-col",
+        children: t4
+      });
+      $[12] = t4;
+      $[13] = t5;
+    } else {
+      t5 = $[13];
+    }
+    let t6;
+    if ($[14] !== footer || $[15] !== licenseMode) {
+      t6 = footer && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Footer, {
+        openLicenseDetails: licenseMode && (() => setWindowMode((mode_0) => mode_0 === licenseMode ? null : licenseMode))
+      });
+      $[14] = footer;
+      $[15] = licenseMode;
+      $[16] = t6;
+    } else {
+      t6 = $[16];
+    }
+    let t7;
+    if ($[17] !== t3 || $[18] !== t5 || $[19] !== t6) {
+      t7 = /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", {
+        className: "flex h-screen flex-col",
+        children: [t3, t5, t6]
+      });
+      $[17] = t3;
+      $[18] = t5;
+      $[19] = t6;
+      $[20] = t7;
+    } else {
+      t7 = $[20];
+    }
+    return t7;
+  };
+
+  // src/components/frontend/toolbox/license.tsx
+  var import_jsx_runtime53 = __toESM(require_jsx_runtime());
+  var LicenseContent = (t0) => {
+    const $ = (0, import_compiler_runtime18.c)(4);
+    const {
+      license
+    } = t0;
+    let t1;
+    if ($[0] !== license) {
+      t1 = license.split("\n\n").map(_temp4);
+      $[0] = license;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    let t2;
+    if ($[2] !== t1) {
+      t2 = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", {
+        className: "flex flex-col gap-2 rounded-md bg-sigil-bg-light p-2",
+        children: t1
+      });
+      $[2] = t1;
+      $[3] = t2;
+    } else {
+      t2 = $[3];
+    }
+    return t2;
+  };
+  var License = (t0) => {
+    const $ = (0, import_compiler_runtime18.c)(11);
+    const {
+      license,
+      setWindowMode
+    } = t0;
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TimecodeToolboxLogo, {
+        className: "h-[20%] max-h-[420px] min-h-[110px] w-full"
+      });
+      $[0] = t1;
+    } else {
+      t1 = $[0];
+    }
+    let t2;
+    if ($[1] !== license) {
+      t2 = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(LicenseContent, {
+        license
+      });
+      $[1] = license;
+      $[2] = t2;
+    } else {
+      t2 = $[2];
+    }
+    let t3;
+    if ($[3] !== setWindowMode) {
+      t3 = () => setWindowMode(null);
+      $[3] = setWindowMode;
+      $[4] = t3;
+    } else {
+      t3 = $[4];
+    }
+    let t4;
+    if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+      t4 = STRINGS.close(STRINGS.license);
+      $[5] = t4;
+    } else {
+      t4 = $[5];
+    }
+    let t5;
+    if ($[6] !== t3) {
+      t5 = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", {
+        className: "flex justify-center p-2",
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ControlButton, {
+          onClick: t3,
+          variant: "large",
+          icon: "close",
+          children: t4
+        })
+      });
+      $[6] = t3;
+      $[7] = t5;
+    } else {
+      t5 = $[7];
+    }
+    let t6;
+    if ($[8] !== t2 || $[9] !== t5) {
+      t6 = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", {
+        className: "flex grow flex-col",
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", {
+          className: "\n          flex grow basis-0 flex-col overflow-y-auto px-2 pb-2 scrollbar-sigil\n        ",
+          children: [t1, t2, t5]
+        })
+      });
+      $[8] = t2;
+      $[9] = t5;
+      $[10] = t6;
+    } else {
+      t6 = $[10];
+    }
+    return t6;
+  };
+  var LicenseGate = (t0) => {
+    const $ = (0, import_compiler_runtime18.c)(14);
+    const {
+      info
+    } = t0;
+    const {
+      sendMessage
+    } = (0, import_react41.useContext)(StageContext);
+    let t1;
+    if ($[0] !== info.hash || $[1] !== info.key || $[2] !== sendMessage) {
+      t1 = () => {
+        sendMessage?.({
+          type: "component-message",
+          namespace: "timecode-toolbox",
+          component: "license-gate",
+          componentKey: info.key,
+          action: "accept-license",
+          hash: info.hash
+        });
+      };
+      $[0] = info.hash;
+      $[1] = info.key;
+      $[2] = sendMessage;
+      $[3] = t1;
+    } else {
+      t1 = $[3];
+    }
+    const acceptLicense = t1;
+    let t2;
+    if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = {
+        debug: {
+          child: _temp23,
+          icon: "bug_report",
+          title: STRINGS.debugger
+        }
+      };
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    let t3;
+    let t4;
+    if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TimecodeToolboxLogo, {
+        className: "h-[20%] max-h-[420px] min-h-[110px] w-full"
+      });
+      t4 = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("h2", {
+        className: "text-center text-sigil-usage-hint-foreground",
+        children: STRINGS.licensePrompt
+      });
+      $[5] = t3;
+      $[6] = t4;
+    } else {
+      t3 = $[5];
+      t4 = $[6];
+    }
+    let t5;
+    if ($[7] !== info.license) {
+      t5 = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(LicenseContent, {
+        license: info.license
+      });
+      $[7] = info.license;
+      $[8] = t5;
+    } else {
+      t5 = $[8];
+    }
+    let t6;
+    if ($[9] !== acceptLicense) {
+      t6 = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", {
+        className: "flex justify-center p-2",
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ControlButton, {
+          onClick: acceptLicense,
+          variant: "large",
+          icon: "check",
+          primary: true,
+          children: STRINGS.acceptLicense
+        })
+      });
+      $[9] = acceptLicense;
+      $[10] = t6;
+    } else {
+      t6 = $[10];
+    }
+    let t7;
+    if ($[11] !== t5 || $[12] !== t6) {
+      t7 = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Layout, {
+        footer: true,
+        modes: t2,
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", {
+          className: "\n          flex grow basis-0 flex-col overflow-y-auto px-2 pb-2 scrollbar-sigil\n        ",
+          children: [t3, t4, t5, t6]
+        })
+      });
+      $[11] = t5;
+      $[12] = t6;
+      $[13] = t7;
+    } else {
+      t7 = $[13];
+    }
+    return t7;
+  };
+  function _temp4(paragraph, index2) {
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", {
+      className: "m-0",
+      children: paragraph.replace(/\n/g, " ").trim()
+    }, index2);
+  }
+  function _temp23() {
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Debugger, {
+      title: STRINGS.debugger,
+      className: "size-full"
+    });
+  }
+
+  // src/components/frontend/toolbox/core/updates.tsx
+  var import_compiler_runtime19 = __toESM(require_compiler_runtime());
+  var import_react42 = __toESM(require_react());
+  var import_jsx_runtime54 = __toESM(require_jsx_runtime());
+  var UpdateBanner = () => {
+    const $ = (0, import_compiler_runtime19.c)(19);
+    const {
+      updates
+    } = useApplicationState();
+    const {
+      version
+    } = useSystemInformation();
+    const {
+      openExternalLink
+    } = useBrowserContext();
+    const [displayState, setDisplayState] = (0, import_react42.useState)();
+    let t0;
+    let t1;
+    if ($[0] !== updates) {
+      t0 = () => {
+        if (updates?.type !== "loading") {
+          setDisplayState(updates);
+        }
+      };
+      t1 = [updates];
+      $[0] = updates;
+      $[1] = t0;
+      $[2] = t1;
+    } else {
+      t0 = $[1];
+      t1 = $[2];
+    }
+    (0, import_react42.useEffect)(t0, t1);
+    let t2;
+    if ($[3] !== displayState || $[4] !== openExternalLink) {
+      t2 = () => {
+        if (displayState?.type === "updates-available" && displayState.response.downloadUrl) {
+          openExternalLink(displayState.response.downloadUrl);
+        }
+      };
+      $[3] = displayState;
+      $[4] = openExternalLink;
+      $[5] = t2;
+    } else {
+      t2 = $[5];
+    }
+    const openDownloadLink = t2;
+    if (displayState?.type === "error") {
+      let t3;
+      if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+        t3 = /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon2, {
+          icon: "error"
+        });
+        $[6] = t3;
+      } else {
+        t3 = $[6];
+      }
+      let t4;
+      if ($[7] !== displayState.error) {
+        t4 = /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", {
+          className: "\n          flex items-center justify-center gap-2 border-b\n          border-sigil-usage-orange-border bg-sigil-usage-orange-background p-1\n          text-sigil-usage-orange-text\n        ",
+          children: [t3, displayState.error]
+        });
+        $[7] = displayState.error;
+        $[8] = t4;
+      } else {
+        t4 = $[8];
+      }
+      return t4;
+    }
+    if (displayState?.type === "updates-available") {
+      let t3;
+      if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+        t3 = /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon2, {
+          icon: "upgrade"
+        });
+        $[9] = t3;
+      } else {
+        t3 = $[9];
+      }
+      let t4;
+      if ($[10] !== displayState.response.latestVersion || $[11] !== version) {
+        t4 = STRINGS.updates.updateAvailable(version, displayState.response.latestVersion);
+        $[10] = displayState.response.latestVersion;
+        $[11] = version;
+        $[12] = t4;
+      } else {
+        t4 = $[12];
+      }
+      let t5;
+      if ($[13] !== displayState.response.downloadUrl || $[14] !== openDownloadLink) {
+        t5 = displayState.response.downloadUrl && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("button", {
+          className: "\n              flex cursor-pointer items-center gap-0.5 rounded-md border\n              border-sigil-usage-blue-selected-border\n              bg-sigil-usage-blue-selected-background px-1 py-0.5\n              text-sigil-usage-blue-text\n              hover:bg-sigil-usage-blue-selected-border\n            ",
+          onClick: openDownloadLink,
+          children: [/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon2, {
+            icon: "download"
+          }), STRINGS.updates.download]
+        });
+        $[13] = displayState.response.downloadUrl;
+        $[14] = openDownloadLink;
+        $[15] = t5;
+      } else {
+        t5 = $[15];
+      }
+      let t6;
+      if ($[16] !== t4 || $[17] !== t5) {
+        t6 = /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", {
+          className: "\n          flex items-center justify-center gap-2 border-b\n          border-sigil-usage-blue-border bg-sigil-usage-blue-background p-1\n          text-sigil-usage-blue-text\n        ",
+          children: [t3, t4, t5]
+        });
+        $[16] = t4;
+        $[17] = t5;
+        $[18] = t6;
+      } else {
+        t6 = $[18];
+      }
+      return t6;
+    }
+    return null;
+  };
+
+  // src/components/frontend/toolbox/root.tsx
+  var import_jsx_runtime55 = __toESM(require_jsx_runtime());
+  var ToolboxRoot = (t0) => {
+    const $ = (0, import_compiler_runtime20.c)(43);
+    const {
+      info
+    } = t0;
+    const {
+      config
+    } = info;
+    const {
+      sendMessage,
+      call
+    } = (0, import_react43.useContext)(StageContext);
+    const [dialogMode, setDialogMode] = (0, import_react43.useState)(null);
+    const [assignToOutput, setAssignToOutput] = (0, import_react43.useState)(null);
+    let t1;
     let t2;
     if ($[0] !== assignToOutput) {
       t1 = () => {
@@ -41337,7 +42409,7 @@ Data Directory: ${system.dataDirectory}`
       t1 = $[1];
       t2 = $[2];
     }
-    (0, import_react39.useEffect)(t1, t2);
+    (0, import_react43.useEffect)(t1, t2);
     let t3;
     if ($[3] !== config || $[4] !== info.key || $[5] !== sendMessage) {
       t3 = (change) => {
@@ -41505,237 +42577,142 @@ Data Directory: ${system.dataDirectory}`
     }
     t14 = t15;
     const windowedTimecodeId = t14;
-    const isMainWindow = windowedTimecodeId === null;
     let t16;
     let t17;
-    if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
-      t17 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", {
-        className: "\n                flex h-full min-h-[36px] grow items-center justify-center px-1\n                app-title-bar\n              ",
-        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", {
-          className: "font-bold text-hint-gradient",
-          children: STRINGS.title
-        })
-      });
-      $[26] = t17;
-    } else {
-      t17 = $[26];
-    }
-    let t18;
-    if ($[27] !== windowMode) {
-      t18 = isMainWindow && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, {
-        children: [/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ToolbarDivider, {}), /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ControlButton, {
-          onClick: () => setWindowMode(_temp4),
-          variant: "titlebar",
-          icon: "settings",
-          active: windowMode === "settings",
-          title: STRINGS.toggle(STRINGS.settings.title)
-        }), /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ControlButton, {
-          onClick: () => setWindowMode(_temp23),
-          variant: "titlebar",
-          icon: "bug_report",
-          active: windowMode === "debug",
-          title: STRINGS.toggle(STRINGS.debugger)
-        })]
-      });
-      $[27] = windowMode;
-      $[28] = t18;
-    } else {
-      t18 = $[28];
-    }
-    let t19;
-    if ($[29] !== t18) {
-      t19 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ToolbarWrapper, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ToolbarRow, {
-          children: [t17, t18]
+    if ($[26] !== assignToOutput || $[27] !== assignToOutputCallback || $[28] !== dialogMode || $[29] !== info.license) {
+      t17 = windowedTimecodeId ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Layout, {
+        modes: null,
+        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(FullscreenTimecodeDisplay, {
+          id: windowedTimecodeId
         })
-      });
-      $[29] = t18;
-      $[30] = t19;
-    } else {
-      t19 = $[30];
-    }
-    let t20;
-    if ($[31] !== assignToOutput || $[32] !== assignToOutputCallback || $[33] !== connection.state || $[34] !== reconnect || $[35] !== windowMode) {
-      t20 = connection.state !== "connected" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(SizeAwareDiv, {
-        className: "\n                flex grow flex-col items-center justify-center gap-1\n                bg-sigil-bg-light p-1 text-sigil-foreground-muted\n              ",
-        children: [/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Icon2, {
-          icon: "signal_disconnected",
-          className: "text-block-icon"
-        }), /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", {
-          className: "text-center",
-          children: STRINGS.connectionError
-        }), /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ControlButton, {
-          onClick: reconnect,
-          variant: "large",
-          icon: "replay",
-          children: STRINGS.reconnect
-        })]
-      }) : windowMode === "debug" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Debugger, {
-        title: STRINGS.debugger,
-        className: "size-full"
-      }) : windowMode === "settings" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Settings, {
-        setWindowMode
-      }) : windowedTimecodeId ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(FullscreenTimecodeDisplay, {
-        id: windowedTimecodeId
-      }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", {
-        className: "\n                flex h-0 grow flex-col gap-px overflow-y-auto bg-sigil-border\n                scrollbar-sigil\n              ",
-        children: [/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(InputsSection, {
-          setDialogMode,
-          assignToOutput: assignToOutputCallback
-        }), /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(GeneratorsSection, {
-          setDialogMode,
-          assignToOutput: assignToOutputCallback
-        }), /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(OutputsSection, {
-          setDialogMode,
-          assignToOutput,
-          setAssignToOutput
-        })]
-      });
-      $[31] = assignToOutput;
-      $[32] = assignToOutputCallback;
-      $[33] = connection.state;
-      $[34] = reconnect;
-      $[35] = windowMode;
-      $[36] = t20;
-    } else {
-      t20 = $[36];
-    }
-    let t21;
-    if ($[37] !== dialogMode) {
-      t21 = dialogMode?.section.type === "inputs" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(InputSettingsDialog, {
-        close: closeDialog,
-        input: dialogMode.section.input,
-        target: dialogMode.target
-      });
-      $[37] = dialogMode;
-      $[38] = t21;
-    } else {
-      t21 = $[38];
-    }
-    let t22;
-    if ($[39] !== dialogMode) {
-      t22 = dialogMode?.section.type === "generators" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(GeneratorSettingsDialog, {
-        close: closeDialog,
-        generator: dialogMode.section.generator,
-        target: dialogMode.target
-      });
-      $[39] = dialogMode;
-      $[40] = t22;
-    } else {
-      t22 = $[40];
-    }
-    let t23;
-    if ($[41] !== dialogMode) {
-      t23 = dialogMode?.section.type === "outputs" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(OutputSettingsDialog, {
-        close: closeDialog,
-        output: dialogMode.section.output,
-        target: dialogMode.target
-      });
-      $[41] = dialogMode;
-      $[42] = t23;
-    } else {
-      t23 = $[42];
-    }
-    let t24;
-    if ($[43] !== t20 || $[44] !== t21 || $[45] !== t22 || $[46] !== t23) {
-      t24 = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", {
-        className: "relative flex h-0 grow flex-col",
-        children: [t20, t21, t22, t23]
-      });
-      $[43] = t20;
-      $[44] = t21;
-      $[45] = t22;
-      $[46] = t23;
-      $[47] = t24;
-    } else {
-      t24 = $[47];
-    }
-    let t25;
-    if ($[48] === Symbol.for("react.memo_cache_sentinel")) {
-      t25 = isMainWindow && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", {
-        className: "\n              flex justify-center border-t border-sigil-border bg-sigil-bg-dark\n              p-1 text-[80%]\n            ",
-        children: ["Created by", "\xA0", /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ExternalLink, {
-          href: "https://arcanewizards.com",
-          children: "Arcane Wizards"
+      }) : /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, {
+        children: [/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Layout, {
+          footer: true,
+          modes: {
+            license: {
+              child: (setWindowMode) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(License, {
+                license: info.license,
+                setWindowMode
+              }),
+              icon: "info",
+              title: STRINGS.license
+            },
+            settings: {
+              child: _temp5,
+              icon: "settings",
+              title: STRINGS.settings.title
+            },
+            debug: {
+              child: _temp24,
+              icon: "bug_report",
+              title: STRINGS.debugger
+            }
+          },
+          licenseMode: "license",
+          children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, {
+            children: [/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(UpdateBanner, {}), /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", {
+              className: "\n                  flex h-0 grow flex-col gap-px overflow-y-auto bg-sigil-border\n                  scrollbar-sigil\n                ",
+              children: [/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(InputsSection, {
+                setDialogMode,
+                assignToOutput: assignToOutputCallback
+              }), /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(GeneratorsSection, {
+                setDialogMode,
+                assignToOutput: assignToOutputCallback
+              }), /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(OutputsSection, {
+                setDialogMode,
+                assignToOutput,
+                setAssignToOutput
+              })]
+            })]
+          })
+        }), dialogMode?.section.type === "inputs" && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(InputSettingsDialog, {
+          close: closeDialog,
+          input: dialogMode.section.input,
+          target: dialogMode.target
+        }), dialogMode?.section.type === "generators" && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(GeneratorSettingsDialog, {
+          close: closeDialog,
+          generator: dialogMode.section.generator,
+          target: dialogMode.target
+        }), dialogMode?.section.type === "outputs" && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(OutputSettingsDialog, {
+          close: closeDialog,
+          output: dialogMode.section.output,
+          target: dialogMode.target
         })]
       });
-      $[48] = t25;
+      $[26] = assignToOutput;
+      $[27] = assignToOutputCallback;
+      $[28] = dialogMode;
+      $[29] = info.license;
+      $[30] = t17;
     } else {
-      t25 = $[48];
+      t17 = $[30];
     }
-    let t26;
-    if ($[49] !== t19 || $[50] !== t24) {
-      t26 = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", {
-        className: "flex h-screen flex-col",
-        children: [t19, t24, t25]
-      });
-      $[49] = t19;
-      $[50] = t24;
-      $[51] = t26;
-    } else {
-      t26 = $[51];
-    }
-    t16 = t26;
+    t16 = t17;
     const root = t16;
-    let t27;
-    if ($[52] !== handlers || $[53] !== root) {
-      t27 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ApplicationHandlersContext.Provider, {
+    let t18;
+    if ($[31] !== handlers || $[32] !== root) {
+      t18 = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ApplicationHandlersContext.Provider, {
         value: handlers,
         children: root
       });
-      $[52] = handlers;
-      $[53] = root;
-      $[54] = t27;
+      $[31] = handlers;
+      $[32] = root;
+      $[33] = t18;
     } else {
-      t27 = $[54];
+      t18 = $[33];
     }
-    let t28;
-    if ($[55] !== info.state || $[56] !== t27) {
-      t28 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ApplicationStateContext.Provider, {
+    let t19;
+    if ($[34] !== info.state || $[35] !== t18) {
+      t19 = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ApplicationStateContext.Provider, {
         value: info.state,
-        children: t27
+        children: t18
       });
-      $[55] = info.state;
-      $[56] = t27;
-      $[57] = t28;
+      $[34] = info.state;
+      $[35] = t18;
+      $[36] = t19;
     } else {
-      t28 = $[57];
+      t19 = $[36];
     }
-    let t29;
-    if ($[58] !== networkContextValue || $[59] !== t28) {
-      t29 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(NetworkContext.Provider, {
+    let t20;
+    if ($[37] !== networkContextValue || $[38] !== t19) {
+      t20 = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NetworkContext.Provider, {
         value: networkContextValue,
-        children: t28
+        children: t19
       });
-      $[58] = networkContextValue;
-      $[59] = t28;
-      $[60] = t29;
+      $[37] = networkContextValue;
+      $[38] = t19;
+      $[39] = t20;
     } else {
-      t29 = $[60];
+      t20 = $[39];
     }
-    let t30;
-    if ($[61] !== configContext || $[62] !== t29) {
-      t30 = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ConfigContext.Provider, {
+    let t21;
+    if ($[40] !== configContext || $[41] !== t20) {
+      t21 = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ConfigContext.Provider, {
         value: configContext,
-        children: t29
+        children: t20
       });
-      $[61] = configContext;
-      $[62] = t29;
-      $[63] = t30;
+      $[40] = configContext;
+      $[41] = t20;
+      $[42] = t21;
     } else {
-      t30 = $[63];
+      t21 = $[42];
     }
-    return t30;
+    return t21;
   };
-  function _temp4(mode) {
-    return mode === "settings" ? null : "settings";
+  function _temp5(setWindowMode_0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Settings, {
+      setWindowMode: setWindowMode_0
+    });
   }
-  function _temp23(mode_0) {
-    return mode_0 === "debug" ? null : "debug";
+  function _temp24() {
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Debugger, {
+      title: STRINGS.debugger,
+      className: "size-full"
+    });
   }
 
   // src/components/frontend/index.tsx
-  var import_jsx_runtime51 = __toESM(require_jsx_runtime());
+  var import_jsx_runtime56 = __toESM(require_jsx_runtime());
   var timecodeToolboxFrontendComponents = () => ({
     namespace: NAMESPACE,
     render: (info) => {
@@ -41744,7 +42721,11 @@ Data Directory: ${system.dataDirectory}`
       }
       switch (info.component) {
         case "toolbox-root":
-          return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ToolboxRoot, {
+          return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ToolboxRoot, {
+            info
+          });
+        case "license-gate":
+          return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(LicenseGate, {
             info
           });
       }
@@ -41754,7 +42735,7 @@ Data Directory: ${system.dataDirectory}`
     startSigilFrontend({
       browser,
       appRenderers: [timecodeToolboxFrontendComponents()],
-      loadingState: () => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", {
+      loadingState: () => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", {
         style: {
           width: "100%",
           textAlign: "center",