@arcanewizards/timecode-toolbox 0.1.0 → 0.1.1

package/dist/components/frontend/index.mjs

@@ -13982,7 +13982,7 @@ function cnd(condition, truthyClassName, falseyClassName) {
   return condition ? truthyClassName : falseyClassName;
 }
 
-// ../../packages/sigil/dist/chunk-XAK7WC3D.js
+// ../../packages/sigil/dist/chunk-HF7IIHPE.js
 import {
   createContext as createContext6,
   forwardRef as forwardRef42,
@@ -14026,7 +14026,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
 import {
   forwardRef as forwardRef15
 } from "react";
@@ -14098,7 +14098,8 @@ var clsControlButton = ({
   active,
   touching,
   position,
-  className
+  className,
+  primary
 }) => cn(
   `sigil-control-button`,
   cnd(variant === "border", `sigil-control-button-variant-border`),
@@ -14110,6 +14111,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
 );
@@ -14126,6 +14128,7 @@ var ControlButtonFrame = forwardRef15(
     title,
     tooltipSide,
     position,
+    primary,
     ...props
   }, ref) => {
     const btn = /* @__PURE__ */ jsx17(
@@ -14140,6 +14143,7 @@ var ControlButtonFrame = forwardRef15(
           active,
           touching,
           position,
+          primary,
           className
         }),
         children: /* @__PURE__ */ jsxs4("span", { children: [
@@ -15911,7 +15915,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;
@@ -15920,89 +15929,13 @@ var isTimecodeToolboxComponent = (component) => component.namespace === NAMESPAC
 
 // src/components/frontend/toolbox/root.tsx
 import {
-  useCallback as useCallback18,
-  useContext as useContext13,
-  useEffect as useEffect30,
+  useCallback as useCallback20,
+  useContext as useContext16,
+  useEffect as useEffect31,
   useMemo as useMemo15,
-  useState as useState29
+  useState as useState31
 } from "react";
 
-// src/components/frontend/toolbox/core/size-aware-div.tsx
-import { useEffect as useEffect25, useState as useState23 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var SizeAwareDiv = ({
-  children,
-  style,
-  ...rest
-}) => {
-  const [div, setDiv] = useState23(null);
-  const [rect, setRect] = useState23(null);
-  useEffect25(() => {
-    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__ */ jsx20(
-    "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
-import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
-var ExternalLink = ({
-  href,
-  children
-}) => {
-  const { openExternalLink } = useBrowserContext();
-  return /* @__PURE__ */ jsx21(
-    "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__ */ jsxs8(
-    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__ */ jsx21(Icon2, { icon: "handyman", className: "text-block-icon" }),
-        /* @__PURE__ */ jsx21("div", { className: "text-center", children: text })
-      ]
-    }
-  );
-};
-
 // ../../packages/artnet/dist/chunk-J2HDMITA.js
 var ARTNET_PORT = 6454;
 var TIMECODE_FPS = {
@@ -16018,6 +15951,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",
@@ -16026,6 +15960,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",
@@ -16085,6 +16023,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"
   }
 };
 
@@ -16098,23 +16047,23 @@ import {
 } from "react";
 
 // src/components/frontend/toolbox/util.tsx
-import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
 var PrimaryToolboxSection = ({
   title,
   children,
   buttons
 }) => {
-  return /* @__PURE__ */ jsxs9("div", { className: "flex grow gap-px", children: [
-    /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs8("div", { className: "flex grow gap-px", children: [
+    /* @__PURE__ */ jsx20(
       "div",
       {
         className: "\n          flex items-center justify-center bg-sigil-bg-light p-1\n          writing-mode-vertical-rl\n        ",
         children: title
       }
     ),
-    /* @__PURE__ */ jsxs9("div", { className: "flex grow flex-col gap-px", children: [
-      /* @__PURE__ */ jsx26("div", { className: "flex grow flex-col gap-px", children }),
-      /* @__PURE__ */ jsx26("div", { className: "flex w-full flex-wrap gap-1 bg-sigil-bg-light p-1", children: buttons })
+    /* @__PURE__ */ jsxs8("div", { className: "flex grow flex-col gap-px", children: [
+      /* @__PURE__ */ jsx20("div", { className: "flex grow flex-col gap-px", children }),
+      /* @__PURE__ */ jsx20("div", { className: "flex w-full flex-wrap gap-1 bg-sigil-bg-light p-1", children: buttons })
     ] })
   ] });
 };
@@ -16175,6 +16124,47 @@ import {
   useState as useState24
 } from "react";
 
+// src/components/frontend/toolbox/core/size-aware-div.tsx
+import { useEffect as useEffect25, useState as useState23 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var SizeAwareDiv = ({
+  children,
+  style,
+  ...rest
+}) => {
+  const [div, setDiv] = useState23(null);
+  const [rect, setRect] = useState23(null);
+  useEffect25(() => {
+    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__ */ jsx21(
+    "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) => {
@@ -16280,7 +16270,7 @@ var augmentUpstreamTimecodeWithOutputMetadata = (tc, config) => {
 };
 
 // src/components/frontend/toolbox/core/timecode-display.tsx
-import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
 var ActiveTimecodeText = ({
   effectiveStartTimeMillis,
   speed
@@ -16328,7 +16318,7 @@ var Timeline2 = ({ state, totalTime }) => {
       }
     };
   }, [state, timeDifferenceMs]);
-  return /* @__PURE__ */ jsx27("div", { className: "w-full border border-timecode-usage-foreground p-px", children: /* @__PURE__ */ jsx27("div", { className: "relative h-1 w-full overflow-hidden", children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx26("div", { className: "w-full border border-timecode-usage-foreground p-px", children: /* @__PURE__ */ jsx26("div", { className: "relative h-1 w-full overflow-hidden", children: /* @__PURE__ */ jsx26(
     "div",
     {
       className: "absolute inset-y-0 left-0 bg-timecode-usage-foreground",
@@ -16380,8 +16370,8 @@ var TimecodeDisplay = ({
       }
     }
   }, [hooks, play, pause, state.state]);
-  return /* @__PURE__ */ jsxs10("div", { className: "flex grow flex-col gap-px", children: [
-    /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs9("div", { className: "flex grow flex-col gap-px", children: [
+    /* @__PURE__ */ jsxs9(
       "div",
       {
         className: cn(
@@ -16393,8 +16383,8 @@ var TimecodeDisplay = ({
           )
         ),
         children: [
-          headerComponents && /* @__PURE__ */ jsx27("div", { className: "flex flex-wrap gap-0.25", children: headerComponents }),
-          /* @__PURE__ */ jsx27(
+          headerComponents && /* @__PURE__ */ jsx26("div", { className: "flex flex-wrap gap-0.25", children: headerComponents }),
+          /* @__PURE__ */ jsx26(
             SizeAwareDiv,
             {
               className: cn(
@@ -16409,7 +16399,7 @@ var TimecodeDisplay = ({
                 )
               ),
               onClick: toggle,
-              children: /* @__PURE__ */ jsx27("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx27("span", { className: cn("font-mono text-timecode-adaptive"), children: state.state === "none" ? "--:--:--:---" : state.state === "stopped" ? displayMillis(state.positionMillis) : /* @__PURE__ */ jsx27(
+              children: /* @__PURE__ */ jsx26("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx26("span", { className: cn("font-mono text-timecode-adaptive"), children: state.state === "none" ? "--:--:--:---" : state.state === "stopped" ? displayMillis(state.positionMillis) : /* @__PURE__ */ jsx26(
                 ActiveTimecodeText,
                 {
                   effectiveStartTimeMillis: state.effectiveStartTimeMillis,
@@ -16418,8 +16408,8 @@ var TimecodeDisplay = ({
               ) }) })
             }
           ),
-          hooks?.pause || hooks?.play ? /* @__PURE__ */ jsxs10("div", { className: "flex justify-center gap-px", children: [
-            hooks.beginning && /* @__PURE__ */ jsx27(
+          hooks?.pause || hooks?.play ? /* @__PURE__ */ jsxs9("div", { className: "flex justify-center gap-px", children: [
+            hooks.beginning && /* @__PURE__ */ jsx26(
               ControlButton,
               {
                 onClick: beginning,
@@ -16430,7 +16420,7 @@ var TimecodeDisplay = ({
                 className: "text-timecode-usage-foreground!"
               }
             ),
-            hooks.seekRelative && /* @__PURE__ */ jsx27(
+            hooks.seekRelative && /* @__PURE__ */ jsx26(
               ControlButton,
               {
                 onClick: back5seconds,
@@ -16441,7 +16431,7 @@ var TimecodeDisplay = ({
                 className: "text-timecode-usage-foreground!"
               }
             ),
-            state.state === "none" || state.state === "stopped" ? /* @__PURE__ */ jsx27(
+            state.state === "none" || state.state === "stopped" ? /* @__PURE__ */ jsx26(
               ControlButton,
               {
                 onClick: play,
@@ -16451,7 +16441,7 @@ var TimecodeDisplay = ({
                 title: STRINGS.controls.play,
                 className: "text-timecode-usage-foreground!"
               }
-            ) : /* @__PURE__ */ jsx27(
+            ) : /* @__PURE__ */ jsx26(
               ControlButton,
               {
                 onClick: pause,
@@ -16462,7 +16452,7 @@ var TimecodeDisplay = ({
                 className: "text-timecode-usage-foreground!"
               }
             ),
-            hooks.seekRelative && /* @__PURE__ */ jsx27(
+            hooks.seekRelative && /* @__PURE__ */ jsx26(
               ControlButton,
               {
                 onClick: forward5seconds,
@@ -16474,33 +16464,33 @@ var TimecodeDisplay = ({
               }
             )
           ] }) : null,
-          metadata?.totalTime && /* @__PURE__ */ jsx27(Timeline2, { state, totalTime: metadata.totalTime })
+          metadata?.totalTime && /* @__PURE__ */ jsx26(Timeline2, { state, totalTime: metadata.totalTime })
         ]
       }
     ),
-    (state.smpteMode !== null || state.accuracyMillis !== null || config.delayMs !== null) && /* @__PURE__ */ jsxs10("div", { className: "flex gap-px", children: [
-      config.delayMs !== null && /* @__PURE__ */ jsx27("div", { className: "grow basis-0 truncate bg-sigil-bg-light p-0.5", children: STRINGS.delay(config.delayMs) }),
-      state.smpteMode !== null && /* @__PURE__ */ jsx27("div", { className: "grow basis-0 truncate bg-sigil-bg-light p-0.5", children: STRINGS.smtpeModes[state.smpteMode] }),
-      state.accuracyMillis !== null && /* @__PURE__ */ jsx27("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__ */ jsxs9("div", { className: "flex gap-px", children: [
+      config.delayMs !== null && /* @__PURE__ */ jsx26("div", { className: "grow basis-0 truncate bg-sigil-bg-light p-0.5", children: STRINGS.delay(config.delayMs) }),
+      state.smpteMode !== null && /* @__PURE__ */ jsx26("div", { className: "grow basis-0 truncate bg-sigil-bg-light p-0.5", children: STRINGS.smtpeModes[state.smpteMode] }),
+      state.accuracyMillis !== null && /* @__PURE__ */ jsx26("div", { className: "grow basis-0 truncate bg-sigil-bg-light p-0.5", children: STRINGS.accuracy(state.accuracyMillis) })
     ] }),
-    metadata?.artist || metadata?.title ? /* @__PURE__ */ jsx27(
+    metadata?.artist || metadata?.title ? /* @__PURE__ */ jsx26(
       TooltipWrapper,
       {
-        tooltip: /* @__PURE__ */ jsxs10(Fragment8, { children: [
-          metadata.title && /* @__PURE__ */ jsxs10("div", { children: [
-            /* @__PURE__ */ jsx27("span", { className: "font-bold", children: "Title:" }),
+        tooltip: /* @__PURE__ */ jsxs9(Fragment8, { children: [
+          metadata.title && /* @__PURE__ */ jsxs9("div", { children: [
+            /* @__PURE__ */ jsx26("span", { className: "font-bold", children: "Title:" }),
             " ",
             metadata.title
           ] }),
-          metadata.artist && /* @__PURE__ */ jsxs10("div", { children: [
-            /* @__PURE__ */ jsx27("span", { className: "font-bold", children: "Artist:" }),
+          metadata.artist && /* @__PURE__ */ jsxs9("div", { children: [
+            /* @__PURE__ */ jsx26("span", { className: "font-bold", children: "Artist:" }),
             " ",
             metadata.artist
           ] })
         ] }),
-        children: /* @__PURE__ */ jsxs10("div", { className: "flex gap-px", children: [
-          metadata.title && /* @__PURE__ */ jsx27("div", { className: "grow truncate bg-sigil-bg-light p-0.5 font-bold", children: metadata.title }),
-          metadata.artist && /* @__PURE__ */ jsx27("div", { className: "grow truncate bg-sigil-bg-light p-0.5", children: metadata.artist })
+        children: /* @__PURE__ */ jsxs9("div", { className: "flex gap-px", children: [
+          metadata.title && /* @__PURE__ */ jsx26("div", { className: "grow truncate bg-sigil-bg-light p-0.5 font-bold", children: metadata.title }),
+          metadata.artist && /* @__PURE__ */ jsx26("div", { className: "grow truncate bg-sigil-bg-light p-0.5", children: metadata.artist })
         ] })
       }
     ) : null
@@ -16541,7 +16531,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__ */ jsx27(
+    return Object.entries(timecode.timecodes).map(([key, child]) => /* @__PURE__ */ jsx26(
       TimecodeTreeDisplay,
       {
         config,
@@ -16557,28 +16547,28 @@ var TimecodeTreeDisplay = ({
       key
     ));
   }
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: "relative flex grow flex-col text-timecode-usage-foreground",
       style: color && cssSigilColorUsageVariables("timecode-usage", sigilColorUsage(color)),
       children: [
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx26(
           TimecodeDisplay,
           {
             id,
             timecode: isTimecodeInstance(timecode) ? timecode : EMPTY_TIMECODE,
             config,
-            headerComponents: /* @__PURE__ */ jsxs10(Fragment8, { children: [
-              /* @__PURE__ */ jsxs10("div", { className: "flex grow items-start gap-0.25", children: [
-                /* @__PURE__ */ jsx27(
+            headerComponents: /* @__PURE__ */ jsxs9(Fragment8, { children: [
+              /* @__PURE__ */ jsxs9("div", { className: "flex grow items-start gap-0.25", children: [
+                /* @__PURE__ */ jsx26(
                   "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__ */ jsx27(
+                /* @__PURE__ */ jsx26(
                   "div",
                   {
                     className: cn(
@@ -16589,8 +16579,8 @@ var TimecodeTreeDisplay = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs10(ControlButtonGroup, { className: "rounded-md bg-sigil-bg-light", children: [
-                /* @__PURE__ */ jsx27(
+              /* @__PURE__ */ jsxs9(ControlButtonGroup, { className: "rounded-md bg-sigil-bg-light", children: [
+                /* @__PURE__ */ jsx26(
                   ControlButton,
                   {
                     variant: "toolbar",
@@ -16604,12 +16594,12 @@ var TimecodeTreeDisplay = ({
             ] })
           }
         ),
-        assignToOutput && id && !isOutputInstanceId(id) && /* @__PURE__ */ jsx27(
+        assignToOutput && id && !isOutputInstanceId(id) && /* @__PURE__ */ jsx26(
           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__ */ jsx27(Icon2, { icon: "link", className: "text-block-icon" })
+            children: /* @__PURE__ */ jsx26(Icon2, { icon: "link", className: "text-block-icon" })
           }
         )
       ]
@@ -16675,22 +16665,22 @@ var FullscreenTimecodeDisplay = ({
     }
   }, [id, config]);
   if (!instanceConfig) {
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs9(
       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__ */ jsx27(Icon2, { icon: "question_mark", className: "text-block-icon" }),
-          /* @__PURE__ */ jsx27("div", { className: "text-center", children: STRINGS.errors.unknownTimecodeID })
+          /* @__PURE__ */ jsx26(Icon2, { icon: "question_mark", className: "text-block-icon" }),
+          /* @__PURE__ */ jsx26("div", { className: "text-center", children: STRINGS.errors.unknownTimecodeID })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       className: "\n        flex h-0 grow flex-col gap-px overflow-y-auto bg-sigil-border\n        scrollbar-sigil\n      ",
-      children: /* @__PURE__ */ jsx27(
+      children: /* @__PURE__ */ jsx26(
         TimecodeTreeDisplay,
         {
           id,
@@ -16755,6 +16745,54 @@ function v4(options, buf, offset4) {
 }
 var v4_default = v4;
 
+// src/components/frontend/toolbox/content.tsx
+import { jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
+var ExternalLink = ({
+  href,
+  children
+}) => {
+  const { openExternalLink } = useBrowserContext();
+  return /* @__PURE__ */ jsx27(
+    "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__ */ jsx27(
+    "span",
+    {
+      onClick,
+      className: "\n        cursor-pointer text-sigil-usage-hint-foreground\n        hover:underline\n      ",
+      children
+    }
+  );
+};
+var NoToolboxChildren = ({ text }) => {
+  return /* @__PURE__ */ jsxs10(
+    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__ */ jsx27(Icon2, { icon: "handyman", className: "text-block-icon" }),
+        /* @__PURE__ */ jsx27("div", { className: "text-center", children: text })
+      ]
+    }
+  );
+};
+
 // src/components/frontend/toolbox/outputs.tsx
 import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
 var DmxConnectionSettings = ({
@@ -17946,6 +17984,9 @@ var diffJson = (a, b) => {
   return { type: "value", after: b };
 };
 
+// src/components/frontend/toolbox/settings.tsx
+import { useContext as useContext13 } from "react";
+
 // ../../packages/sigil/dist/frontend/appearance.js
 import { useCallback as useCallback17 } from "react";
 import { jsx as jsx31, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -18090,8 +18131,17 @@ var useBrowserPreferences = createBrowserPreferencesHook(TOOLBOX_PREFERENCES);
 
 // src/components/frontend/toolbox/settings.tsx
 import { jsx as jsx35, jsxs as jsxs15 } from "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 } = useContext13(ConfigContext);
+  const { updates } = useApplicationState();
   return /* @__PURE__ */ jsxs15("div", { className: "flex grow flex-col", children: [
     /* @__PURE__ */ jsx35(ToolbarWrapper, { children: /* @__PURE__ */ jsxs15(ToolbarRow, { children: [
       /* @__PURE__ */ jsx35("span", { className: "grow p-1", children: STRINGS.settings.title }),
@@ -18118,26 +18168,595 @@ var Settings = ({ setWindowMode }) => {
               color: preferences.color,
               onColorChange: (color) => updateBrowserPrefs((current) => ({ ...current, color }))
             }
-          )
+          ),
+          /* @__PURE__ */ jsx35(ControlLabel, { children: STRINGS.updates.settingsLabel }),
+          /* @__PURE__ */ jsx35(
+            ControlSelect,
+            {
+              value: config.checkForUpdates ? "enabled" : "disabled",
+              options: ENABLED_DISABLED_OPTIONS,
+              onChange: (value) => updateConfig((current) => ({
+                ...current,
+                checkForUpdates: value === "enabled"
+              })),
+              variant: "large"
+            }
+          ),
+          /* @__PURE__ */ jsx35(ControlDetails, { children: STRINGS.updates.settingsDetails }),
+          updates && "lastCheckedMillis" in updates && /* @__PURE__ */ jsx35(ControlDetails, { children: STRINGS.updates.lastChecked(
+            DATE_FORMATTER.format(updates.lastCheckedMillis)
+          ) })
         ] })
       }
     )
   ] });
 };
 
-// src/components/frontend/toolbox/root.tsx
-import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs16 } from "react/jsx-runtime";
-var ToolboxRoot = ({ info }) => {
-  const [windowMode, setWindowMode] = useState29(
-    null
+// src/components/frontend/toolbox/license.tsx
+import { useCallback as useCallback18, useContext as useContext15 } from "react";
+
+// src/components/frontend/toolbox/logo.tsx
+import { jsx as jsx36, jsxs as jsxs16 } from "react/jsx-runtime";
+var TimecodeToolboxLogo = (props) => /* @__PURE__ */ jsxs16(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1365.333 1365.333",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs16("defs", { children: [
+        /* @__PURE__ */ jsx36("mask", { id: "b", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx36(
+          "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__ */ jsx36("mask", { id: "g", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx36(
+          "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__ */ jsx36("mask", { id: "f", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx36(
+          "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__ */ jsx36("mask", { id: "e", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx36(
+          "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__ */ jsx36("mask", { id: "d", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx36(
+          "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__ */ jsx36("mask", { id: "c", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx36(
+          "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__ */ jsx36("mask", { id: "k", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx36(
+          "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__ */ jsx36("mask", { id: "j", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx36(
+          "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__ */ jsx36("mask", { id: "i", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx36(
+          "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__ */ jsx36("mask", { id: "h", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx36(
+          "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__ */ jsx36(
+          "filter",
+          {
+            id: "a",
+            width: "1.201",
+            height: "1.19",
+            x: "-.101",
+            y: "-.074",
+            "color-interpolation-filters": "sRGB",
+            children: /* @__PURE__ */ jsx36("feGaussianBlur", { stdDeviation: "10.298" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs16(
+        "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__ */ jsx36(
+              "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__ */ jsx36(
+              "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__ */ jsx36(
+              "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__ */ jsxs16("g", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", children: [
+        /* @__PURE__ */ jsx36(
+          "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__ */ jsx36(
+          "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__ */ jsx36(
+          "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__ */ jsx36(
+        "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__ */ jsx36(
+        "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__ */ jsx36(
+        "path",
+        {
+          fill: "#ff8c00",
+          d: "m1185.387 605.49 13.02-207.138H166.926l13.02 207.137z"
+        }
+      ),
+      /* @__PURE__ */ jsx36(
+        "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__ */ jsx36(
+        "path",
+        {
+          fill: "#eceff1",
+          d: "m916.084 52.25 420.493 180.531-532.698 916.066-476.546-308.58Z",
+          mask: "url(#c)"
+        }
+      ),
+      /* @__PURE__ */ jsx36(
+        "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__ */ jsx36(
+        "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__ */ jsx36(
+        "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__ */ jsx36(
+        "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__ */ jsx36(
+        "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__ */ jsx36(
+        "path",
+        {
+          fill: "#eceff1",
+          d: "m105.922 257.574 152.745-109.918 438.66 518.005-348.484 67.536Z",
+          mask: "url(#h)"
+        }
+      ),
+      /* @__PURE__ */ jsx36(
+        "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__ */ jsx36(
+        "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__ */ jsx36(
+        "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__ */ jsx36("path", { fill: "#ffba66", d: "M170.482 652.84h1025.265v453.341H170.482Z" }),
+      /* @__PURE__ */ jsx36("path", { fill: "#ff8c00", d: "M139.336 674.512h1086.662v453.342H139.336Z" }),
+      /* @__PURE__ */ jsx36(
+        "rect",
+        {
+          width: "875.482",
+          height: "332.3",
+          x: "244.926",
+          y: "735.033",
+          fill: "#cc7000",
+          rx: "77.883",
+          ry: "77.883"
+        }
+      ),
+      /* @__PURE__ */ jsx36(
+        "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
+import { useContext as useContext14, useState as useState29 } from "react";
+
+// src/components/frontend/toolbox/core/footer.tsx
+import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs17 } from "react/jsx-runtime";
+var Footer = ({ openLicenseDetails }) => {
+  return /* @__PURE__ */ jsxs17(
+    "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__ */ jsxs17("span", { children: [
+          "Created by",
+          "\xA0",
+          /* @__PURE__ */ jsx37(ExternalLink, { href: "https://arcanewizards.com", children: "Arcane Wizards" })
+        ] }),
+        /* @__PURE__ */ jsx37(ToolbarDivider, {}),
+        /* @__PURE__ */ jsx37(ExternalLink, { href: SOURCE_CODE_URL, children: STRINGS.sourceCode }),
+        openLicenseDetails && /* @__PURE__ */ jsxs17(Fragment12, { children: [
+          /* @__PURE__ */ jsx37(ToolbarDivider, {}),
+          /* @__PURE__ */ jsx37(TextButton, { onClick: openLicenseDetails, children: STRINGS.license })
+        ] })
+      ]
+    }
   );
-  const { config } = info;
-  const { sendMessage, call, connection, reconnect } = useContext13(StageContext);
-  const [dialogMode, setDialogMode] = useState29(null);
-  const [assignToOutput, setAssignToOutput] = useState29(null);
+};
+
+// src/components/frontend/toolbox/core/layout.tsx
+import { Fragment as Fragment13, jsx as jsx38, jsxs as jsxs18 } from "react/jsx-runtime";
+var Layout = ({
+  modes,
+  children,
+  licenseMode,
+  footer
+}) => {
+  const [windowMode, setWindowMode] = useState29(null);
+  const { connection, reconnect } = useContext14(StageContext);
   const { preferences } = useBrowserPreferences();
   useRootHintVariables(preferences.color);
+  return /* @__PURE__ */ jsxs18("div", { className: "flex h-screen flex-col", children: [
+    /* @__PURE__ */ jsx38(ToolbarWrapper, { children: /* @__PURE__ */ jsxs18(ToolbarRow, { children: [
+      /* @__PURE__ */ jsx38(
+        "div",
+        {
+          className: "\n              flex h-full min-h-[36px] grow items-center justify-center px-1\n              app-title-bar\n            ",
+          children: /* @__PURE__ */ jsx38("span", { className: "font-bold text-hint-gradient", children: STRINGS.title })
+        }
+      ),
+      modes && /* @__PURE__ */ jsxs18(Fragment13, { children: [
+        /* @__PURE__ */ jsx38(ToolbarDivider, {}),
+        Object.entries(modes).map(([key, { icon, title }]) => /* @__PURE__ */ jsx38(
+          ControlButton,
+          {
+            onClick: () => setWindowMode((mode) => mode === key ? null : key),
+            variant: "titlebar",
+            icon,
+            active: windowMode === key,
+            title: STRINGS.toggle(title)
+          },
+          key
+        ))
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx38("div", { className: "relative flex h-0 grow flex-col", children: connection.state !== "connected" ? /* @__PURE__ */ jsxs18(
+      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__ */ jsx38(Icon2, { icon: "signal_disconnected", className: "text-block-icon" }),
+          /* @__PURE__ */ jsx38("div", { className: "text-center", children: STRINGS.connectionError }),
+          /* @__PURE__ */ jsx38(ControlButton, { onClick: reconnect, variant: "large", icon: "replay", children: STRINGS.reconnect })
+        ]
+      }
+    ) : windowMode && modes?.[windowMode] ? modes[windowMode].child(setWindowMode) : children }),
+    footer && /* @__PURE__ */ jsx38(
+      Footer,
+      {
+        openLicenseDetails: licenseMode && (() => setWindowMode(
+          (mode) => mode === licenseMode ? null : licenseMode
+        ))
+      }
+    )
+  ] });
+};
+
+// src/components/frontend/toolbox/license.tsx
+import { jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
+var LicenseContent = ({ license }) => {
+  return /* @__PURE__ */ jsx39("div", { className: "flex flex-col gap-2 rounded-md bg-sigil-bg-light p-2", children: license.split("\n\n").map((paragraph, index2) => /* @__PURE__ */ jsx39("p", { className: "m-0", children: paragraph.replace(/\n/g, " ").trim() }, index2)) });
+};
+var License = ({ license, setWindowMode }) => {
+  return /* @__PURE__ */ jsx39("div", { className: "flex grow flex-col", children: /* @__PURE__ */ jsxs19(
+    "div",
+    {
+      className: "\n          flex grow basis-0 flex-col overflow-y-auto px-2 pb-2 scrollbar-sigil\n        ",
+      children: [
+        /* @__PURE__ */ jsx39(TimecodeToolboxLogo, { className: "h-[20%] max-h-[420px] min-h-[110px] w-full" }),
+        /* @__PURE__ */ jsx39(LicenseContent, { license }),
+        /* @__PURE__ */ jsx39("div", { className: "flex justify-center p-2", children: /* @__PURE__ */ jsx39(
+          ControlButton,
+          {
+            onClick: () => setWindowMode(null),
+            variant: "large",
+            icon: "close",
+            children: STRINGS.close(STRINGS.license)
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+var LicenseGate = ({ info }) => {
+  const { sendMessage } = useContext15(StageContext);
+  const acceptLicense = useCallback18(() => {
+    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__ */ jsx39(
+    Layout,
+    {
+      footer: true,
+      modes: {
+        debug: {
+          child: () => /* @__PURE__ */ jsx39(Debugger, { title: STRINGS.debugger, className: "size-full" }),
+          icon: "bug_report",
+          title: STRINGS.debugger
+        }
+      },
+      children: /* @__PURE__ */ jsxs19(
+        "div",
+        {
+          className: "\n          flex grow basis-0 flex-col overflow-y-auto px-2 pb-2 scrollbar-sigil\n        ",
+          children: [
+            /* @__PURE__ */ jsx39(TimecodeToolboxLogo, { className: "h-[20%] max-h-[420px] min-h-[110px] w-full" }),
+            /* @__PURE__ */ jsx39("h2", { className: "text-center text-sigil-usage-hint-foreground", children: STRINGS.licensePrompt }),
+            /* @__PURE__ */ jsx39(LicenseContent, { license: info.license }),
+            /* @__PURE__ */ jsx39("div", { className: "flex justify-center p-2", children: /* @__PURE__ */ jsx39(
+              ControlButton,
+              {
+                onClick: acceptLicense,
+                variant: "large",
+                icon: "check",
+                primary: true,
+                children: STRINGS.acceptLicense
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/frontend/toolbox/core/updates.tsx
+import { useCallback as useCallback19, useEffect as useEffect30, useState as useState30 } from "react";
+import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
+var UpdateBanner = () => {
+  const { updates } = useApplicationState();
+  const { version } = useSystemInformation();
+  const { openExternalLink } = useBrowserContext();
+  const [displayState, setDisplayState] = useState30();
   useEffect30(() => {
+    if (updates?.type !== "loading") {
+      setDisplayState(updates);
+    }
+  }, [updates]);
+  const openDownloadLink = useCallback19(() => {
+    if (displayState?.type === "updates-available" && displayState.response.downloadUrl) {
+      openExternalLink(displayState.response.downloadUrl);
+    }
+  }, [displayState, openExternalLink]);
+  if (displayState?.type === "error") {
+    return /* @__PURE__ */ jsxs20(
+      "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__ */ jsx40(Icon2, { icon: "error" }),
+          displayState.error
+        ]
+      }
+    );
+  }
+  if (displayState?.type === "updates-available") {
+    return /* @__PURE__ */ jsxs20(
+      "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__ */ jsx40(Icon2, { icon: "upgrade" }),
+          STRINGS.updates.updateAvailable(
+            version,
+            displayState.response.latestVersion
+          ),
+          displayState.response.downloadUrl && /* @__PURE__ */ jsxs20(
+            "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__ */ jsx40(Icon2, { icon: "download" }),
+                STRINGS.updates.download
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return null;
+};
+
+// src/components/frontend/toolbox/root.tsx
+import { Fragment as Fragment14, jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
+var ToolboxRoot = ({ info }) => {
+  const { config } = info;
+  const { sendMessage, call } = useContext16(StageContext);
+  const [dialogMode, setDialogMode] = useState31(null);
+  const [assignToOutput, setAssignToOutput] = useState31(null);
+  useEffect31(() => {
     if (assignToOutput) {
       const onEscape = (e) => {
         if (e.key === "Escape") {
@@ -18150,7 +18769,7 @@ var ToolboxRoot = ({ info }) => {
       };
     }
   }, [assignToOutput]);
-  const updateConfig = useCallback18(
+  const updateConfig = useCallback20(
     (change) => {
       const diff = diffJson(config, change(config));
       sendMessage?.({
@@ -18171,8 +18790,8 @@ var ToolboxRoot = ({ info }) => {
     }),
     [config, updateConfig]
   );
-  const closeDialog = useCallback18(() => setDialogMode(null), []);
-  const getNetworkInterfaces = useCallback18(async () => {
+  const closeDialog = useCallback20(() => setDialogMode(null), []);
+  const getNetworkInterfaces = useCallback20(async () => {
     if (!call) {
       throw new Error("No call function available");
     }
@@ -18213,7 +18832,7 @@ var ToolboxRoot = ({ info }) => {
       setAssignToOutput(null);
     };
   }, [assignToOutput, updateConfig]);
-  const callHandler = useCallback18(
+  const callHandler = useCallback20(
     async ({ path, handler, args }) => {
       if (!call) {
         throw new Error("No call function available");
@@ -18241,138 +18860,110 @@ var ToolboxRoot = ({ info }) => {
     () => getFragmentValue("tc", TIMECODE_INSTANCE_ID),
     []
   );
-  const isMainWindow = windowedTimecodeId === null;
   const root = useMemo15(
-    () => /* @__PURE__ */ jsxs16("div", { className: "flex h-screen flex-col", children: [
-      /* @__PURE__ */ jsx36(ToolbarWrapper, { children: /* @__PURE__ */ jsxs16(ToolbarRow, { children: [
-        /* @__PURE__ */ jsx36(
-          "div",
-          {
-            className: "\n                flex h-full min-h-[36px] grow items-center justify-center px-1\n                app-title-bar\n              ",
-            children: /* @__PURE__ */ jsx36("span", { className: "font-bold text-hint-gradient", children: STRINGS.title })
-          }
-        ),
-        isMainWindow && /* @__PURE__ */ jsxs16(Fragment12, { children: [
-          /* @__PURE__ */ jsx36(ToolbarDivider, {}),
-          /* @__PURE__ */ jsx36(
-            ControlButton,
-            {
-              onClick: () => setWindowMode(
-                (mode) => mode === "settings" ? null : "settings"
+    () => windowedTimecodeId ? /* @__PURE__ */ jsx41(Layout, { modes: null, children: /* @__PURE__ */ jsx41(FullscreenTimecodeDisplay, { id: windowedTimecodeId }) }) : /* @__PURE__ */ jsxs21(Fragment14, { children: [
+      /* @__PURE__ */ jsx41(
+        Layout,
+        {
+          footer: true,
+          modes: {
+            license: {
+              child: (setWindowMode) => /* @__PURE__ */ jsx41(
+                License,
+                {
+                  license: info.license,
+                  setWindowMode
+                }
               ),
-              variant: "titlebar",
+              icon: "info",
+              title: STRINGS.license
+            },
+            settings: {
+              child: (setWindowMode) => /* @__PURE__ */ jsx41(Settings, { setWindowMode }),
               icon: "settings",
-              active: windowMode === "settings",
-              title: STRINGS.toggle(STRINGS.settings.title)
-            }
-          ),
-          /* @__PURE__ */ jsx36(
-            ControlButton,
-            {
-              onClick: () => setWindowMode((mode) => mode === "debug" ? null : "debug"),
-              variant: "titlebar",
+              title: STRINGS.settings.title
+            },
+            debug: {
+              child: () => /* @__PURE__ */ jsx41(Debugger, { title: STRINGS.debugger, className: "size-full" }),
               icon: "bug_report",
-              active: windowMode === "debug",
-              title: STRINGS.toggle(STRINGS.debugger)
+              title: STRINGS.debugger
             }
-          )
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsxs16("div", { className: "relative flex h-0 grow flex-col", children: [
-        connection.state !== "connected" ? /* @__PURE__ */ jsxs16(
-          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__ */ jsx36(Icon2, { icon: "signal_disconnected", className: "text-block-icon" }),
-              /* @__PURE__ */ jsx36("div", { className: "text-center", children: STRINGS.connectionError }),
-              /* @__PURE__ */ jsx36(ControlButton, { onClick: reconnect, variant: "large", icon: "replay", children: STRINGS.reconnect })
-            ]
-          }
-        ) : windowMode === "debug" ? /* @__PURE__ */ jsx36(Debugger, { title: STRINGS.debugger, className: "size-full" }) : windowMode === "settings" ? /* @__PURE__ */ jsx36(Settings, { setWindowMode }) : windowedTimecodeId ? /* @__PURE__ */ jsx36(FullscreenTimecodeDisplay, { id: windowedTimecodeId }) : /* @__PURE__ */ jsxs16(
-          "div",
-          {
-            className: "\n                flex h-0 grow flex-col gap-px overflow-y-auto bg-sigil-border\n                scrollbar-sigil\n              ",
-            children: [
-              /* @__PURE__ */ jsx36(
-                InputsSection,
-                {
-                  setDialogMode,
-                  assignToOutput: assignToOutputCallback
-                }
-              ),
-              /* @__PURE__ */ jsx36(
-                GeneratorsSection,
-                {
-                  setDialogMode,
-                  assignToOutput: assignToOutputCallback
-                }
-              ),
-              /* @__PURE__ */ jsx36(
-                OutputsSection,
-                {
-                  setDialogMode,
-                  assignToOutput,
-                  setAssignToOutput
-                }
-              )
-            ]
-          }
-        ),
-        dialogMode?.section.type === "inputs" && /* @__PURE__ */ jsx36(
-          InputSettingsDialog,
-          {
-            close: closeDialog,
-            input: dialogMode.section.input,
-            target: dialogMode.target
-          }
-        ),
-        dialogMode?.section.type === "generators" && /* @__PURE__ */ jsx36(
-          GeneratorSettingsDialog,
-          {
-            close: closeDialog,
-            generator: dialogMode.section.generator,
-            target: dialogMode.target
-          }
-        ),
-        dialogMode?.section.type === "outputs" && /* @__PURE__ */ jsx36(
-          OutputSettingsDialog,
-          {
-            close: closeDialog,
-            output: dialogMode.section.output,
-            target: dialogMode.target
-          }
-        )
-      ] }),
-      isMainWindow && /* @__PURE__ */ jsxs16(
-        "div",
+          },
+          licenseMode: "license",
+          children: /* @__PURE__ */ jsxs21(Fragment14, { children: [
+            /* @__PURE__ */ jsx41(UpdateBanner, {}),
+            /* @__PURE__ */ jsxs21(
+              "div",
+              {
+                className: "\n                  flex h-0 grow flex-col gap-px overflow-y-auto bg-sigil-border\n                  scrollbar-sigil\n                ",
+                children: [
+                  /* @__PURE__ */ jsx41(
+                    InputsSection,
+                    {
+                      setDialogMode,
+                      assignToOutput: assignToOutputCallback
+                    }
+                  ),
+                  /* @__PURE__ */ jsx41(
+                    GeneratorsSection,
+                    {
+                      setDialogMode,
+                      assignToOutput: assignToOutputCallback
+                    }
+                  ),
+                  /* @__PURE__ */ jsx41(
+                    OutputsSection,
+                    {
+                      setDialogMode,
+                      assignToOutput,
+                      setAssignToOutput
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        }
+      ),
+      dialogMode?.section.type === "inputs" && /* @__PURE__ */ jsx41(
+        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__ */ jsx36(ExternalLink, { href: "https://arcanewizards.com", children: "Arcane Wizards" })
-          ]
+          close: closeDialog,
+          input: dialogMode.section.input,
+          target: dialogMode.target
+        }
+      ),
+      dialogMode?.section.type === "generators" && /* @__PURE__ */ jsx41(
+        GeneratorSettingsDialog,
+        {
+          close: closeDialog,
+          generator: dialogMode.section.generator,
+          target: dialogMode.target
+        }
+      ),
+      dialogMode?.section.type === "outputs" && /* @__PURE__ */ jsx41(
+        OutputSettingsDialog,
+        {
+          close: closeDialog,
+          output: dialogMode.section.output,
+          target: dialogMode.target
         }
       )
     ] }),
     [
-      connection,
-      reconnect,
       assignToOutput,
       assignToOutputCallback,
       closeDialog,
       dialogMode,
-      windowMode,
-      isMainWindow,
-      windowedTimecodeId
+      windowedTimecodeId,
+      info.license
     ]
   );
-  return /* @__PURE__ */ jsx36(ConfigContext.Provider, { value: configContext, children: /* @__PURE__ */ jsx36(NetworkContext.Provider, { value: networkContextValue, children: /* @__PURE__ */ jsx36(ApplicationStateContext.Provider, { value: info.state, children: /* @__PURE__ */ jsx36(ApplicationHandlersContext.Provider, { value: handlers, children: root }) }) }) });
+  return /* @__PURE__ */ jsx41(ConfigContext.Provider, { value: configContext, children: /* @__PURE__ */ jsx41(NetworkContext.Provider, { value: networkContextValue, children: /* @__PURE__ */ jsx41(ApplicationStateContext.Provider, { value: info.state, children: /* @__PURE__ */ jsx41(ApplicationHandlersContext.Provider, { value: handlers, children: root }) }) }) });
 };
 
 // src/components/frontend/index.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var timecodeToolboxFrontendComponents = () => ({
   namespace: NAMESPACE,
   render: (info) => {
@@ -18381,7 +18972,9 @@ var timecodeToolboxFrontendComponents = () => ({
     }
     switch (info.component) {
       case "toolbox-root":
-        return /* @__PURE__ */ jsx37(ToolboxRoot, { info });
+        return /* @__PURE__ */ jsx45(ToolboxRoot, { info });
+      case "license-gate":
+        return /* @__PURE__ */ jsx45(LicenseGate, { info });
     }
   }
 });
@@ -18389,7 +18982,7 @@ var startTimecodeToolboxServerFrontend = (browser) => {
   startSigilFrontend({
     browser,
     appRenderers: [timecodeToolboxFrontendComponents()],
-    loadingState: () => /* @__PURE__ */ jsx37("div", { style: { width: "100%", textAlign: "center", padding: "2rem" }, children: "Loading Toolbox..." })
+    loadingState: () => /* @__PURE__ */ jsx45("div", { style: { width: "100%", textAlign: "center", padding: "2rem" }, children: "Loading Toolbox..." })
   });
 };
 window.startTimecodeToolboxServerFrontend = startTimecodeToolboxServerFrontend;