@arcanewizards/timecode-toolbox 0.1.0 → 0.1.2

package/dist/components/frontend/index.js

@@ -9873,9 +9873,6 @@ var useLongPressable2 = ({
   );
 };
 
-// ../../packages/sigil/dist/chunk-H4U4Z4GM.js
-var import_react11 = require("react");
-
 // ../../node_modules/.pnpm/zod@3.25.76/node_modules/zod/v3/external.js
 var external_exports = {};
 __export(external_exports, {
@@ -13920,7 +13917,7 @@ var NEVER = INVALID;
 // ../../node_modules/.pnpm/zod@3.25.76/node_modules/zod/index.js
 var zod_default = external_exports;
 
-// ../../packages/sigil/dist/chunk-H4U4Z4GM.js
+// ../../packages/sigil/dist/chunk-WYUGJOEB.js
 var SIGIL_COLOR = external_exports.enum([
   "purple",
   "blue",
@@ -13961,22 +13958,13 @@ var cssSigilColorUsageVariables = (prefix, usage) => cssVariables({
   [`--${prefix}-gradient-dark`]: usage.gradientDark
 });
 var cssHintColorVariables = (color) => cssSigilColorUsageVariables(`sigil-usage-hint`, sigilColorUsage(color));
-var useRootHintVariables = (color) => {
-  (0, import_react11.useEffect)(() => {
-    const root = document.querySelector(".arcane-theme-root");
-    if (!root) return;
-    Object.entries(cssHintColorVariables(color)).forEach(([key, value]) => {
-      root.style.setProperty(key, value);
-    });
-  }, [color]);
-};
 var cssVariables = (variables) => variables;
 function cnd(condition, truthyClassName, falseyClassName) {
   return condition ? truthyClassName : falseyClassName;
 }
 
-// ../../packages/sigil/dist/chunk-XAK7WC3D.js
-var import_react12 = require("react");
+// ../../packages/sigil/dist/chunk-E3VUC3Q4.js
+var import_react11 = require("react");
 
 // ../../node_modules/.pnpm/@arcanejs+toolkit-frontend@0.11.0/node_modules/@arcanejs/toolkit-frontend/dist/chunk-DK4BAXVE.mjs
 var import_jsx_runtime17 = require("react/jsx-runtime");
@@ -14014,16 +14002,16 @@ var TRANSPARENCY_SVG = `
 `;
 var TRANSPARENCY_SVG_URI = `data:image/svg+xml,${encodeURIComponent(TRANSPARENCY_SVG)}`;
 
-// ../../packages/sigil/dist/chunk-XAK7WC3D.js
-var import_react13 = require("react");
+// ../../packages/sigil/dist/chunk-E3VUC3Q4.js
+var import_react12 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var import_react14 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var import_react15 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var import_react16 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var import_react17 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var clsControlPosition = (position) => {
@@ -14080,7 +14068,8 @@ var clsControlButton = ({
   active,
   touching,
   position,
-  className
+  className,
+  primary
 }) => cn(
   `sigil-control-button`,
   cnd(variant === "border", `sigil-control-button-variant-border`),
@@ -14092,10 +14081,11 @@ 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
 );
-var ControlButtonFrame = (0, import_react13.forwardRef)(
+var ControlButtonFrame = (0, import_react12.forwardRef)(
   ({
     children,
     className,
@@ -14108,6 +14098,7 @@ var ControlButtonFrame = (0, import_react13.forwardRef)(
     title,
     tooltipSide,
     position,
+    primary,
     ...props
   }, ref) => {
     const btn = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -14122,6 +14113,7 @@ var ControlButtonFrame = (0, import_react13.forwardRef)(
           active,
           touching,
           position,
+          primary,
           className
         }),
         children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { children: [
@@ -14141,7 +14133,7 @@ var ControlButtonFrame = (0, import_react13.forwardRef)(
   }
 );
 ControlButtonFrame.displayName = "ControlButtonFrame";
-var ControlButton = (0, import_react13.forwardRef)(
+var ControlButton = (0, import_react12.forwardRef)(
   ({ onClick, disabled, ...props }, ref) => {
     const { handlers, touching } = usePressable2(onClick);
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -14157,12 +14149,12 @@ var ControlButton = (0, import_react13.forwardRef)(
   }
 );
 ControlButton.displayName = "ControlButton";
-var CheckboxControlButton = (0, import_react13.forwardRef)(({ active, label, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ControlButton, { ...props, ref, active, children: [
+var CheckboxControlButton = (0, import_react12.forwardRef)(({ active, label, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ControlButton, { ...props, ref, active, children: [
   /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon2, { icon: active ? "check_box" : "check_box_outline_blank" }),
   label
 ] }));
 CheckboxControlButton.displayName = "CheckboxControlButton";
-var LongPressableControlButton = (0, import_react13.forwardRef)(({ active, disabled, onPress, onRelease, ...props }, ref) => {
+var LongPressableControlButton = (0, import_react12.forwardRef)(({ active, disabled, onPress, onRelease, ...props }, ref) => {
   const { handlers, touching } = useLongPressable2({ onPress, onRelease });
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     ControlButtonFrame,
@@ -14176,7 +14168,7 @@ var LongPressableControlButton = (0, import_react13.forwardRef)(({ active, disab
   );
 });
 LongPressableControlButton.displayName = "LongPressableControlButton";
-var ControlButtonGroup = (0, import_react13.forwardRef)(({ children, className, position, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var ControlButtonGroup = (0, import_react12.forwardRef)(({ children, className, position, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   "div",
   {
     ...props,
@@ -14193,7 +14185,7 @@ var ControlButtonGroup = (0, import_react13.forwardRef)(({ children, className,
   }
 ));
 ControlButtonGroup.displayName = "ControlButtonGroup";
-var ControlParagraph = (0, import_react14.forwardRef)(({ className, mode, position = "all", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var ControlParagraph = (0, import_react13.forwardRef)(({ className, mode, position = "all", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   "p",
   {
     ...props,
@@ -14228,7 +14220,7 @@ var ControlParagraph = (0, import_react14.forwardRef)(({ className, mode, positi
   }
 ));
 ControlParagraph.displayName = "ControlParagraph";
-var ControlLabel = (0, import_react14.forwardRef)(
+var ControlLabel = (0, import_react13.forwardRef)(
   ({ className, disabled, nonMicro, position = "label", subgrid, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
@@ -14248,7 +14240,7 @@ var ControlLabel = (0, import_react14.forwardRef)(
   }
 );
 ControlLabel.displayName = "ControlLabel";
-var ControlDetails = (0, import_react14.forwardRef)(
+var ControlDetails = (0, import_react13.forwardRef)(
   ({ align, className, position = "all", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
@@ -14266,7 +14258,7 @@ var ControlDetails = (0, import_react14.forwardRef)(
   )
 );
 ControlDetails.displayName = "ControlDetails";
-var InputSpanningTitle = (0, import_react14.forwardRef)(({ className, position = "row", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var InputSpanningTitle = (0, import_react13.forwardRef)(({ className, position = "row", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   "div",
   {
     ...props,
@@ -14279,7 +14271,7 @@ var InputSpanningTitle = (0, import_react14.forwardRef)(({ className, position =
   }
 ));
 InputSpanningTitle.displayName = "InputSpanningTitle";
-var ControlDialogButtons = (0, import_react15.forwardRef)(({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+var ControlDialogButtons = (0, import_react14.forwardRef)(({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   ControlButtonGroup,
   {
     ref,
@@ -14309,15 +14301,15 @@ var InputWithDelayedPropagation = ({
   inputRef: inputRefProp,
   ...props
 }) => {
-  const lastValue = (0, import_react16.useRef)(value);
-  const inputRef = (0, import_react16.useRef)(null);
-  (0, import_react16.useEffect)(() => {
+  const lastValue = (0, import_react15.useRef)(value);
+  const inputRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(() => {
     if (inputRef.current && inputRef.current.value !== value) {
       inputRef.current.value = value;
     }
     lastValue.current = value;
   }, [value]);
-  const updateRef = (0, import_react16.useCallback)(
+  const updateRef = (0, import_react15.useCallback)(
     (instance) => {
       inputRef.current = instance;
       if (inputRefProp) {
@@ -14327,7 +14319,7 @@ var InputWithDelayedPropagation = ({
     [inputRefProp]
   );
   const onBlurProp = props.onBlur;
-  const onBlur = (0, import_react16.useCallback)(
+  const onBlur = (0, import_react15.useCallback)(
     (e) => {
       if (e.currentTarget.value !== lastValue.current) {
         onChange(e.currentTarget.value, false);
@@ -14337,7 +14329,7 @@ var InputWithDelayedPropagation = ({
     [onChange, onBlurProp]
   );
   const onKeyUpProp = props.onKeyUp;
-  const onKeyUp = (0, import_react16.useCallback)(
+  const onKeyUp = (0, import_react15.useCallback)(
     (e) => {
       if ((e.key === "Enter" || e.key.startsWith("Arrow")) && e.currentTarget.value !== lastValue.current) {
         onChange(e.currentTarget.value, true);
@@ -14404,7 +14396,7 @@ var ControlSelect = ({
   triggerClassName: className
 }) => {
   const selectedOption = options.find((option2) => option2.value === value);
-  const onValueChange = (0, import_react17.useCallback)(
+  const onValueChange = (0, import_react16.useCallback)(
     (val) => {
       const matchingOption = options.find(
         (option2) => (option2.value ?? NULL_VALUE) === val
@@ -14559,7 +14551,7 @@ var ControlColorSelect = ({
   );
 };
 var isDarkDialog = (variant) => variant === "dark" || variant === "dark-compact";
-var DialogContext = (0, import_react12.createContext)({
+var DialogContext = (0, import_react11.createContext)({
   createDialog: () => {
     throw new Error("DialogContext not provided");
   },
@@ -14570,7 +14562,7 @@ var DialogContext = (0, import_react12.createContext)({
     throw new Error("DialogContext not provided");
   }
 });
-var DialogTitle = (0, import_react12.forwardRef)(
+var DialogTitle = (0, import_react11.forwardRef)(
   ({ className, variant = "light", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
@@ -14588,7 +14580,7 @@ var DialogTitle = (0, import_react12.forwardRef)(
   )
 );
 DialogTitle.displayName = "DialogTitle";
-var DialogButtons = (0, import_react12.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+var DialogButtons = (0, import_react11.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
   "div",
   {
     ...props,
@@ -14604,8 +14596,8 @@ var Dialog = ({
   title,
   variant = "light"
 }) => {
-  const [dialogRef, setDialogRef] = (0, import_react12.useState)(null);
-  (0, import_react12.useEffect)(() => {
+  const [dialogRef, setDialogRef] = (0, import_react11.useState)(null);
+  (0, import_react11.useEffect)(() => {
     if (!dialogRef) return;
     dialogRef.showModal();
   }, [dialogRef]);
@@ -14664,27 +14656,27 @@ var Dialog = ({
 var isCoreComponent = (component) => component.namespace === "core";
 
 // ../../node_modules/.pnpm/@arcanejs+toolkit-frontend@0.11.0/node_modules/@arcanejs/toolkit-frontend/dist/components/index.mjs
-var import_react18 = __toESM(require("react"), 1);
-var import_react19 = require("react");
+var import_react17 = __toESM(require("react"), 1);
+var import_react18 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react19 = __toESM(require("react"), 1);
 var import_react20 = __toESM(require("react"), 1);
-var import_react21 = __toESM(require("react"), 1);
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var import_react22 = __toESM(require("react"), 1);
+var import_react21 = __toESM(require("react"), 1);
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var import_react23 = __toESM(require("react"), 1);
+var import_react22 = __toESM(require("react"), 1);
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var import_react24 = __toESM(require("react"), 1);
+var import_react23 = __toESM(require("react"), 1);
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var import_react25 = __toESM(require("react"), 1);
+var import_react24 = __toESM(require("react"), 1);
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var import_react26 = __toESM(require("react"), 1);
+var import_react25 = __toESM(require("react"), 1);
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var StageContext = (0, import_react19.createContext)(
+var StageContext = (0, import_react18.createContext)(
   new Proxy({}, {
     get: () => {
       throw new Error("Missing StageContext.Provider");
@@ -14692,8 +14684,8 @@ var StageContext = (0, import_react19.createContext)(
   })
 );
 var Button = (props) => {
-  const { call } = import_react18.default.useContext(StageContext);
-  const [localState, setLocalState] = import_react18.default.useState(null);
+  const { call } = import_react17.default.useContext(StageContext);
+  const [localState, setLocalState] = import_react17.default.useState(null);
   const state = localState ?? props.info.state;
   const { touching, handlers } = usePressable(async () => {
     try {
@@ -14764,9 +14756,9 @@ function nextColor(currentColor) {
       return "dark";
   }
 }
-var LastNestedColor = import_react21.default.createContext("dark");
+var LastNestedColor = import_react20.default.createContext("dark");
 var NestedContent = ({ className, children }) => {
-  const color = import_react21.default.useContext(LastNestedColor);
+  const color = import_react20.default.useContext(LastNestedColor);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
@@ -14782,7 +14774,7 @@ var NestedContent = ({ className, children }) => {
   );
 };
 NestedContent.displayName = "NestedContent";
-var GroupStateContext = import_react20.default.createContext({
+var GroupStateContext = import_react19.default.createContext({
   isCollapsed: () => {
     throw new Error("missing GroupStateContext");
   },
@@ -14791,9 +14783,9 @@ var GroupStateContext = import_react20.default.createContext({
   }
 });
 var Group2 = ({ className, info }) => {
-  const groupState = (0, import_react20.useContext)(GroupStateContext);
-  const { renderComponent, sendMessage } = (0, import_react20.useContext)(StageContext);
-  const [editingTitle, setEditingTitle] = (0, import_react20.useState)(false);
+  const groupState = (0, import_react19.useContext)(GroupStateContext);
+  const { renderComponent, sendMessage } = (0, import_react19.useContext)(StageContext);
+  const [editingTitle, setEditingTitle] = (0, import_react19.useState)(false);
   const children = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
@@ -14984,16 +14976,16 @@ var getRelativeCursorPosition = (elem, pageX) => {
   return pageX - rect.left;
 };
 var SliderButton = ({ info, className }) => {
-  const { sendMessage } = import_react22.default.useContext(StageContext);
-  const [state, setState] = import_react22.default.useState({ state: "closed" });
-  const input = import_react22.default.useRef(null);
+  const { sendMessage } = import_react21.default.useContext(StageContext);
+  const [state, setState] = import_react21.default.useState({ state: "closed" });
+  const input = import_react21.default.useRef(null);
   const displayValue = (value2) => {
     if (info.max === 1 && info.min === 0) {
       return `${Math.round(value2 * 100)}%`;
     }
     return NUMBER_FORMATTER.format(value2);
   };
-  const sendValue = (0, import_react22.useCallback)(
+  const sendValue = (0, import_react21.useCallback)(
     (value2) => sendMessage?.({
       type: "component-message",
       namespace: "core",
@@ -15003,7 +14995,7 @@ var SliderButton = ({ info, className }) => {
     }),
     [sendMessage, info.key]
   );
-  const sanitizeValue = (0, import_react22.useCallback)(
+  const sanitizeValue = (0, import_react21.useCallback)(
     (value2) => {
       const i = Math.round((value2 - info.min) / info.step);
       const v = i * info.step + info.min;
@@ -15011,13 +15003,13 @@ var SliderButton = ({ info, className }) => {
     },
     [info.min, info.max, info.step]
   );
-  const getNewValue = (0, import_react22.useCallback)(
+  const getNewValue = (0, import_react21.useCallback)(
     (startValue, diff) => {
       return sanitizeValue((startValue || 0) + diff);
     },
     [sanitizeValue]
   );
-  const getCurrentInputValue = (0, import_react22.useCallback)(
+  const getCurrentInputValue = (0, import_react21.useCallback)(
     (e) => {
       const float = parseFloat(e.currentTarget.value);
       return sanitizeValue(isNaN(float) ? info.value || 0 : float);
@@ -15205,9 +15197,9 @@ var SliderButton = ({ info, className }) => {
   );
 };
 var Switch = ({ className, info }) => {
-  const { sendMessage } = import_react23.default.useContext(StageContext);
-  const [touching, setTouching] = (0, import_react23.useState)(false);
-  const onClick = (0, import_react23.useMemo)(
+  const { sendMessage } = import_react22.default.useContext(StageContext);
+  const [touching, setTouching] = (0, import_react22.useState)(false);
+  const onClick = (0, import_react22.useMemo)(
     () => () => {
       sendMessage?.({
         type: "component-message",
@@ -15218,14 +15210,14 @@ var Switch = ({ className, info }) => {
     },
     [sendMessage, info.key]
   );
-  const onTouchStart = (0, import_react23.useMemo)(
+  const onTouchStart = (0, import_react22.useMemo)(
     () => (event) => {
       event.preventDefault();
       setTouching(true);
     },
     []
   );
-  const onTouchEnd = (0, import_react23.useMemo)(
+  const onTouchEnd = (0, import_react22.useMemo)(
     () => (event) => {
       event.preventDefault();
       setTouching(false);
@@ -15323,9 +15315,9 @@ var Switch = ({ className, info }) => {
   );
 };
 var Tabs = (props) => {
-  const { renderComponent } = import_react24.default.useContext(StageContext);
-  const [touching, setTouching] = import_react24.default.useState(null);
-  const [currentTab, setCurrentTab] = import_react24.default.useState(0);
+  const { renderComponent } = import_react23.default.useContext(StageContext);
+  const [touching, setTouching] = import_react23.default.useState(null);
+  const [currentTab, setCurrentTab] = import_react23.default.useState(0);
   const tab = props.info.tabs[currentTab];
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
@@ -15376,9 +15368,9 @@ var Tabs = (props) => {
   );
 };
 var TextInput = ({ className, info }) => {
-  const { sendMessage } = import_react25.default.useContext(StageContext);
-  const ref = import_react25.default.useRef(null);
-  (0, import_react25.useEffect)(() => {
+  const { sendMessage } = import_react24.default.useContext(StageContext);
+  const ref = import_react24.default.useRef(null);
+  (0, import_react24.useEffect)(() => {
     if (ref.current && ref.current.value !== info.value) {
       ref.current.value = info.value;
     }
@@ -15408,13 +15400,13 @@ var TextInput = ({ className, info }) => {
 };
 var Timeline = (props) => {
   const { className, info } = props;
-  const { timeDifferenceMs } = (0, import_react26.useContext)(StageContext);
-  const frameState = import_react26.default.useRef({
+  const { timeDifferenceMs } = (0, import_react25.useContext)(StageContext);
+  const frameState = import_react25.default.useRef({
     animationFrame: -1,
     state: null
   });
-  const [currentTimeMillis, setCurrentTimeMillis] = (0, import_react26.useState)(0);
-  (0, import_react26.useEffect)(() => {
+  const [currentTimeMillis, setCurrentTimeMillis] = (0, import_react25.useState)(0);
+  (0, import_react25.useEffect)(() => {
     frameState.current.state = info.state;
     const recalculateCurrentTimeMillis = () => {
       if (frameState.current.state !== info.state) {
@@ -15511,11 +15503,11 @@ var CORE_FRONTEND_COMPONENT_RENDERER = {
 };
 
 // ../../packages/sigil/dist/frontend.js
+var import_react26 = require("react");
 var import_react27 = require("react");
-var import_react28 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var import_react29 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var import_frontend = require("@arcanejs/toolkit/frontend");
 var import_jsx_runtime38 = require("react/jsx-runtime");
@@ -15607,7 +15599,7 @@ var createDefaultBrowserContext = (browser) => {
     ...browser
   };
 };
-var BrowserContext = (0, import_react28.createContext)(
+var BrowserContext = (0, import_react27.createContext)(
   new Proxy({}, {
     get: () => {
       throw new Error("BrowserContext not provided.");
@@ -15620,16 +15612,16 @@ var BrowserContextProvider = ({
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(BrowserContext.Provider, { value: browser, children });
 };
-var useBrowserContext = () => (0, import_react28.useContext)(BrowserContext);
+var useBrowserContext = () => (0, import_react27.useContext)(BrowserContext);
 var AppRoot = ({
   info,
   browser
 }) => {
   const { child, lastLog } = info;
-  const { renderComponent, call } = (0, import_react27.useContext)(StageContext);
-  const [logs, setLogs] = (0, import_react27.useState)({ lastLog: -1, logs: [] });
-  const [debugMode, setDebugMode] = (0, import_react27.useState)(false);
-  (0, import_react27.useEffect)(() => {
+  const { renderComponent, call } = (0, import_react26.useContext)(StageContext);
+  const [logs, setLogs] = (0, import_react26.useState)({ lastLog: -1, logs: [] });
+  const [debugMode, setDebugMode] = (0, import_react26.useState)(false);
+  (0, import_react26.useEffect)(() => {
     if (!debugMode || !call) return;
     const lastLogId = logs.logs[logs.logs.length - 1]?.index ?? -1;
     call({
@@ -15646,7 +15638,7 @@ var AppRoot = ({
       });
     });
   }, [call, debugMode, info.key, lastLog, logs]);
-  const debuggerContext = (0, import_react27.useMemo)(
+  const debuggerContext = (0, import_react26.useMemo)(
     () => ({
       logs: logs.logs,
       setDebugMode
@@ -15671,12 +15663,12 @@ Caused by: ${unwrapErrorStack(error.cause)}`;
   return stack;
 };
 var Debugger = ({ title, className }) => {
-  const scrollRef = (0, import_react29.useRef)(null);
-  const shouldScrollToBottom = (0, import_react29.useRef)(true);
+  const scrollRef = (0, import_react28.useRef)(null);
+  const shouldScrollToBottom = (0, import_react28.useRef)(true);
   const { openDevTools } = useBrowserContext();
   const { setDebugMode, logs } = useDebuggerContext();
   const system = useSystemInformation();
-  (0, import_react29.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     setDebugMode(true);
     return () => {
       setDebugMode(false);
@@ -15687,19 +15679,19 @@ var Debugger = ({ title, className }) => {
     const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
     shouldScrollToBottom.current = scrollTop + clientHeight >= scrollHeight - 10;
   };
-  const scrollToBottomIfRequired = (0, import_react29.useCallback)(() => {
+  const scrollToBottomIfRequired = (0, import_react28.useCallback)(() => {
     if (shouldScrollToBottom.current && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
   }, []);
-  (0, import_react29.useEffect)(scrollToBottomIfRequired, [logs, scrollToBottomIfRequired]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react28.useEffect)(scrollToBottomIfRequired, [logs, scrollToBottomIfRequired]);
+  (0, import_react28.useEffect)(() => {
     window.addEventListener("resize", scrollToBottomIfRequired);
     return () => {
       window.removeEventListener("resize", scrollToBottomIfRequired);
     };
   }, [scrollToBottomIfRequired]);
-  const exportLogs = (0, import_react29.useCallback)(() => {
+  const exportLogs = (0, import_react28.useCallback)(() => {
     const logText = JSON.stringify({ system, logs }, null, 2);
     const blob = new Blob([logText], { type: "application/json" });
     const url = URL.createObjectURL(blob);
@@ -15709,7 +15701,7 @@ var Debugger = ({ title, className }) => {
     link.click();
     URL.revokeObjectURL(url);
   }, [system, logs]);
-  const handleRequestScrollToBottom = (0, import_react29.useCallback)(() => {
+  const handleRequestScrollToBottom = (0, import_react28.useCallback)(() => {
     shouldScrollToBottom.current = true;
     scrollToBottomIfRequired();
   }, [scrollToBottomIfRequired]);
@@ -15890,7 +15882,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 +15895,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 +15912,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 +15921,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,30 +15984,41 @@ 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"
   }
 };
 
 // src/components/frontend/toolbox/outputs.tsx
-var import_react33 = require("react");
+var import_react32 = 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 +16038,31 @@ function displayMillis(totalMilliseconds) {
 }
 
 // src/components/frontend/toolbox/context.tsx
-var import_react31 = require("react");
-var ConfigContext = (0, import_react31.createContext)(
+var import_react29 = require("react");
+var ConfigContext = (0, import_react29.createContext)(
   new Proxy({}, {
     get() {
       throw new Error("ConfigContext not initialized");
     }
   })
 );
-var ApplicationStateContext = (0, import_react31.createContext)(
+var ApplicationStateContext = (0, import_react29.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_react29.useContext)(ApplicationStateContext);
+var ApplicationHandlersContext = (0, import_react29.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_react29.useContext)(ApplicationHandlersContext);
+var NetworkContext = (0, import_react29.createContext)(
   new Proxy({}, {
     get() {
       throw new Error("NetworkContext not initialized");
@@ -16134,7 +16071,48 @@ var NetworkContext = (0, import_react31.createContext)(
 );
 
 // src/components/frontend/toolbox/core/timecode-display.tsx
-var import_react32 = require("react");
+var import_react31 = require("react");
+
+// src/components/frontend/toolbox/core/size-aware-div.tsx
+var import_react30 = require("react");
+var import_jsx_runtime40 = 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_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;
@@ -16241,14 +16219,14 @@ 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
 }) => {
-  const [millis, setMillis] = (0, import_react32.useState)(0);
-  const { timeDifferenceMs } = (0, import_react32.useContext)(StageContext);
-  (0, import_react32.useEffect)(() => {
+  const [millis, setMillis] = (0, import_react31.useState)(0);
+  const { timeDifferenceMs } = (0, import_react31.useContext)(StageContext);
+  (0, import_react31.useEffect)(() => {
     let animationFrame = null;
     const updateMillis = () => {
       const newMillis = (Date.now() - (timeDifferenceMs ?? 0) - effectiveStartTimeMillis) * speed;
@@ -16265,9 +16243,9 @@ var ActiveTimecodeText = ({
   return displayMillis(millis);
 };
 var Timeline2 = ({ state, totalTime }) => {
-  const [millis, setMillis] = (0, import_react32.useState)(0);
-  const { timeDifferenceMs } = (0, import_react32.useContext)(StageContext);
-  (0, import_react32.useEffect)(() => {
+  const [millis, setMillis] = (0, import_react31.useState)(0);
+  const { timeDifferenceMs } = (0, import_react31.useContext)(StageContext);
+  (0, import_react31.useEffect)(() => {
     if (state.state === "none") {
       setMillis(0);
       return;
@@ -16289,7 +16267,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",
@@ -16307,32 +16285,32 @@ var TimecodeDisplay = ({
 }) => {
   const { handlers, callHandler } = useApplicationHandlers();
   const hooks = id && getTreeValue(handlers, id);
-  const play = (0, import_react32.useCallback)(() => {
+  const play = (0, import_react31.useCallback)(() => {
     if (id) {
       callHandler({ handler: "play", path: id, args: [] });
     }
   }, [callHandler, id]);
-  const pause = (0, import_react32.useCallback)(() => {
+  const pause = (0, import_react31.useCallback)(() => {
     if (id) {
       callHandler({ handler: "pause", path: id, args: [] });
     }
   }, [callHandler, id]);
-  const back5seconds = (0, import_react32.useCallback)(() => {
+  const back5seconds = (0, import_react31.useCallback)(() => {
     if (id) {
       callHandler({ handler: "seekRelative", path: id, args: [-5e3] });
     }
   }, [callHandler, id]);
-  const forward5seconds = (0, import_react32.useCallback)(() => {
+  const forward5seconds = (0, import_react31.useCallback)(() => {
     if (id) {
       callHandler({ handler: "seekRelative", path: id, args: [5e3] });
     }
   }, [callHandler, id]);
-  const beginning = (0, import_react32.useCallback)(() => {
+  const beginning = (0, import_react31.useCallback)(() => {
     if (id) {
       callHandler({ handler: "beginning", path: id, args: [] });
     }
   }, [callHandler, id]);
-  const toggle = (0, import_react32.useCallback)(() => {
+  const toggle = (0, import_react31.useCallback)(() => {
     if (hooks?.play && hooks?.pause) {
       if (state.state === "none" || state.state === "stopped") {
         play();
@@ -16341,8 +16319,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 +16332,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 +16348,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 +16357,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 +16369,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 +16380,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 +16390,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 +16401,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 +16413,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
@@ -16492,7 +16470,7 @@ var TimecodeTreeDisplay = ({
   assignToOutput
 }) => {
   const { openNewWidow } = useBrowserContext();
-  const openInNewWindow = (0, import_react32.useCallback)(() => {
+  const openInNewWindow = (0, import_react31.useCallback)(() => {
     if (id) {
       openNewWidow(withUrlFragment({ values: { tc: id } }).href, {
         canUseExisting: false,
@@ -16502,7 +16480,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 +16496,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 +16528,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 +16543,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" })
           }
         )
       ]
@@ -16580,9 +16558,9 @@ var TimecodeTreeDisplay = ({
 var FullscreenTimecodeDisplay = ({
   id
 }) => {
-  const { config } = (0, import_react32.useContext)(ConfigContext);
-  const applicationState = (0, import_react32.useContext)(ApplicationStateContext);
-  const timecode = (0, import_react32.useMemo)(() => {
+  const { config } = (0, import_react31.useContext)(ConfigContext);
+  const applicationState = (0, import_react31.useContext)(ApplicationStateContext);
+  const timecode = (0, import_react31.useMemo)(() => {
     if (isInputInstanceId(id) || isGeneratorInstanceId(id)) {
       return getTimecodeInstance(applicationState, id);
     } else {
@@ -16596,7 +16574,7 @@ var FullscreenTimecodeDisplay = ({
       );
     }
   }, [applicationState, id, config.outputs]);
-  const instanceConfig = (0, import_react32.useMemo)(() => {
+  const instanceConfig = (0, import_react31.useMemo)(() => {
     if (isInputInstanceId(id)) {
       const c = config.inputs[id[1]];
       if (!c) {
@@ -16636,22 +16614,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,20 +16694,68 @@ 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 = ({
   data,
   updateSettings
 }) => {
-  const { commitChanges } = (0, import_react33.useContext)(ChangeCommitContext);
-  const { getNetworkInterfaces } = (0, import_react33.useContext)(NetworkContext);
-  const [interfaces, setInterfaces] = (0, import_react33.useState)(null);
-  const refreshInterfaces = (0, import_react33.useCallback)(() => {
+  const { commitChanges } = (0, import_react32.useContext)(ChangeCommitContext);
+  const { getNetworkInterfaces } = (0, import_react32.useContext)(NetworkContext);
+  const [interfaces, setInterfaces] = (0, import_react32.useState)(null);
+  const refreshInterfaces = (0, import_react32.useCallback)(() => {
     setInterfaces(null);
     getNetworkInterfaces().then((ifs) => setInterfaces(ifs));
   }, [getNetworkInterfaces]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     refreshInterfaces();
   }, [refreshInterfaces]);
   if (data.type !== "artnet") {
@@ -16871,8 +16897,8 @@ var OutputSettingsDialog = ({
   output,
   close
 }) => {
-  const { config, updateConfig } = (0, import_react33.useContext)(ConfigContext);
-  const [newData, setNewData] = (0, import_react33.useState)({
+  const { config, updateConfig } = (0, import_react32.useContext)(ConfigContext);
+  const [newData, setNewData] = (0, import_react32.useState)({
     name: "",
     enabled: true,
     definition: {
@@ -16885,7 +16911,7 @@ var OutputSettingsDialog = ({
     },
     link: null
   });
-  const updateSettings = (0, import_react33.useCallback)(
+  const updateSettings = (0, import_react32.useCallback)(
     (change) => {
       if (target.type === "add") {
         setNewData(change);
@@ -16907,7 +16933,7 @@ var OutputSettingsDialog = ({
     },
     [target, updateConfig]
   );
-  const updateDefinition = (0, import_react33.useCallback)(
+  const updateDefinition = (0, import_react32.useCallback)(
     (change) => {
       updateSettings((current) => ({
         ...current,
@@ -16916,7 +16942,7 @@ var OutputSettingsDialog = ({
     },
     [updateSettings]
   );
-  const addOutput = (0, import_react33.useCallback)(() => {
+  const addOutput = (0, import_react32.useCallback)(() => {
     updateConfig((current) => {
       return {
         ...current,
@@ -16930,7 +16956,7 @@ var OutputSettingsDialog = ({
   }, [newData, close, updateConfig]);
   const resolvedTarget = target.type === "add" ? "add" : config.outputs?.[target.uuid];
   const data = resolvedTarget === "add" ? newData : resolvedTarget;
-  const commitChanges = (0, import_react33.useCallback)(() => {
+  const commitChanges = (0, import_react32.useCallback)(() => {
     if (target.type === "add") {
       addOutput();
     } else {
@@ -17031,8 +17057,8 @@ var OutputDisplay = ({
   setAssignToOutput
 }) => {
   const applicationState = useApplicationState();
-  const { updateConfig } = (0, import_react33.useContext)(ConfigContext);
-  const clearLink = (0, import_react33.useCallback)(() => {
+  const { updateConfig } = (0, import_react32.useContext)(ConfigContext);
+  const clearLink = (0, import_react32.useCallback)(() => {
     updateConfig((current) => {
       const currentOutput = current.outputs?.[uuid];
       if (!currentOutput) {
@@ -17051,15 +17077,15 @@ var OutputDisplay = ({
     });
     setAssignToOutput(null);
   }, [updateConfig, uuid, setAssignToOutput]);
-  const linkCallback = (0, import_react33.useCallback)(
+  const linkCallback = (0, import_react32.useCallback)(
     () => setAssignToOutput((current) => current === uuid ? null : uuid),
     [uuid, setAssignToOutput]
   );
-  const timecode = (0, import_react33.useMemo)(() => {
+  const timecode = (0, import_react32.useMemo)(() => {
     const tc = config.link && getTimecodeInstance(applicationState, config.link);
     return augmentUpstreamTimecodeWithOutputMetadata(tc, config);
   }, [applicationState, config]);
-  const toggleEnabled = (0, import_react33.useCallback)(() => {
+  const toggleEnabled = (0, import_react32.useCallback)(() => {
     updateConfig((current) => {
       const existing = current.outputs?.[uuid];
       if (!existing) {
@@ -17151,7 +17177,7 @@ var OutputsSection = ({
   assignToOutput,
   setAssignToOutput
 }) => {
-  const { config } = (0, import_react33.useContext)(ConfigContext);
+  const { config } = (0, import_react32.useContext)(ConfigContext);
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     PrimaryToolboxSection,
     {
@@ -17191,13 +17217,13 @@ var OutputsSection = ({
 };
 
 // src/components/frontend/toolbox/generators.tsx
-var import_react34 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var ClockSpecificSettings = ({
   data,
   updateSettings
 }) => {
-  const { commitChanges } = (0, import_react34.useContext)(ChangeCommitContext);
+  const { commitChanges } = (0, import_react33.useContext)(ChangeCommitContext);
   if (data.type !== "clock") {
     return null;
   }
@@ -17232,15 +17258,15 @@ var GeneratorSettingsDialog = ({
   generator,
   close
 }) => {
-  const { config, updateConfig } = (0, import_react34.useContext)(ConfigContext);
-  const [newData, setNewData] = (0, import_react34.useState)({
+  const { config, updateConfig } = (0, import_react33.useContext)(ConfigContext);
+  const [newData, setNewData] = (0, import_react33.useState)({
     name: "",
     definition: {
       type: generator,
       speed: 1
     }
   });
-  const updateSettings = (0, import_react34.useCallback)(
+  const updateSettings = (0, import_react33.useCallback)(
     (change) => {
       if (target.type === "add") {
         setNewData(change);
@@ -17262,7 +17288,7 @@ var GeneratorSettingsDialog = ({
     },
     [target, updateConfig]
   );
-  const updateDefinition = (0, import_react34.useCallback)(
+  const updateDefinition = (0, import_react33.useCallback)(
     (change) => {
       updateSettings((current) => ({
         ...current,
@@ -17271,7 +17297,7 @@ var GeneratorSettingsDialog = ({
     },
     [updateSettings]
   );
-  const addGenerator = (0, import_react34.useCallback)(() => {
+  const addGenerator = (0, import_react33.useCallback)(() => {
     updateConfig((current) => {
       return {
         ...current,
@@ -17285,7 +17311,7 @@ var GeneratorSettingsDialog = ({
   }, [newData, close, updateConfig]);
   const resolvedTarget = target.type === "add" ? "add" : config.generators?.[target.uuid];
   const data = resolvedTarget === "add" ? newData : resolvedTarget;
-  const commitChanges = (0, import_react34.useCallback)(() => {
+  const commitChanges = (0, import_react33.useCallback)(() => {
     if (target.type === "add") {
       addGenerator();
     } else {
@@ -17396,7 +17422,7 @@ var GeneratorsSection = ({
   setDialogMode,
   assignToOutput
 }) => {
-  const { config } = (0, import_react34.useContext)(ConfigContext);
+  const { config } = (0, import_react33.useContext)(ConfigContext);
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     PrimaryToolboxSection,
     {
@@ -17435,20 +17461,20 @@ var GeneratorsSection = ({
 };
 
 // src/components/frontend/toolbox/inputs.tsx
-var import_react35 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var DmxConnectionSettings2 = ({
   data,
   updateSettings
 }) => {
-  const { commitChanges } = (0, import_react35.useContext)(ChangeCommitContext);
-  const { getNetworkInterfaces } = (0, import_react35.useContext)(NetworkContext);
-  const [interfaces, setInterfaces] = (0, import_react35.useState)(null);
-  const refreshInterfaces = (0, import_react35.useCallback)(() => {
+  const { commitChanges } = (0, import_react34.useContext)(ChangeCommitContext);
+  const { getNetworkInterfaces } = (0, import_react34.useContext)(NetworkContext);
+  const [interfaces, setInterfaces] = (0, import_react34.useState)(null);
+  const refreshInterfaces = (0, import_react34.useCallback)(() => {
     setInterfaces(null);
     getNetworkInterfaces().then((ifs) => setInterfaces(ifs));
   }, [getNetworkInterfaces]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     refreshInterfaces();
   }, [refreshInterfaces]);
   if (data.type !== "artnet") {
@@ -17515,13 +17541,13 @@ var TCNetConnectionSettings = ({
   data,
   updateSettings
 }) => {
-  const { getNetworkInterfaces } = (0, import_react35.useContext)(NetworkContext);
-  const [interfaces, setInterfaces] = (0, import_react35.useState)(null);
-  const refreshInterfaces = (0, import_react35.useCallback)(() => {
+  const { getNetworkInterfaces } = (0, import_react34.useContext)(NetworkContext);
+  const [interfaces, setInterfaces] = (0, import_react34.useState)(null);
+  const refreshInterfaces = (0, import_react34.useCallback)(() => {
     setInterfaces(null);
     getNetworkInterfaces().then((ifs) => setInterfaces(ifs));
   }, [getNetworkInterfaces]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     refreshInterfaces();
   }, [refreshInterfaces]);
   if (data.type !== "tcnet") {
@@ -17566,8 +17592,8 @@ var InputSettingsDialog = ({
   input,
   close
 }) => {
-  const { config, updateConfig } = (0, import_react35.useContext)(ConfigContext);
-  const [newData, setNewData] = (0, import_react35.useState)({
+  const { config, updateConfig } = (0, import_react34.useContext)(ConfigContext);
+  const [newData, setNewData] = (0, import_react34.useState)({
     name: "",
     enabled: true,
     definition: input === "artnet" ? {
@@ -17579,7 +17605,7 @@ var InputSettingsDialog = ({
       iface: ""
     }
   });
-  const updateSettings = (0, import_react35.useCallback)(
+  const updateSettings = (0, import_react34.useCallback)(
     (change) => {
       if (target.type === "add") {
         setNewData(change);
@@ -17601,7 +17627,7 @@ var InputSettingsDialog = ({
     },
     [target, updateConfig]
   );
-  const updateDefinition = (0, import_react35.useCallback)(
+  const updateDefinition = (0, import_react34.useCallback)(
     (change) => {
       updateSettings((current) => ({
         ...current,
@@ -17610,7 +17636,7 @@ var InputSettingsDialog = ({
     },
     [updateSettings]
   );
-  const addInput = (0, import_react35.useCallback)(() => {
+  const addInput = (0, import_react34.useCallback)(() => {
     updateConfig((current) => {
       return {
         ...current,
@@ -17624,7 +17650,7 @@ var InputSettingsDialog = ({
   }, [newData, close, updateConfig]);
   const resolvedTarget = target.type === "add" ? "add" : config.inputs?.[target.uuid];
   const data = resolvedTarget === "add" ? newData : resolvedTarget;
-  const commitChanges = (0, import_react35.useCallback)(() => {
+  const commitChanges = (0, import_react34.useCallback)(() => {
     if (target.type === "add") {
       addInput();
     } else {
@@ -17729,10 +17755,10 @@ var InputDisplay = ({
   setDialogMode,
   assignToOutput
 }) => {
-  const { updateConfig } = (0, import_react35.useContext)(ConfigContext);
+  const { updateConfig } = (0, import_react34.useContext)(ConfigContext);
   const { inputs } = useApplicationState();
   const state = inputs[uuid];
-  const toggleEnabled = (0, import_react35.useCallback)(() => {
+  const toggleEnabled = (0, import_react34.useCallback)(() => {
     updateConfig((current) => {
       const existing = current.inputs?.[uuid];
       if (!existing) {
@@ -17791,7 +17817,7 @@ var InputsSection = ({
   setDialogMode,
   assignToOutput
 }) => {
-  const { config } = (0, import_react35.useContext)(ConfigContext);
+  const { config } = (0, import_react34.useContext)(ConfigContext);
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     PrimaryToolboxSection,
     {
@@ -17907,24 +17933,27 @@ var diffJson = (a, b) => {
   return { type: "value", after: b };
 };
 
-// ../../packages/sigil/dist/frontend/appearance.js
-var import_react36 = require("react");
+// src/components/frontend/toolbox/settings.tsx
+var import_react37 = require("react");
+
+// ../../packages/sigil/dist/frontend/appearance.js
+var import_react35 = require("react");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var AppearanceSwitcher = ({
   color,
   onColorChange
 }) => {
   const { colorSchemePreference, setColorSchemePreference } = useColorSchemePreferences();
-  const selectDarkMode = (0, import_react36.useCallback)(() => {
+  const selectDarkMode = (0, import_react35.useCallback)(() => {
     setColorSchemePreference("dark");
   }, [setColorSchemePreference]);
-  const selectLightMode = (0, import_react36.useCallback)(() => {
+  const selectLightMode = (0, import_react35.useCallback)(() => {
     setColorSchemePreference("light");
   }, [setColorSchemePreference]);
-  const selectSystemMode = (0, import_react36.useCallback)(() => {
+  const selectSystemMode = (0, import_react35.useCallback)(() => {
     setColorSchemePreference("auto");
   }, [setColorSchemePreference]);
-  const updateHintColor = (0, import_react36.useCallback)(
+  const updateHintColor = (0, import_react35.useCallback)(
     (color2) => {
       if (onColorChange) {
         onColorChange(color2);
@@ -17984,9 +18013,9 @@ var AppearanceSwitcher = ({
 };
 
 // ../../packages/sigil/dist/frontend/preferences.js
-var import_react37 = require("react");
+var import_react36 = require("react");
 var createBrowserPreferencesHook = (def) => () => {
-  const [preferences, setPreference] = (0, import_react37.useState)(() => {
+  const [preferences, setPreference] = (0, import_react36.useState)(() => {
     const stored = window.localStorage.getItem(def.key);
     if (stored) {
       try {
@@ -18007,7 +18036,7 @@ var createBrowserPreferencesHook = (def) => () => {
       })
     );
   };
-  (0, import_react37.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const onStorageChange = (event) => {
       if (event.key === def.key) {
         const newValue = event.newValue;
@@ -18051,8 +18080,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_react37.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 +18117,607 @@ 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);
+};
+
+// ../../packages/sigil/dist/frontend/styling.hooks.js
+var import_react38 = require("react");
+var useRootHintVariables = (color) => {
+  (0, import_react38.useEffect)(() => {
+    const root = document.querySelector(".arcane-theme-root");
+    if (!root) return;
+    Object.entries(cssHintColorVariables(color)).forEach(([key, value]) => {
+      root.style.setProperty(key, value);
+    });
+  }, [color]);
+};
+
+// 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;