@arcanewizards/timecode-toolbox 0.1.0 → 0.1.1

package/dist/components/frontend/index.js

@@ -13975,7 +13975,7 @@ function cnd(condition, truthyClassName, falseyClassName) {
   return condition ? truthyClassName : falseyClassName;
 }
 
-// ../../packages/sigil/dist/chunk-XAK7WC3D.js
+// ../../packages/sigil/dist/chunk-HF7IIHPE.js
 var import_react12 = require("react");
 
 // ../../node_modules/.pnpm/@arcanejs+toolkit-frontend@0.11.0/node_modules/@arcanejs/toolkit-frontend/dist/chunk-DK4BAXVE.mjs
@@ -14014,7 +14014,7 @@ var TRANSPARENCY_SVG = `
 `;
 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 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var import_react14 = require("react");
@@ -14080,7 +14080,8 @@ var clsControlButton = ({
   active,
   touching,
   position,
-  className
+  className,
+  primary
 }) => cn(
   `sigil-control-button`,
   cnd(variant === "border", `sigil-control-button-variant-border`),
@@ -14092,6 +14093,7 @@ var clsControlButton = ({
   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
 );
@@ -14108,6 +14110,7 @@ var ControlButtonFrame = (0, import_react13.forwardRef)(
     title,
     tooltipSide,
     position,
+    primary,
     ...props
   }, ref) => {
     const btn = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -14122,6 +14125,7 @@ var ControlButtonFrame = (0, import_react13.forwardRef)(
           active,
           touching,
           position,
+          primary,
           className
         }),
         children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { children: [
@@ -15890,7 +15894,12 @@ var OUTPUT_CONFIG = zod_default.object({
 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;
@@ -15898,83 +15907,7 @@ var NAMESPACE = "timecode-toolbox";
 var isTimecodeToolboxComponent = (component) => component.namespace === NAMESPACE;
 
 // src/components/frontend/toolbox/root.tsx
-var import_react38 = require("react");
-
-// src/components/frontend/toolbox/core/size-aware-div.tsx
-var import_react30 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var SizeAwareDiv = ({
-  children,
-  style,
-  ...rest
-}) => {
-  const [div, setDiv] = (0, import_react30.useState)(null);
-  const [rect, setRect] = (0, import_react30.useState)(null);
-  (0, import_react30.useEffect)(() => {
-    if (!div) {
-      return;
-    }
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        setRect(entry.contentRect);
-      }
-    });
-    resizeObserver.observe(div);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [div]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-    "div",
-    {
-      ref: setDiv,
-      ...rest,
-      style: {
-        ...style,
-        ...rect && cssVariables({
-          "--size-aware-div-width": rect.width + "px",
-          "--size-aware-div-height": rect.height + "px"
-        })
-      },
-      children
-    }
-  );
-};
-
-// src/components/frontend/toolbox/content.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var ExternalLink = ({
-  href,
-  children
-}) => {
-  const { openExternalLink } = useBrowserContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-    "a",
-    {
-      href,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      onClick: (e) => {
-        e.preventDefault();
-        openExternalLink(href);
-      },
-      className: "\n        text-sigil-usage-hint-foreground no-underline\n        hover:underline\n      ",
-      children
-    }
-  );
-};
-var NoToolboxChildren = ({ text }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsx)(Icon2, { icon: "handyman", className: "text-block-icon" }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "text-center", children: text })
-      ]
-    }
-  );
-};
+var import_react42 = require("react");
 
 // ../../packages/artnet/dist/chunk-J2HDMITA.js
 var ARTNET_PORT = 6454;
@@ -15991,6 +15924,7 @@ var MS_FORMAT = new Intl.NumberFormat(void 0, {
   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",
@@ -15999,6 +15933,10 @@ var STRINGS = {
   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",
@@ -16058,6 +15996,17 @@ var STRINGS = {
   },
   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"
   }
 };
 
@@ -16065,23 +16014,23 @@ var STRINGS = {
 var import_react33 = require("react");
 
 // src/components/frontend/toolbox/util.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var PrimaryToolboxSection = ({
   title,
   children,
   buttons
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex grow gap-px", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex grow gap-px", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "div",
       {
         className: "\n          flex items-center justify-center bg-sigil-bg-light p-1\n          writing-mode-vertical-rl\n        ",
         children: title
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex grow flex-col gap-px", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex grow flex-col gap-px", children }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex w-full flex-wrap gap-1 bg-sigil-bg-light p-1", children: buttons })
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex grow flex-col gap-px", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex grow flex-col gap-px", children }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex w-full flex-wrap gap-1 bg-sigil-bg-light p-1", children: buttons })
     ] })
   ] });
 };
@@ -16101,31 +16050,31 @@ function displayMillis(totalMilliseconds) {
 }
 
 // src/components/frontend/toolbox/context.tsx
-var import_react31 = require("react");
-var ConfigContext = (0, import_react31.createContext)(
+var import_react30 = require("react");
+var ConfigContext = (0, import_react30.createContext)(
   new Proxy({}, {
     get() {
       throw new Error("ConfigContext not initialized");
     }
   })
 );
-var ApplicationStateContext = (0, import_react31.createContext)(
+var ApplicationStateContext = (0, import_react30.createContext)(
   new Proxy({}, {
     get() {
       throw new Error("ApplicationStateContext not initialized");
     }
   })
 );
-var useApplicationState = () => (0, import_react31.useContext)(ApplicationStateContext);
-var ApplicationHandlersContext = (0, import_react31.createContext)(
+var useApplicationState = () => (0, import_react30.useContext)(ApplicationStateContext);
+var ApplicationHandlersContext = (0, import_react30.createContext)(
   new Proxy({}, {
     get() {
       throw new Error("ApplicationHandlersContext not initialized");
     }
   })
 );
-var useApplicationHandlers = () => (0, import_react31.useContext)(ApplicationHandlersContext);
-var NetworkContext = (0, import_react31.createContext)(
+var useApplicationHandlers = () => (0, import_react30.useContext)(ApplicationHandlersContext);
+var NetworkContext = (0, import_react30.createContext)(
   new Proxy({}, {
     get() {
       throw new Error("NetworkContext not initialized");
@@ -16136,6 +16085,47 @@ var NetworkContext = (0, import_react31.createContext)(
 // src/components/frontend/toolbox/core/timecode-display.tsx
 var import_react32 = require("react");
 
+// src/components/frontend/toolbox/core/size-aware-div.tsx
+var import_react31 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var SizeAwareDiv = ({
+  children,
+  style,
+  ...rest
+}) => {
+  const [div, setDiv] = (0, import_react31.useState)(null);
+  const [rect, setRect] = (0, import_react31.useState)(null);
+  (0, import_react31.useEffect)(() => {
+    if (!div) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setRect(entry.contentRect);
+      }
+    });
+    resizeObserver.observe(div);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [div]);
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    "div",
+    {
+      ref: setDiv,
+      ...rest,
+      style: {
+        ...style,
+        ...rect && cssVariables({
+          "--size-aware-div-width": rect.width + "px",
+          "--size-aware-div-height": rect.height + "px"
+        })
+      },
+      children
+    }
+  );
+};
+
 // src/tree.ts
 var isTreeNode = (node) => "children" in node && typeof node.children === "object" && node.children !== null;
 var getTreeValue = (current, path) => {
@@ -16241,7 +16231,7 @@ var augmentUpstreamTimecodeWithOutputMetadata = (tc, config) => {
 };
 
 // src/components/frontend/toolbox/core/timecode-display.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var ActiveTimecodeText = ({
   effectiveStartTimeMillis,
   speed
@@ -16289,7 +16279,7 @@ var Timeline2 = ({ state, totalTime }) => {
       }
     };
   }, [state, timeDifferenceMs]);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-full border border-timecode-usage-foreground p-px", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "relative h-1 w-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-full border border-timecode-usage-foreground p-px", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "relative h-1 w-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
       className: "absolute inset-y-0 left-0 bg-timecode-usage-foreground",
@@ -16341,8 +16331,8 @@ var TimecodeDisplay = ({
       }
     }
   }, [hooks, play, pause, state.state]);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex grow flex-col gap-px", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex grow flex-col gap-px", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       "div",
       {
         className: cn(
@@ -16354,8 +16344,8 @@ var TimecodeDisplay = ({
           )
         ),
         children: [
-          headerComponents && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex flex-wrap gap-0.25", children: headerComponents }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          headerComponents && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-wrap gap-0.25", children: headerComponents }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             SizeAwareDiv,
             {
               className: cn(
@@ -16370,7 +16360,7 @@ var TimecodeDisplay = ({
                 )
               ),
               onClick: toggle,
-              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: cn("font-mono text-timecode-adaptive"), children: state.state === "none" ? "--:--:--:---" : state.state === "stopped" ? displayMillis(state.positionMillis) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: cn("font-mono text-timecode-adaptive"), children: state.state === "none" ? "--:--:--:---" : state.state === "stopped" ? displayMillis(state.positionMillis) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 ActiveTimecodeText,
                 {
                   effectiveStartTimeMillis: state.effectiveStartTimeMillis,
@@ -16379,8 +16369,8 @@ var TimecodeDisplay = ({
               ) }) })
             }
           ),
-          hooks?.pause || hooks?.play ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex justify-center gap-px", children: [
-            hooks.beginning && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          hooks?.pause || hooks?.play ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex justify-center gap-px", children: [
+            hooks.beginning && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               ControlButton,
               {
                 onClick: beginning,
@@ -16391,7 +16381,7 @@ var TimecodeDisplay = ({
                 className: "text-timecode-usage-foreground!"
               }
             ),
-            hooks.seekRelative && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            hooks.seekRelative && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               ControlButton,
               {
                 onClick: back5seconds,
@@ -16402,7 +16392,7 @@ var TimecodeDisplay = ({
                 className: "text-timecode-usage-foreground!"
               }
             ),
-            state.state === "none" || state.state === "stopped" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            state.state === "none" || state.state === "stopped" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               ControlButton,
               {
                 onClick: play,
@@ -16412,7 +16402,7 @@ var TimecodeDisplay = ({
                 title: STRINGS.controls.play,
                 className: "text-timecode-usage-foreground!"
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               ControlButton,
               {
                 onClick: pause,
@@ -16423,7 +16413,7 @@ var TimecodeDisplay = ({
                 className: "text-timecode-usage-foreground!"
               }
             ),
-            hooks.seekRelative && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            hooks.seekRelative && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               ControlButton,
               {
                 onClick: forward5seconds,
@@ -16435,33 +16425,33 @@ var TimecodeDisplay = ({
               }
             )
           ] }) : null,
-          metadata?.totalTime && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Timeline2, { state, totalTime: metadata.totalTime })
+          metadata?.totalTime && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Timeline2, { state, totalTime: metadata.totalTime })
         ]
       }
     ),
-    (state.smpteMode !== null || state.accuracyMillis !== null || config.delayMs !== null) && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex gap-px", children: [
-      config.delayMs !== null && /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime42.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_runtime42.jsx)("div", { className: "grow basis-0 truncate bg-sigil-bg-light p-0.5", children: STRINGS.accuracy(state.accuracyMillis) })
+    (state.smpteMode !== null || state.accuracyMillis !== null || config.delayMs !== null) && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex gap-px", children: [
+      config.delayMs !== null && /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.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_runtime41.jsx)("div", { className: "grow basis-0 truncate bg-sigil-bg-light p-0.5", children: STRINGS.accuracy(state.accuracyMillis) })
     ] }),
-    metadata?.artist || metadata?.title ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    metadata?.artist || metadata?.title ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       TooltipWrapper,
       {
-        tooltip: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-          metadata.title && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "font-bold", children: "Title:" }),
+        tooltip: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+          metadata.title && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "font-bold", children: "Title:" }),
             " ",
             metadata.title
           ] }),
-          metadata.artist && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "font-bold", children: "Artist:" }),
+          metadata.artist && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "font-bold", children: "Artist:" }),
             " ",
             metadata.artist
           ] })
         ] }),
-        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex gap-px", children: [
-          metadata.title && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "grow truncate bg-sigil-bg-light p-0.5 font-bold", children: metadata.title }),
-          metadata.artist && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "grow truncate bg-sigil-bg-light p-0.5", children: metadata.artist })
+        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex gap-px", children: [
+          metadata.title && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "grow truncate bg-sigil-bg-light p-0.5 font-bold", children: metadata.title }),
+          metadata.artist && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "grow truncate bg-sigil-bg-light p-0.5", children: metadata.artist })
         ] })
       }
     ) : null
@@ -16502,7 +16492,7 @@ var TimecodeTreeDisplay = ({
   }, [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_runtime42.jsx)(
+    return Object.entries(timecode.timecodes).map(([key, child]) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       TimecodeTreeDisplay,
       {
         config,
@@ -16518,28 +16508,28 @@ var TimecodeTreeDisplay = ({
       key
     ));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     "div",
     {
       className: "relative flex grow flex-col text-timecode-usage-foreground",
       style: color && cssSigilColorUsageVariables("timecode-usage", sigilColorUsage(color)),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           TimecodeDisplay,
           {
             id,
             timecode: isTimecodeInstance(timecode) ? timecode : EMPTY_TIMECODE,
             config,
-            headerComponents: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex grow items-start gap-0.25", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            headerComponents: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex grow items-start gap-0.25", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                   "div",
                   {
                     className: "\n                  m-0.25 rounded-md border border-sigil-bg-light\n                  bg-timecode-usage-foreground px-1 py-0.25 text-sigil-control\n                  text-timecode-usage-text\n                ",
                     children: type
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                   "div",
                   {
                     className: cn(
@@ -16550,8 +16540,8 @@ var TimecodeTreeDisplay = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(ControlButtonGroup, { className: "rounded-md bg-sigil-bg-light", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(ControlButtonGroup, { className: "rounded-md bg-sigil-bg-light", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                   ControlButton,
                   {
                     variant: "toolbar",
@@ -16565,12 +16555,12 @@ var TimecodeTreeDisplay = ({
             ] })
           }
         ),
-        assignToOutput && id && !isOutputInstanceId(id) && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        assignToOutput && id && !isOutputInstanceId(id) && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           SizeAwareDiv,
           {
             className: "\n            absolute inset-0 flex cursor-pointer items-center justify-center\n            bg-timecode-backdrop text-timecode-usage-text\n            hover:bg-timecode-backdrop-hover\n          ",
             onClick: () => assignToOutput(id),
-            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon2, { icon: "link", className: "text-block-icon" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon2, { icon: "link", className: "text-block-icon" })
           }
         )
       ]
@@ -16636,22 +16626,22 @@ var FullscreenTimecodeDisplay = ({
     }
   }, [id, config]);
   if (!instanceConfig) {
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime42.jsx)(Icon2, { icon: "question_mark", className: "text-block-icon" }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "text-center", children: STRINGS.errors.unknownTimecodeID })
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon2, { icon: "question_mark", className: "text-block-icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "text-center", children: STRINGS.errors.unknownTimecodeID })
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime42.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         TimecodeTreeDisplay,
         {
           id,
@@ -16716,6 +16706,54 @@ function v4(options, buf, offset4) {
 }
 var v4_default = v4;
 
+// src/components/frontend/toolbox/content.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var ExternalLink = ({
+  href,
+  children
+}) => {
+  const { openExternalLink } = useBrowserContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onClick: (e) => {
+        e.preventDefault();
+        openExternalLink(href);
+      },
+      className: "\n        text-sigil-usage-hint-foreground no-underline\n        hover:underline\n      ",
+      children
+    }
+  );
+};
+var TextButton = ({
+  onClick,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    "span",
+    {
+      onClick,
+      className: "\n        cursor-pointer text-sigil-usage-hint-foreground\n        hover:underline\n      ",
+      children
+    }
+  );
+};
+var NoToolboxChildren = ({ text }) => {
+  return /* @__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: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon2, { icon: "handyman", className: "text-block-icon" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "text-center", children: text })
+      ]
+    }
+  );
+};
+
 // src/components/frontend/toolbox/outputs.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var DmxConnectionSettings = ({
@@ -17907,6 +17945,9 @@ var diffJson = (a, b) => {
   return { type: "value", after: b };
 };
 
+// src/components/frontend/toolbox/settings.tsx
+var import_react38 = require("react");
+
 // ../../packages/sigil/dist/frontend/appearance.js
 var import_react36 = require("react");
 var import_jsx_runtime46 = require("react/jsx-runtime");
@@ -18051,8 +18092,17 @@ var useBrowserPreferences = createBrowserPreferencesHook(TOOLBOX_PREFERENCES);
 
 // src/components/frontend/toolbox/settings.tsx
 var import_jsx_runtime47 = require("react/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 = ({ setWindowMode }) => {
   const { preferences, updateBrowserPrefs } = useBrowserPreferences();
+  const { config, updateConfig } = (0, import_react38.useContext)(ConfigContext);
+  const { updates } = useApplicationState();
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex grow flex-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ToolbarWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(ToolbarRow, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "grow p-1", children: STRINGS.settings.title }),
@@ -18079,26 +18129,595 @@ var Settings = ({ setWindowMode }) => {
               color: preferences.color,
               onColorChange: (color) => updateBrowserPrefs((current) => ({ ...current, color }))
             }
-          )
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlLabel, { children: STRINGS.updates.settingsLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            ControlSelect,
+            {
+              value: config.checkForUpdates ? "enabled" : "disabled",
+              options: ENABLED_DISABLED_OPTIONS,
+              onChange: (value) => updateConfig((current) => ({
+                ...current,
+                checkForUpdates: value === "enabled"
+              })),
+              variant: "large"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlDetails, { children: STRINGS.updates.settingsDetails }),
+          updates && "lastCheckedMillis" in updates && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlDetails, { children: STRINGS.updates.lastChecked(
+            DATE_FORMATTER.format(updates.lastCheckedMillis)
+          ) })
         ] })
       }
     )
   ] });
 };
 
-// src/components/frontend/toolbox/root.tsx
+// src/components/frontend/toolbox/license.tsx
+var import_react40 = require("react");
+
+// src/components/frontend/toolbox/logo.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
-var ToolboxRoot = ({ info }) => {
-  const [windowMode, setWindowMode] = (0, import_react38.useState)(
-    null
+var TimecodeToolboxLogo = (props) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1365.333 1365.333",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("defs", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("mask", { id: "b", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime48.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"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("mask", { id: "g", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime48.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"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("mask", { id: "f", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime48.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"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("mask", { id: "e", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime48.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"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("mask", { id: "d", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime48.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"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("mask", { id: "c", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime48.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"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("mask", { id: "k", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime48.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"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("mask", { id: "j", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime48.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"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("mask", { id: "i", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime48.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"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("mask", { id: "h", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime48.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"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          "filter",
+          {
+            id: "a",
+            width: "1.201",
+            height: "1.19",
+            x: "-.101",
+            y: "-.074",
+            "color-interpolation-filters": "sRGB",
+            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("feGaussianBlur", { stdDeviation: "10.298" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.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_runtime48.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_runtime48.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"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("g", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.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_runtime48.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)"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.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"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.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)"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        "path",
+        {
+          fill: "#ff8c00",
+          d: "m1185.387 605.49 13.02-207.138H166.926l13.02 207.137z"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.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"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        "path",
+        {
+          fill: "#eceff1",
+          d: "m916.084 52.25 420.493 180.531-532.698 916.066-476.546-308.58Z",
+          mask: "url(#c)"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.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)"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.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)"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.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)"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.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)"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.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"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        "path",
+        {
+          fill: "#eceff1",
+          d: "m105.922 257.574 152.745-109.918 438.66 518.005-348.484 67.536Z",
+          mask: "url(#h)"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.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)"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.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)"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.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)"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { fill: "#ffba66", d: "M170.482 652.84h1025.265v453.341H170.482Z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { fill: "#ff8c00", d: "M139.336 674.512h1086.662v453.342H139.336Z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        "rect",
+        {
+          width: "875.482",
+          height: "332.3",
+          x: "244.926",
+          y: "735.033",
+          fill: "#cc7000",
+          rx: "77.883",
+          ry: "77.883"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.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"
+        }
+      )
+    ]
+  }
+);
+
+// src/components/frontend/toolbox/core/layout.tsx
+var import_react39 = require("react");
+
+// src/components/frontend/toolbox/core/footer.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var Footer = ({ openLicenseDetails }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime49.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: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { children: [
+          "Created by",
+          "\xA0",
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ExternalLink, { href: "https://arcanewizards.com", children: "Arcane Wizards" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ToolbarDivider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ExternalLink, { href: SOURCE_CODE_URL, children: STRINGS.sourceCode }),
+        openLicenseDetails && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ToolbarDivider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TextButton, { onClick: openLicenseDetails, children: STRINGS.license })
+        ] })
+      ]
+    }
   );
-  const { config } = info;
-  const { sendMessage, call, connection, reconnect } = (0, import_react38.useContext)(StageContext);
-  const [dialogMode, setDialogMode] = (0, import_react38.useState)(null);
-  const [assignToOutput, setAssignToOutput] = (0, import_react38.useState)(null);
+};
+
+// src/components/frontend/toolbox/core/layout.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var Layout = ({
+  modes,
+  children,
+  licenseMode,
+  footer
+}) => {
+  const [windowMode, setWindowMode] = (0, import_react39.useState)(null);
+  const { connection, reconnect } = (0, import_react39.useContext)(StageContext);
   const { preferences } = useBrowserPreferences();
   useRootHintVariables(preferences.color);
-  (0, import_react38.useEffect)(() => {
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex h-screen flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ToolbarWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ToolbarRow, { children: [
+      /* @__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 })
+        }
+      ),
+      modes && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ToolbarDivider, {}),
+        Object.entries(modes).map(([key, { icon, title }]) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          ControlButton,
+          {
+            onClick: () => setWindowMode((mode) => mode === key ? null : key),
+            variant: "titlebar",
+            icon,
+            active: windowMode === key,
+            title: STRINGS.toggle(title)
+          },
+          key
+        ))
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "relative flex h-0 grow flex-col", children: 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 && modes?.[windowMode] ? modes[windowMode].child(setWindowMode) : children }),
+    footer && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      Footer,
+      {
+        openLicenseDetails: licenseMode && (() => setWindowMode(
+          (mode) => mode === licenseMode ? null : licenseMode
+        ))
+      }
+    )
+  ] });
+};
+
+// src/components/frontend/toolbox/license.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var LicenseContent = ({ license }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex flex-col gap-2 rounded-md bg-sigil-bg-light p-2", children: license.split("\n\n").map((paragraph, index2) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "m-0", children: paragraph.replace(/\n/g, " ").trim() }, index2)) });
+};
+var License = ({ license, setWindowMode }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex grow flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+    "div",
+    {
+      className: "\n          flex grow basis-0 flex-col overflow-y-auto px-2 pb-2 scrollbar-sigil\n        ",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TimecodeToolboxLogo, { className: "h-[20%] max-h-[420px] min-h-[110px] w-full" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(LicenseContent, { license }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex justify-center p-2", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          ControlButton,
+          {
+            onClick: () => setWindowMode(null),
+            variant: "large",
+            icon: "close",
+            children: STRINGS.close(STRINGS.license)
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+var LicenseGate = ({ info }) => {
+  const { sendMessage } = (0, import_react40.useContext)(StageContext);
+  const acceptLicense = (0, import_react40.useCallback)(() => {
+    sendMessage?.({
+      type: "component-message",
+      namespace: "timecode-toolbox",
+      component: "license-gate",
+      componentKey: info.key,
+      action: "accept-license",
+      hash: info.hash
+    });
+  }, [sendMessage, info.key, info.hash]);
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    Layout,
+    {
+      footer: true,
+      modes: {
+        debug: {
+          child: () => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Debugger, { title: STRINGS.debugger, className: "size-full" }),
+          icon: "bug_report",
+          title: STRINGS.debugger
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+        "div",
+        {
+          className: "\n          flex grow basis-0 flex-col overflow-y-auto px-2 pb-2 scrollbar-sigil\n        ",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TimecodeToolboxLogo, { className: "h-[20%] max-h-[420px] min-h-[110px] w-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("h2", { className: "text-center text-sigil-usage-hint-foreground", children: STRINGS.licensePrompt }),
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(LicenseContent, { license: info.license }),
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex justify-center p-2", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+              ControlButton,
+              {
+                onClick: acceptLicense,
+                variant: "large",
+                icon: "check",
+                primary: true,
+                children: STRINGS.acceptLicense
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/frontend/toolbox/core/updates.tsx
+var import_react41 = require("react");
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var UpdateBanner = () => {
+  const { updates } = useApplicationState();
+  const { version } = useSystemInformation();
+  const { openExternalLink } = useBrowserContext();
+  const [displayState, setDisplayState] = (0, import_react41.useState)();
+  (0, import_react41.useEffect)(() => {
+    if (updates?.type !== "loading") {
+      setDisplayState(updates);
+    }
+  }, [updates]);
+  const openDownloadLink = (0, import_react41.useCallback)(() => {
+    if (displayState?.type === "updates-available" && displayState.response.downloadUrl) {
+      openExternalLink(displayState.response.downloadUrl);
+    }
+  }, [displayState, openExternalLink]);
+  if (displayState?.type === "error") {
+    return /* @__PURE__ */ (0, import_jsx_runtime52.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: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon2, { icon: "error" }),
+          displayState.error
+        ]
+      }
+    );
+  }
+  if (displayState?.type === "updates-available") {
+    return /* @__PURE__ */ (0, import_jsx_runtime52.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: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon2, { icon: "upgrade" }),
+          STRINGS.updates.updateAvailable(
+            version,
+            displayState.response.latestVersion
+          ),
+          displayState.response.downloadUrl && /* @__PURE__ */ (0, import_jsx_runtime52.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_runtime52.jsx)(Icon2, { icon: "download" }),
+                STRINGS.updates.download
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return null;
+};
+
+// src/components/frontend/toolbox/root.tsx
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var ToolboxRoot = ({ info }) => {
+  const { config } = info;
+  const { sendMessage, call } = (0, import_react42.useContext)(StageContext);
+  const [dialogMode, setDialogMode] = (0, import_react42.useState)(null);
+  const [assignToOutput, setAssignToOutput] = (0, import_react42.useState)(null);
+  (0, import_react42.useEffect)(() => {
     if (assignToOutput) {
       const onEscape = (e) => {
         if (e.key === "Escape") {
@@ -18111,7 +18730,7 @@ var ToolboxRoot = ({ info }) => {
       };
     }
   }, [assignToOutput]);
-  const updateConfig = (0, import_react38.useCallback)(
+  const updateConfig = (0, import_react42.useCallback)(
     (change) => {
       const diff = diffJson(config, change(config));
       sendMessage?.({
@@ -18125,15 +18744,15 @@ var ToolboxRoot = ({ info }) => {
     },
     [sendMessage, info.key, config]
   );
-  const configContext = (0, import_react38.useMemo)(
+  const configContext = (0, import_react42.useMemo)(
     () => ({
       config,
       updateConfig
     }),
     [config, updateConfig]
   );
-  const closeDialog = (0, import_react38.useCallback)(() => setDialogMode(null), []);
-  const getNetworkInterfaces = (0, import_react38.useCallback)(async () => {
+  const closeDialog = (0, import_react42.useCallback)(() => setDialogMode(null), []);
+  const getNetworkInterfaces = (0, import_react42.useCallback)(async () => {
     if (!call) {
       throw new Error("No call function available");
     }
@@ -18144,12 +18763,12 @@ var ToolboxRoot = ({ info }) => {
       action: "toolbox-root-get-network-interfaces"
     });
   }, [call, info.key]);
-  const networkContextValue = (0, import_react38.useMemo)(() => {
+  const networkContextValue = (0, import_react42.useMemo)(() => {
     return {
       getNetworkInterfaces
     };
   }, [getNetworkInterfaces]);
-  const assignToOutputCallback = (0, import_react38.useMemo)(() => {
+  const assignToOutputCallback = (0, import_react42.useMemo)(() => {
     if (!assignToOutput) {
       return null;
     }
@@ -18174,7 +18793,7 @@ var ToolboxRoot = ({ info }) => {
       setAssignToOutput(null);
     };
   }, [assignToOutput, updateConfig]);
-  const callHandler = (0, import_react38.useCallback)(
+  const callHandler = (0, import_react42.useCallback)(
     async ({ path, handler, args }) => {
       if (!call) {
         throw new Error("No call function available");
@@ -18191,149 +18810,121 @@ var ToolboxRoot = ({ info }) => {
     },
     [call, info.key]
   );
-  const handlers = (0, import_react38.useMemo)(
+  const handlers = (0, import_react42.useMemo)(
     () => ({
       handlers: info.handlers,
       callHandler
     }),
     [info.handlers, callHandler]
   );
-  const windowedTimecodeId = (0, import_react38.useMemo)(
+  const windowedTimecodeId = (0, import_react42.useMemo)(
     () => getFragmentValue("tc", TIMECODE_INSTANCE_ID),
     []
   );
-  const isMainWindow = windowedTimecodeId === null;
-  const root = (0, import_react38.useMemo)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex h-screen flex-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ToolbarWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(ToolbarRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.jsx)("span", { className: "font-bold text-hint-gradient", children: STRINGS.title })
-          }
-        ),
-        isMainWindow && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ToolbarDivider, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            ControlButton,
-            {
-              onClick: () => setWindowMode(
-                (mode) => mode === "settings" ? null : "settings"
+  const root = (0, import_react42.useMemo)(
+    () => windowedTimecodeId ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Layout, { modes: null, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(FullscreenTimecodeDisplay, { id: windowedTimecodeId }) }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        Layout,
+        {
+          footer: true,
+          modes: {
+            license: {
+              child: (setWindowMode) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                License,
+                {
+                  license: info.license,
+                  setWindowMode
+                }
               ),
-              variant: "titlebar",
+              icon: "info",
+              title: STRINGS.license
+            },
+            settings: {
+              child: (setWindowMode) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Settings, { setWindowMode }),
               icon: "settings",
-              active: windowMode === "settings",
-              title: STRINGS.toggle(STRINGS.settings.title)
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            ControlButton,
-            {
-              onClick: () => setWindowMode((mode) => mode === "debug" ? null : "debug"),
-              variant: "titlebar",
+              title: STRINGS.settings.title
+            },
+            debug: {
+              child: () => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Debugger, { title: STRINGS.debugger, className: "size-full" }),
               icon: "bug_report",
-              active: windowMode === "debug",
-              title: STRINGS.toggle(STRINGS.debugger)
+              title: STRINGS.debugger
             }
-          )
-        ] })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "relative flex h-0 grow flex-col", children: [
-        connection.state !== "connected" ? /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.jsx)(Icon2, { icon: "signal_disconnected", className: "text-block-icon" }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "text-center", children: STRINGS.connectionError }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ControlButton, { onClick: reconnect, variant: "large", icon: "replay", children: STRINGS.reconnect })
-            ]
-          }
-        ) : windowMode === "debug" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Debugger, { title: STRINGS.debugger, className: "size-full" }) : windowMode === "settings" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Settings, { setWindowMode }) : windowedTimecodeId ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FullscreenTimecodeDisplay, { id: windowedTimecodeId }) : /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.jsx)(
-                InputsSection,
-                {
-                  setDialogMode,
-                  assignToOutput: assignToOutputCallback
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                GeneratorsSection,
-                {
-                  setDialogMode,
-                  assignToOutput: assignToOutputCallback
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                OutputsSection,
-                {
-                  setDialogMode,
-                  assignToOutput,
-                  setAssignToOutput
-                }
-              )
-            ]
-          }
-        ),
-        dialogMode?.section.type === "inputs" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-          InputSettingsDialog,
-          {
-            close: closeDialog,
-            input: dialogMode.section.input,
-            target: dialogMode.target
-          }
-        ),
-        dialogMode?.section.type === "generators" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-          GeneratorSettingsDialog,
-          {
-            close: closeDialog,
-            generator: dialogMode.section.generator,
-            target: dialogMode.target
-          }
-        ),
-        dialogMode?.section.type === "outputs" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-          OutputSettingsDialog,
-          {
-            close: closeDialog,
-            output: dialogMode.section.output,
-            target: dialogMode.target
-          }
-        )
-      ] }),
-      isMainWindow && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-        "div",
+          },
+          licenseMode: "license",
+          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(UpdateBanner, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime53.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_runtime53.jsx)(
+                    InputsSection,
+                    {
+                      setDialogMode,
+                      assignToOutput: assignToOutputCallback
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                    GeneratorsSection,
+                    {
+                      setDialogMode,
+                      assignToOutput: assignToOutputCallback
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                    OutputsSection,
+                    {
+                      setDialogMode,
+                      assignToOutput,
+                      setAssignToOutput
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        }
+      ),
+      dialogMode?.section.type === "inputs" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        InputSettingsDialog,
         {
-          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_runtime48.jsx)(ExternalLink, { href: "https://arcanewizards.com", children: "Arcane Wizards" })
-          ]
+          close: closeDialog,
+          input: dialogMode.section.input,
+          target: dialogMode.target
+        }
+      ),
+      dialogMode?.section.type === "generators" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        GeneratorSettingsDialog,
+        {
+          close: closeDialog,
+          generator: dialogMode.section.generator,
+          target: dialogMode.target
+        }
+      ),
+      dialogMode?.section.type === "outputs" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        OutputSettingsDialog,
+        {
+          close: closeDialog,
+          output: dialogMode.section.output,
+          target: dialogMode.target
         }
       )
     ] }),
     [
-      connection,
-      reconnect,
       assignToOutput,
       assignToOutputCallback,
       closeDialog,
       dialogMode,
-      windowMode,
-      isMainWindow,
-      windowedTimecodeId
+      windowedTimecodeId,
+      info.license
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ConfigContext.Provider, { value: configContext, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(NetworkContext.Provider, { value: networkContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ApplicationStateContext.Provider, { value: info.state, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ApplicationHandlersContext.Provider, { value: handlers, children: root }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ConfigContext.Provider, { value: configContext, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(NetworkContext.Provider, { value: networkContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ApplicationStateContext.Provider, { value: info.state, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ApplicationHandlersContext.Provider, { value: handlers, children: root }) }) }) });
 };
 
 // src/components/frontend/index.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var timecodeToolboxFrontendComponents = () => ({
   namespace: NAMESPACE,
   render: (info) => {
@@ -18342,7 +18933,9 @@ var timecodeToolboxFrontendComponents = () => ({
     }
     switch (info.component) {
       case "toolbox-root":
-        return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ToolboxRoot, { info });
+        return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ToolboxRoot, { info });
+      case "license-gate":
+        return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(LicenseGate, { info });
     }
   }
 });
@@ -18350,7 +18943,7 @@ var startTimecodeToolboxServerFrontend = (browser) => {
   startSigilFrontend({
     browser,
     appRenderers: [timecodeToolboxFrontendComponents()],
-    loadingState: () => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { style: { width: "100%", textAlign: "center", padding: "2rem" }, children: "Loading Toolbox..." })
+    loadingState: () => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { style: { width: "100%", textAlign: "center", padding: "2rem" }, children: "Loading Toolbox..." })
   });
 };
 window.startTimecodeToolboxServerFrontend = startTimecodeToolboxServerFrontend;