@arcanewizards/timecode-toolbox 0.1.0 → 0.1.1

package/dist/frontend.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,7 +25238,7 @@
     return t4;
   };
 
-  // ../../packages/sigil/dist/chunk-XAK7WC3D.js
+  // ../../packages/sigil/dist/chunk-HF7IIHPE.js
   var import_compiler_runtime5 = __toESM(require_compiler_runtime(), 1);
 
   // ../../packages/sigil/dist/chunk-BIY5HAXP.js
@@ -35415,7 +35415,7 @@
     return condition ? truthyClassName : falseyClassName;
   }
 
-  // ../../packages/sigil/dist/chunk-XAK7WC3D.js
+  // ../../packages/sigil/dist/chunk-HF7IIHPE.js
   var import_react12 = __toESM(require_react(), 1);
 
   // ../../node_modules/.pnpm/@arcanejs+toolkit-frontend@0.11.0/node_modules/@arcanejs/toolkit-frontend/dist/chunk-DK4BAXVE.mjs
@@ -35454,7 +35454,7 @@
 `;
   var TRANSPARENCY_SVG_URI = `data:image/svg+xml,${encodeURIComponent(TRANSPARENCY_SVG)}`;
 
-  // ../../packages/sigil/dist/chunk-XAK7WC3D.js
+  // ../../packages/sigil/dist/chunk-HF7IIHPE.js
   var import_react13 = __toESM(require_react(), 1);
   var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
   var import_react14 = __toESM(require_react(), 1);
@@ -35514,8 +35514,9 @@
     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);
+    className,
+    primary
+  }) => cn(`sigil-control-button`, cnd(variant === "border", `sigil-control-button-variant-border`), cnd(variant === "large", `sigil-control-button-variant-large`), cnd(variant === "properties", `sigil-control-button-variant-properties`), cnd(variant === "table-row", `sigil-control-button-variant-table-row`), cnd(variant === "toolbar", `sigil-control-button-variant-toolbar`), cnd(variant === "titlebar", `sigil-control-button-variant-titlebar`), cnd(touching, `sigil-control-button-touching`), cnd(active, `sigil-control-button-active`), cnd(touching && active, `sigil-control-button-active-touching`), cnd(primary, `sigil-control-button-primary`), clsControlPosition(position), className);
   var ControlButtonFrame = /* @__PURE__ */ (0, import_react13.forwardRef)(({
     children,
     className,
@@ -35528,6 +35529,7 @@
     title,
     tooltipSide,
     position,
+    primary,
     ...props
   }, ref) => {
     const btn = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", {
@@ -35540,6 +35542,7 @@
         active,
         touching,
         position,
+        primary,
         className
       }),
       children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", {
@@ -37770,7 +37773,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,178 +37786,8 @@ 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());
-
-  // src/components/frontend/toolbox/content.tsx
-  var import_compiler_runtime7 = __toESM(require_compiler_runtime());
-
-  // 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 SizeAwareDiv = (t0) => {
-    const $ = (0, import_compiler_runtime6.c)(16);
-    let children;
-    let rest;
-    let style;
-    if ($[0] !== t0) {
-      ({
-        children,
-        style,
-        ...rest
-      } = t0);
-      $[0] = t0;
-      $[1] = children;
-      $[2] = rest;
-      $[3] = style;
-    } else {
-      children = $[1];
-      rest = $[2];
-      style = $[3];
-    }
-    const [div, setDiv] = (0, import_react31.useState)(null);
-    const [rect, setRect] = (0, import_react31.useState)(null);
-    let t1;
-    let t2;
-    if ($[4] !== div) {
-      t1 = () => {
-        if (!div) {
-          return;
-        }
-        const resizeObserver = new ResizeObserver((entries) => {
-          for (const entry of entries) {
-            setRect(entry.contentRect);
-          }
-        });
-        resizeObserver.observe(div);
-        return () => {
-          resizeObserver.disconnect();
-        };
-      };
-      t2 = [div];
-      $[4] = div;
-      $[5] = t1;
-      $[6] = t2;
-    } else {
-      t1 = $[5];
-      t2 = $[6];
-    }
-    (0, import_react31.useEffect)(t1, t2);
-    let t3;
-    if ($[7] !== rect) {
-      t3 = rect && cssVariables({
-        "--size-aware-div-width": rect.width + "px",
-        "--size-aware-div-height": rect.height + "px"
-      });
-      $[7] = rect;
-      $[8] = t3;
-    } else {
-      t3 = $[8];
-    }
-    let t4;
-    if ($[9] !== style || $[10] !== t3) {
-      t4 = {
-        ...style,
-        ...t3
-      };
-      $[9] = style;
-      $[10] = t3;
-      $[11] = t4;
-    } else {
-      t4 = $[11];
-    }
-    let t5;
-    if ($[12] !== children || $[13] !== rest || $[14] !== t4) {
-      t5 = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", {
-        ref: setDiv,
-        ...rest,
-        style: t4,
-        children
-      });
-      $[12] = children;
-      $[13] = rest;
-      $[14] = t4;
-      $[15] = t5;
-    } else {
-      t5 = $[15];
-    }
-    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;
-  };
+  var import_compiler_runtime20 = __toESM(require_compiler_runtime());
+  var import_react43 = __toESM(require_react());
 
   // ../../packages/artnet/dist/chunk-J2HDMITA.js
   var ARTNET_PORT = 6454;
@@ -37966,6 +37804,7 @@ Data Directory: ${system.dataDirectory}`
     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",
@@ -37974,6 +37813,10 @@ Data Directory: ${system.dataDirectory}`
     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",
@@ -38033,6 +37876,17 @@ Data Directory: ${system.dataDirectory}`
     },
     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"
     }
   };
 
@@ -38041,10 +37895,10 @@ Data Directory: ${system.dataDirectory}`
   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 import_compiler_runtime6 = __toESM(require_compiler_runtime());
+  var import_jsx_runtime41 = __toESM(require_jsx_runtime());
   var PrimaryToolboxSection = (t0) => {
-    const $ = (0, import_compiler_runtime8.c)(12);
+    const $ = (0, import_compiler_runtime6.c)(12);
     const {
       title,
       children,
@@ -38052,7 +37906,7 @@ Data Directory: ${system.dataDirectory}`
     } = t0;
     let t1;
     if ($[0] !== title) {
-      t1 = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
+      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
       });
@@ -38063,7 +37917,7 @@ Data Directory: ${system.dataDirectory}`
     }
     let t2;
     if ($[2] !== children) {
-      t2 = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
+      t2 = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", {
         className: "flex grow flex-col gap-px",
         children
       });
@@ -38074,7 +37928,7 @@ Data Directory: ${system.dataDirectory}`
     }
     let t3;
     if ($[4] !== buttons) {
-      t3 = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
+      t3 = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", {
         className: "flex w-full flex-wrap gap-1 bg-sigil-bg-light p-1",
         children: buttons
       });
@@ -38085,7 +37939,7 @@ Data Directory: ${system.dataDirectory}`
     }
     let t4;
     if ($[6] !== t2 || $[7] !== t3) {
-      t4 = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
+      t4 = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", {
         className: "flex grow flex-col gap-px",
         children: [t2, t3]
       });
@@ -38097,7 +37951,7 @@ Data Directory: ${system.dataDirectory}`
     }
     let t5;
     if ($[9] !== t1 || $[10] !== t4) {
-      t5 = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
+      t5 = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", {
         className: "flex grow gap-px",
         children: [t1, t4]
       });
@@ -38125,38 +37979,131 @@ Data Directory: ${system.dataDirectory}`
   }
 
   // src/components/frontend/toolbox/context.tsx
-  var import_react32 = __toESM(require_react());
-  var ConfigContext = /* @__PURE__ */ (0, import_react32.createContext)(new Proxy({}, {
+  var import_react31 = __toESM(require_react());
+  var ConfigContext = /* @__PURE__ */ (0, import_react31.createContext)(new Proxy({}, {
     get() {
       throw new Error("ConfigContext not initialized");
     }
   }));
-  var ApplicationStateContext = /* @__PURE__ */ (0, import_react32.createContext)(new Proxy({}, {
+  var ApplicationStateContext = /* @__PURE__ */ (0, import_react31.createContext)(new Proxy({}, {
     get() {
       throw new Error("ApplicationStateContext not initialized");
     }
   }));
   var useApplicationState = () => {
-    return (0, import_react32.useContext)(ApplicationStateContext);
+    return (0, import_react31.useContext)(ApplicationStateContext);
   };
-  var ApplicationHandlersContext = /* @__PURE__ */ (0, import_react32.createContext)(new Proxy({}, {
+  var ApplicationHandlersContext = /* @__PURE__ */ (0, import_react31.createContext)(new Proxy({}, {
     get() {
       throw new Error("ApplicationHandlersContext not initialized");
     }
   }));
   var useApplicationHandlers = () => {
-    return (0, import_react32.useContext)(ApplicationHandlersContext);
+    return (0, import_react31.useContext)(ApplicationHandlersContext);
   };
-  var NetworkContext = /* @__PURE__ */ (0, import_react32.createContext)(new Proxy({}, {
+  var NetworkContext = /* @__PURE__ */ (0, import_react31.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_compiler_runtime8 = __toESM(require_compiler_runtime());
   var import_react33 = __toESM(require_react());
 
+  // src/components/frontend/toolbox/core/size-aware-div.tsx
+  var import_compiler_runtime7 = __toESM(require_compiler_runtime());
+  var import_react32 = __toESM(require_react());
+  var import_jsx_runtime42 = __toESM(require_jsx_runtime());
+  var SizeAwareDiv = (t0) => {
+    const $ = (0, import_compiler_runtime7.c)(16);
+    let children;
+    let rest;
+    let style;
+    if ($[0] !== t0) {
+      ({
+        children,
+        style,
+        ...rest
+      } = t0);
+      $[0] = t0;
+      $[1] = children;
+      $[2] = rest;
+      $[3] = style;
+    } else {
+      children = $[1];
+      rest = $[2];
+      style = $[3];
+    }
+    const [div, setDiv] = (0, import_react32.useState)(null);
+    const [rect, setRect] = (0, import_react32.useState)(null);
+    let t1;
+    let t2;
+    if ($[4] !== div) {
+      t1 = () => {
+        if (!div) {
+          return;
+        }
+        const resizeObserver = new ResizeObserver((entries) => {
+          for (const entry of entries) {
+            setRect(entry.contentRect);
+          }
+        });
+        resizeObserver.observe(div);
+        return () => {
+          resizeObserver.disconnect();
+        };
+      };
+      t2 = [div];
+      $[4] = div;
+      $[5] = t1;
+      $[6] = t2;
+    } else {
+      t1 = $[5];
+      t2 = $[6];
+    }
+    (0, import_react32.useEffect)(t1, t2);
+    let t3;
+    if ($[7] !== rect) {
+      t3 = rect && cssVariables({
+        "--size-aware-div-width": rect.width + "px",
+        "--size-aware-div-height": rect.height + "px"
+      });
+      $[7] = rect;
+      $[8] = t3;
+    } else {
+      t3 = $[8];
+    }
+    let t4;
+    if ($[9] !== style || $[10] !== t3) {
+      t4 = {
+        ...style,
+        ...t3
+      };
+      $[9] = style;
+      $[10] = t3;
+      $[11] = t4;
+    } else {
+      t4 = $[11];
+    }
+    let t5;
+    if ($[12] !== children || $[13] !== rest || $[14] !== t4) {
+      t5 = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", {
+        ref: setDiv,
+        ...rest,
+        style: t4,
+        children
+      });
+      $[12] = children;
+      $[13] = rest;
+      $[14] = t4;
+      $[15] = t5;
+    } else {
+      t5 = $[15];
+    }
+    return t5;
+  };
+
   // src/tree.ts
   var isTreeNode = (node) => "children" in node && typeof node.children === "object" && node.children !== null;
   var getTreeValue = (current, path) => {
@@ -38264,9 +38211,9 @@ 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_runtime8.c)(7);
     const {
       effectiveStartTimeMillis,
       speed
@@ -38315,7 +38262,7 @@ Data Directory: ${system.dataDirectory}`
     return t3;
   };
   var Timeline2 = (t0) => {
-    const $ = (0, import_compiler_runtime9.c)(11);
+    const $ = (0, import_compiler_runtime8.c)(11);
     const {
       state,
       totalTime
@@ -38371,11 +38318,11 @@ Data Directory: ${system.dataDirectory}`
     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 +38338,7 @@ Data Directory: ${system.dataDirectory}`
     return t4;
   };
   var TimecodeDisplay = (t0) => {
-    const $ = (0, import_compiler_runtime9.c)(71);
+    const $ = (0, import_compiler_runtime8.c)(71);
     const {
       id,
       timecode: t1,
@@ -38538,7 +38485,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 +38517,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 +38531,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 +38545,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 +38559,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 +38611,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 +38623,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 +38638,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 +38660,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 +38692,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]
       });
@@ -38799,7 +38746,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 +38758,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 +38785,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,7 +38796,7 @@ Data Directory: ${system.dataDirectory}`
     });
   };
   var FullscreenTimecodeDisplay = (t0) => {
-    const $ = (0, import_compiler_runtime9.c)(38);
+    const $ = (0, import_compiler_runtime8.c)(38);
     const {
       id
     } = t0;
@@ -39027,12 +38974,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 +38992,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,6 +39064,102 @@ Data Directory: ${system.dataDirectory}`
   }
   var v4_default = v4;
 
+  // src/components/frontend/toolbox/content.tsx
+  var import_compiler_runtime9 = __toESM(require_compiler_runtime());
+  var import_jsx_runtime44 = __toESM(require_jsx_runtime());
+  var ExternalLink = (t0) => {
+    const $ = (0, import_compiler_runtime9.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_runtime9.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_runtime9.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) => {
@@ -41000,6 +41043,7 @@ Data Directory: ${system.dataDirectory}`
 
   // src/components/frontend/toolbox/settings.tsx
   var import_compiler_runtime14 = __toESM(require_compiler_runtime());
+  var import_react39 = __toESM(require_react());
 
   // ../../packages/sigil/dist/frontend/appearance.js
   var import_compiler_runtime13 = __toESM(require_compiler_runtime(), 1);
@@ -41182,8 +41226,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_runtime14.c)(29);
     const {
       setWindowMode
     } = t0;
@@ -41191,6 +41245,13 @@ Data Directory: ${system.dataDirectory}`
       preferences,
       updateBrowserPrefs
     } = useBrowserPreferences();
+    const {
+      config,
+      updateConfig
+    } = (0, import_react39.useContext)(ConfigContext);
+    const {
+      updates
+    } = useApplicationState();
     let t1;
     let t2;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -41259,15 +41320,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 +41331,1061 @@ 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_runtime15 = __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_runtime15.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_runtime16 = __toESM(require_compiler_runtime());
+  var import_jsx_runtime51 = __toESM(require_jsx_runtime());
+  var Footer = (t0) => {
+    const $ = (0, import_compiler_runtime16.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;
+  };
+
+  // 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;
-    } else {
-      t25 = $[48];
-    }
-    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;
+      $[26] = assignToOutput;
+      $[27] = assignToOutputCallback;
+      $[28] = dialogMode;
+      $[29] = info.license;
+      $[30] = t17;
     } else {
-      t26 = $[51];
+      t17 = $[30];
     }
-    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",