@arcanewizards/timecode-toolbox 0.1.1 → 0.1.3

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-HF7IIHPE.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-HF7IIHPE.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) => {
@@ -14097,7 +14085,7 @@ var clsControlButton = ({
   clsControlPosition(position),
   className
 );
-var ControlButtonFrame = (0, import_react13.forwardRef)(
+var ControlButtonFrame = (0, import_react12.forwardRef)(
   ({
     children,
     className,
@@ -14145,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)(
@@ -14161,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,
@@ -14180,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,
@@ -14197,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,
@@ -14232,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",
@@ -14252,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",
     {
@@ -14270,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,
@@ -14283,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,
@@ -14313,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) {
@@ -14331,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);
@@ -14341,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);
@@ -14408,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
@@ -14563,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");
   },
@@ -14574,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",
     {
@@ -14592,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,
@@ -14608,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]);
@@ -14668,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");
@@ -14696,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 {
@@ -14768,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",
     {
@@ -14786,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");
   },
@@ -14795,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",
     {
@@ -14988,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",
@@ -15007,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;
@@ -15015,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);
@@ -15209,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",
@@ -15222,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);
@@ -15327,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",
@@ -15380,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;
     }
@@ -15412,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) {
@@ -15515,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");
@@ -15611,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.");
@@ -15624,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({
@@ -15650,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
@@ -15675,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);
@@ -15691,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);
@@ -15713,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]);
@@ -16011,7 +15999,7 @@ var STRINGS = {
 };
 
 // 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_runtime39 = require("react/jsx-runtime");
@@ -16050,31 +16038,31 @@ function displayMillis(totalMilliseconds) {
 }
 
 // src/components/frontend/toolbox/context.tsx
-var import_react30 = require("react");
-var ConfigContext = (0, import_react30.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_react30.createContext)(
+var ApplicationStateContext = (0, import_react29.createContext)(
   new Proxy({}, {
     get() {
       throw new Error("ApplicationStateContext not initialized");
     }
   })
 );
-var useApplicationState = () => (0, import_react30.useContext)(ApplicationStateContext);
-var ApplicationHandlersContext = (0, import_react30.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_react30.useContext)(ApplicationHandlersContext);
-var NetworkContext = (0, import_react30.createContext)(
+var useApplicationHandlers = () => (0, import_react29.useContext)(ApplicationHandlersContext);
+var NetworkContext = (0, import_react29.createContext)(
   new Proxy({}, {
     get() {
       throw new Error("NetworkContext not initialized");
@@ -16083,19 +16071,19 @@ var NetworkContext = (0, import_react30.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_react31 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var SizeAwareDiv = ({
   children,
   style,
   ...rest
 }) => {
-  const [div, setDiv] = (0, import_react31.useState)(null);
-  const [rect, setRect] = (0, import_react31.useState)(null);
-  (0, import_react31.useEffect)(() => {
+  const [div, setDiv] = (0, import_react30.useState)(null);
+  const [rect, setRect] = (0, import_react30.useState)(null);
+  (0, import_react30.useEffect)(() => {
     if (!div) {
       return;
     }
@@ -16236,9 +16224,9 @@ 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;
@@ -16255,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;
@@ -16297,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();
@@ -16482,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,
@@ -16570,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 {
@@ -16586,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) {
@@ -16760,14 +16748,14 @@ 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") {
@@ -16909,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: {
@@ -16923,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);
@@ -16945,7 +16933,7 @@ var OutputSettingsDialog = ({
     },
     [target, updateConfig]
   );
-  const updateDefinition = (0, import_react33.useCallback)(
+  const updateDefinition = (0, import_react32.useCallback)(
     (change) => {
       updateSettings((current) => ({
         ...current,
@@ -16954,7 +16942,7 @@ var OutputSettingsDialog = ({
     },
     [updateSettings]
   );
-  const addOutput = (0, import_react33.useCallback)(() => {
+  const addOutput = (0, import_react32.useCallback)(() => {
     updateConfig((current) => {
       return {
         ...current,
@@ -16968,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 {
@@ -17069,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) {
@@ -17089,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) {
@@ -17189,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,
     {
@@ -17229,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;
   }
@@ -17270,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);
@@ -17300,7 +17288,7 @@ var GeneratorSettingsDialog = ({
     },
     [target, updateConfig]
   );
-  const updateDefinition = (0, import_react34.useCallback)(
+  const updateDefinition = (0, import_react33.useCallback)(
     (change) => {
       updateSettings((current) => ({
         ...current,
@@ -17309,7 +17297,7 @@ var GeneratorSettingsDialog = ({
     },
     [updateSettings]
   );
-  const addGenerator = (0, import_react34.useCallback)(() => {
+  const addGenerator = (0, import_react33.useCallback)(() => {
     updateConfig((current) => {
       return {
         ...current,
@@ -17323,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 {
@@ -17434,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,
     {
@@ -17473,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") {
@@ -17553,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") {
@@ -17604,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" ? {
@@ -17617,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);
@@ -17639,7 +17627,7 @@ var InputSettingsDialog = ({
     },
     [target, updateConfig]
   );
-  const updateDefinition = (0, import_react35.useCallback)(
+  const updateDefinition = (0, import_react34.useCallback)(
     (change) => {
       updateSettings((current) => ({
         ...current,
@@ -17648,7 +17636,7 @@ var InputSettingsDialog = ({
     },
     [updateSettings]
   );
-  const addInput = (0, import_react35.useCallback)(() => {
+  const addInput = (0, import_react34.useCallback)(() => {
     updateConfig((current) => {
       return {
         ...current,
@@ -17662,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 {
@@ -17767,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) {
@@ -17829,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,
     {
@@ -17946,26 +17934,26 @@ var diffJson = (a, b) => {
 };
 
 // src/components/frontend/toolbox/settings.tsx
-var import_react38 = require("react");
+var import_react37 = require("react");
 
 // ../../packages/sigil/dist/frontend/appearance.js
-var import_react36 = require("react");
+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);
@@ -18025,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 {
@@ -18048,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;
@@ -18101,7 +18089,7 @@ var DATE_FORMATTER = new Intl.DateTimeFormat(void 0, {
 });
 var Settings = ({ setWindowMode }) => {
   const { preferences, updateBrowserPrefs } = useBrowserPreferences();
-  const { config, updateConfig } = (0, import_react38.useContext)(ConfigContext);
+  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: [
@@ -18519,6 +18507,18 @@ var Footer = ({ openLicenseDetails }) => {
   );
 };
 
+// ../../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 = ({