@arcanejs/toolkit 1.1.1 → 3.0.0

package/dist/frontend/entrypoint.js

@@ -1085,7 +1085,7 @@
             }
             return dispatcher.useContext(Context);
           }
-          function useState5(initialState) {
+          function useState7(initialState) {
             var dispatcher = resolveDispatcher();
             return dispatcher.useState(initialState);
           }
@@ -1097,7 +1097,7 @@
             var dispatcher = resolveDispatcher();
             return dispatcher.useRef(initialValue);
           }
-          function useEffect4(create, deps) {
+          function useEffect5(create, deps) {
             var dispatcher = resolveDispatcher();
             return dispatcher.useEffect(create, deps);
           }
@@ -1880,7 +1880,7 @@
           exports.useContext = useContext2;
           exports.useDebugValue = useDebugValue;
           exports.useDeferredValue = useDeferredValue;
-          exports.useEffect = useEffect4;
+          exports.useEffect = useEffect5;
           exports.useId = useId;
           exports.useImperativeHandle = useImperativeHandle;
           exports.useInsertionEffect = useInsertionEffect;
@@ -1888,7 +1888,7 @@
           exports.useMemo = useMemo3;
           exports.useReducer = useReducer;
           exports.useRef = useRef2;
-          exports.useState = useState5;
+          exports.useState = useState7;
           exports.useSyncExternalStore = useSyncExternalStore;
           exports.useTransition = useTransition;
           exports.version = ReactVersion;
@@ -2832,10 +2832,10 @@
               return jsxWithValidation(type, props, key, false);
             }
           }
-          var jsx12 = jsxWithValidationDynamic;
+          var jsx13 = jsxWithValidationDynamic;
           var jsxs7 = jsxWithValidationStatic;
           exports.Fragment = REACT_FRAGMENT_TYPE;
-          exports.jsx = jsx12;
+          exports.jsx = jsx13;
           exports.jsxs = jsxs7;
         })();
       }
@@ -24524,8 +24524,14 @@
     }
   });
 
-  // ../toolkit-frontend/dist/chunk-35U577MM.mjs
+  // ../toolkit-frontend/dist/chunk-E7JSREGM.mjs
   var import_react = __toESM(require_react(), 1);
+  var import_react2 = __toESM(require_react(), 1);
+  var __defProp2 = Object.defineProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp2(target, name, { get: all[name], enumerable: true });
+  };
   function switchToMouseMode(ev) {
     if (ev.movementX === 0 && ev.movementY === 0) return;
     document.body.classList.remove("touch-mode");
@@ -24543,7 +24549,7 @@
     });
   }
   var usePressable = (click) => {
-    const [touching, setTouching] = (0, import_react.useState)(false);
+    const [touching, setTouching] = (0, import_react2.useState)(false);
     return {
       touching,
       handlers: {
@@ -24589,13 +24595,6 @@
   }
   var calculateClass = (...args) => args.filter((a2) => !!a2).join(" ");
 
-  // ../toolkit-frontend/dist/chunk-7P6ASYW6.mjs
-  var __defProp2 = Object.defineProperty;
-  var __export = (target, all) => {
-    for (var name in all)
-      __defProp2(target, name, { get: all[name], enumerable: true });
-  };
-
   // ../../node_modules/.pnpm/tslib@2.6.2/node_modules/tslib/tslib.es6.mjs
   var __assign = function() {
     __assign = Object.assign || function __assign2(t) {
@@ -24636,7 +24635,7 @@
   );
 
   // ../../node_modules/.pnpm/styled-components@6.1.13_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/styled-components/dist/styled-components.browser.esm.js
-  var import_react2 = __toESM(require_react());
+  var import_react3 = __toESM(require_react());
   var import_shallowequal = __toESM(require_shallowequal());
 
   // ../../node_modules/.pnpm/stylis@4.3.2/node_modules/stylis/src/Enum.js
@@ -25317,7 +25316,7 @@
         console.error = function(t2) {
           for (var n2 = [], o3 = 1; o3 < arguments.length; o3++) n2[o3 - 1] = arguments[o3];
           E.test(t2) ? (a2 = false, N.delete(s2)) : i2.apply(void 0, __spreadArray([t2], n2, false));
-        }, (0, import_react2.useRef)(), a2 && !N.has(s2) && (console.warn(s2), N.add(s2));
+        }, (0, import_react3.useRef)(), a2 && !N.has(s2) && (console.warn(s2), N.add(s2));
       } catch (e) {
         E.test(e.message) && N.delete(s2);
       } finally {
@@ -25655,26 +25654,26 @@
   }
   var Me = new ke();
   var ze = Fe();
-  var $e = import_react2.default.createContext({ shouldForwardProp: void 0, styleSheet: Me, stylis: ze });
+  var $e = import_react3.default.createContext({ shouldForwardProp: void 0, styleSheet: Me, stylis: ze });
   var Be = $e.Consumer;
-  var Le = import_react2.default.createContext(void 0);
+  var Le = import_react3.default.createContext(void 0);
   function Ge() {
-    return (0, import_react2.useContext)($e);
+    return (0, import_react3.useContext)($e);
   }
   function Ye(e) {
-    var t = (0, import_react2.useState)(e.stylisPlugins), n = t[0], r2 = t[1], c2 = Ge().styleSheet, l2 = (0, import_react2.useMemo)(function() {
+    var t = (0, import_react3.useState)(e.stylisPlugins), n = t[0], r2 = t[1], c2 = Ge().styleSheet, l2 = (0, import_react3.useMemo)(function() {
       var t2 = c2;
       return e.sheet ? t2 = e.sheet : e.target && (t2 = t2.reconstructWithOptions({ target: e.target }, false)), e.disableCSSOMInjection && (t2 = t2.reconstructWithOptions({ useCSSOMInjection: false })), t2;
-    }, [e.disableCSSOMInjection, e.sheet, e.target, c2]), u2 = (0, import_react2.useMemo)(function() {
+    }, [e.disableCSSOMInjection, e.sheet, e.target, c2]), u2 = (0, import_react3.useMemo)(function() {
       return Fe({ options: { namespace: e.namespace, prefix: e.enableVendorPrefixes }, plugins: n });
     }, [e.enableVendorPrefixes, e.namespace, n]);
-    (0, import_react2.useEffect)(function() {
+    (0, import_react3.useEffect)(function() {
       (0, import_shallowequal.default)(n, e.stylisPlugins) || r2(e.stylisPlugins);
     }, [e.stylisPlugins]);
-    var d = (0, import_react2.useMemo)(function() {
+    var d = (0, import_react3.useMemo)(function() {
       return { shouldForwardProp: e.shouldForwardProp, styleSheet: l2, stylis: u2 };
     }, [e.shouldForwardProp, l2, u2]);
-    return import_react2.default.createElement($e.Provider, { value: d }, import_react2.default.createElement(Le.Provider, { value: u2 }, e.children));
+    return import_react3.default.createElement($e.Provider, { value: d }, import_react3.default.createElement(Le.Provider, { value: u2 }, e.children));
   }
   var We = function() {
     function e(e2, t) {
@@ -25766,10 +25765,10 @@
       return o2;
     }, e;
   }();
-  var et = import_react2.default.createContext(void 0);
+  var et = import_react3.default.createContext(void 0);
   var tt = et.Consumer;
   function ot(e) {
-    var n = import_react2.default.useContext(et), r2 = (0, import_react2.useMemo)(function() {
+    var n = import_react3.default.useContext(et), r2 = (0, import_react3.useMemo)(function() {
       return function(e2, n2) {
         if (!e2) throw he(14);
         if (re(e2)) {
@@ -25781,7 +25780,7 @@
         return n2 ? __assign(__assign({}, n2), e2) : e2;
       }(e.theme, n);
     }, [e.theme, n]);
-    return e.children ? import_react2.default.createElement(et.Provider, { value: r2 }, e.children) : null;
+    return e.children ? import_react3.default.createElement(et.Provider, { value: r2 }, e.children) : null;
   }
   var rt = {};
   var st = /* @__PURE__ */ new Set();
@@ -25806,8 +25805,8 @@
     var N2 = new Qe(s2, g2, i2 ? a2.componentStyle : void 0);
     function O2(e2, r3) {
       return function(e3, r4, s3) {
-        var i3 = e3.attrs, a3 = e3.componentStyle, c3 = e3.defaultProps, p3 = e3.foldedComponentIds, d2 = e3.styledComponentId, h2 = e3.target, f3 = import_react2.default.useContext(et), m3 = Ge(), y3 = e3.shouldForwardProp || m3.shouldForwardProp;
-        (0, import_react2.useDebugValue)(d2);
+        var i3 = e3.attrs, a3 = e3.componentStyle, c3 = e3.defaultProps, p3 = e3.foldedComponentIds, d2 = e3.styledComponentId, h2 = e3.target, f3 = import_react3.default.useContext(et), m3 = Ge(), y3 = e3.shouldForwardProp || m3.shouldForwardProp;
+        (0, import_react3.useDebugValue)(d2);
         var v2 = I(r4, f3, c3) || C, g3 = function(e4, n, o2) {
           for (var r5, s4 = __assign(__assign({}, n), { className: void 0, theme: o2 }), i4 = 0; i4 < e4.length; i4 += 1) {
             var a4 = re(r5 = e4[i4]) ? r5(s4) : r5;
@@ -25818,15 +25817,15 @@
         for (var b3 in g3) void 0 === g3[b3] || "$" === b3[0] || "as" === b3 || "theme" === b3 && g3.theme === v2 || ("forwardedAs" === b3 ? w3.as = g3.forwardedAs : y3 && !y3(b3, S3) || (w3[b3] = g3[b3], y3 || false || isPropValid(b3) || st.has(b3) || !A.has(S3) || (st.add(b3), console.warn('styled-components: it looks like an unknown prop "'.concat(b3, '" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)')))));
         var E3 = function(e4, t) {
           var n = Ge(), o2 = e4.generateAndInjectStyles(t, n.styleSheet, n.stylis);
-          return (0, import_react2.useDebugValue)(o2), o2;
+          return (0, import_react3.useDebugValue)(o2), o2;
         }(a3, g3);
         e3.warnTooManyClasses && e3.warnTooManyClasses(E3);
         var N3 = ie(p3, d2);
-        return E3 && (N3 += " " + E3), g3.className && (N3 += " " + g3.className), w3[L(S3) && !A.has(S3) ? "class" : "className"] = N3, w3.ref = s3, (0, import_react2.createElement)(S3, w3);
+        return E3 && (N3 += " " + E3), g3.className && (N3 += " " + g3.className), w3[L(S3) && !A.has(S3) ? "class" : "className"] = N3, w3.ref = s3, (0, import_react3.createElement)(S3, w3);
       }(D2, e2, r3);
     }
     O2.displayName = y2;
-    var D2 = import_react2.default.forwardRef(O2);
+    var D2 = import_react3.default.forwardRef(O2);
     return D2.attrs = S2, D2.componentStyle = N2, D2.displayName = y2, D2.shouldForwardProp = w2, D2.foldedComponentIds = i2 ? ie(a2.foldedComponentIds, a2.styledComponentId) : "", D2.styledComponentId = g2, D2.target = i2 ? a2.target : e, Object.defineProperty(D2, "defaultProps", { get: function() {
       return this._foldedDefaultProps;
     }, set: function(e2) {
@@ -25897,10 +25896,10 @@
     var i2 = lt.apply(void 0, __spreadArray([n], r2, false)), a2 = "sc-global-".concat($(JSON.stringify(i2))), c2 = new ht(i2, a2);
     P(a2);
     var l2 = function(e) {
-      var t = Ge(), n2 = import_react2.default.useContext(et), r3 = import_react2.default.useRef(t.styleSheet.allocateGSInstance(a2)).current;
-      return import_react2.default.Children.count(e.children) && console.warn("The global style component ".concat(a2, " was given child JSX. createGlobalStyle does not render children.")), i2.some(function(e2) {
+      var t = Ge(), n2 = import_react3.default.useContext(et), r3 = import_react3.default.useRef(t.styleSheet.allocateGSInstance(a2)).current;
+      return import_react3.default.Children.count(e.children) && console.warn("The global style component ".concat(a2, " was given child JSX. createGlobalStyle does not render children.")), i2.some(function(e2) {
         return "string" == typeof e2 && -1 !== e2.indexOf("@import");
-      }) && console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."), t.styleSheet.server && u2(r3, e, t.styleSheet, n2, t.stylis), import_react2.default.useLayoutEffect(function() {
+      }) && console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."), t.styleSheet.server && u2(r3, e, t.styleSheet, n2, t.stylis), import_react3.default.useLayoutEffect(function() {
         if (!t.styleSheet.server) return u2(r3, e, t.styleSheet, n2, t.stylis), function() {
           return c2.removeStyles(r3, t.styleSheet);
         };
@@ -25913,7 +25912,7 @@
         c2.renderStyles(e, i3, o2, s3);
       }
     }
-    return import_react2.default.memo(l2);
+    return import_react3.default.memo(l2);
   }
   var vt = function() {
     function e() {
@@ -25932,14 +25931,14 @@
         var r2 = e2.instance.toString();
         if (!r2) return [];
         var s2 = ((n = {})[f] = "", n[y] = v, n.dangerouslySetInnerHTML = { __html: r2 }, n), i2 = Ce();
-        return i2 && (s2.nonce = i2), [import_react2.default.createElement("style", __assign({}, s2, { key: "sc-0-0" }))];
+        return i2 && (s2.nonce = i2), [import_react3.default.createElement("style", __assign({}, s2, { key: "sc-0-0" }))];
       }, this.seal = function() {
         e2.sealed = true;
       }, this.instance = new ke({ isServer: true }), this.sealed = false;
     }
     return e.prototype.collectStyles = function(e2) {
       if (this.sealed) throw he(2);
-      return import_react2.default.createElement(Ye, { sheet: this.instance }, e2);
+      return import_react3.default.createElement(Ye, { sheet: this.instance }, e2);
     }, e.prototype.interleaveWithNodeStream = function(e2) {
       throw he(3);
     }, e;
@@ -25948,7 +25947,7 @@
   var St = "__sc-".concat(f, "__");
   "undefined" != typeof window && (window[St] || (window[St] = 0), 1 === window[St] && console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."), window[St] += 1);
 
-  // ../toolkit-frontend/dist/chunk-UJVH3PQF.mjs
+  // ../toolkit-frontend/dist/chunk-MESQQRK3.mjs
   var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
   var core_exports = {};
   __export(core_exports, {
@@ -25983,7 +25982,8 @@
 `;
   var TRANSPARENCY_SVG_URI = `data:image/svg+xml,${encodeURIComponent(TRANSPARENCY_SVG)}`;
 
-  // ../toolkit-frontend/dist/chunk-6Z2ACPNM.mjs
+  // ../toolkit-frontend/dist/chunk-BQS6YM6U.mjs
+  var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
   var GlobalStyle = ft`
 body {
   &.touch-mode * {
@@ -25991,7 +25991,8 @@ body {
   }
 }
 `;
-  var THEME = {
+  var DARK_THEME = {
+    pageBg: "#333",
     colorGreen: "#98c379",
     colorRed: "#e06c75",
     colorAmber: "#d19a66",
@@ -26006,19 +26007,64 @@ body {
     hintRGB: "66, 134, 244",
     hintDark1: "#2a77f3",
     textNormal: "#F3F3F5",
+    textActive: "#ffffff",
     textMuted: "#777777",
+    shadows: {
+      boxShadowInset: "inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3)",
+      textShadow: "0 -1px rgba(0, 0, 0, 0.7)",
+      textShadowActive: "0 -1px rgba(0, 0, 0, 0.4)"
+    },
+    gradients: {
+      button: "linear-gradient(to bottom, #4f5053, #343436)",
+      buttonHover: "linear-gradient(to bottom, #5e6064, #393a3b)",
+      buttonActive: "linear-gradient(to bottom, #242525, #37383a)",
+      buttonPressedHover: "linear-gradient(to bottom, #282929, #414243)",
+      hintPressed: "linear-gradient(to bottom,#2a77f3,#4286f4)"
+    },
     sizingPx: {
       spacing: 15,
       unitHeight: 40
     }
   };
+  var LIGHT_THEME = {
+    pageBg: "#f8f9fa",
+    colorGreen: "#22863a",
+    colorRed: "#d73a49",
+    colorAmber: "#b08800",
+    bgDark1: "#e9ecef",
+    bg: "#ffffff",
+    bgLight1: "#f5f5f5",
+    borderDark: "#c7c7c7",
+    borderLight: "#d7d7d7",
+    borderLighter: "#eaecef",
+    borderLighterer: "#f6f8fa",
+    hint: "#4286f4",
+    hintRGB: "0, 92, 197",
+    hintDark1: "#2a77f3",
+    textNormal: "#24292e",
+    textActive: "#202020",
+    textMuted: "#6a737d",
+    shadows: {
+      boxShadowInset: "inset 0px 0px 8px 0px rgba(0, 0, 0, 0.05)",
+      textShadow: "0 1px rgba(255, 255, 255, 0.7)",
+      textShadowActive: "0 1px rgba(255, 255, 255, 0.4)"
+    },
+    gradients: {
+      button: "linear-gradient(to bottom, #e1e4e8, #d1d5da)",
+      buttonHover: "linear-gradient(to bottom, #d1d5da, #c1c6cc)",
+      buttonActive: "linear-gradient(to bottom, #b1b6bc, #d2d6da)",
+      buttonPressedHover: "linear-gradient(to bottom, #a1a6ac, #91969c)",
+      hintPressed: "linear-gradient(to bottom, #438bff, #85b3ff)"
+    },
+    sizingPx: DARK_THEME.sizingPx
+  };
   var BaseStyle = ft`
 * {
   box-sizing: border-box;
 }
 
 body {
-  background: #333;
+  background: ${(p2) => p2.theme.pageBg};
   margin: 0;
   padding: 0;
   font-size: 14px;
@@ -26027,8 +26073,8 @@ body {
 `;
   var buttonStateNormal = lt`
   color: ${(p2) => p2.theme.textNormal};
-  background: linear-gradient(to bottom, #4f5053, #343436);
-  text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
+  background: ${(p2) => p2.theme.gradients.button};
+  text-shadow: ${(p2) => p2.theme.shadows.textShadow};
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.15),
     0 1px 0 0 rgba(0, 0, 0, 0.25);
@@ -26036,14 +26082,14 @@ body {
   var buttonStateNormalHover = lt`
   color: ${(p2) => p2.theme.textNormal};
   outline-color: rgba(243, 243, 245, 0.3);
-  background: linear-gradient(to bottom, #5e6064, #393a3b);
-  text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
+  background: ${(p2) => p2.theme.gradients.buttonHover};
+  text-shadow: ${(p2) => p2.theme.shadows.textShadow};
 `;
   var buttonStateNormalActive = lt`
-  color: #ffffff;
+  color: ${(p2) => p2.theme.textNormal};
   outline-color: rgba(255, 255, 255, 0.3);
-  background: linear-gradient(to bottom, #242525, #37383a);
-  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
+  background: ${(p2) => p2.theme.gradients.buttonActive};
+  text-shadow: ${(p2) => p2.theme.shadows.textShadowActive};
   box-shadow:
     inset 0 1px 2px rgba(0, 0, 0, 0.2),
     0 1px 0 0 rgba(255, 255, 255, 0.15);
@@ -26056,7 +26102,7 @@ body {
   var buttonStatePressedHover = lt`
   ${buttonStateNormalActive}
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255,255,255,0.15);
-  background: linear-gradient(to bottom, #282929, #414243);
+  background: ${(p2) => p2.theme.gradients.buttonPressedHover};
 `;
   var buttonStatePressedActive = buttonStateNormalActive;
   var buttonStateDisabled = lt`
@@ -26128,16 +26174,14 @@ body {
   var isCoreComponent = (component) => component.namespace === "core";
 
   // ../toolkit-frontend/dist/components/index.mjs
-  var import_react3 = __toESM(require_react(), 1);
   var import_react4 = __toESM(require_react(), 1);
-  var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
   var import_react5 = __toESM(require_react(), 1);
-  var import_react6 = __toESM(require_react(), 1);
   var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
+  var import_react6 = __toESM(require_react(), 1);
+  var import_react7 = __toESM(require_react(), 1);
   var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
   var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
   var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
-  var import_react7 = __toESM(require_react(), 1);
   var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
   var import_react8 = __toESM(require_react(), 1);
   var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
@@ -26147,13 +26191,16 @@ body {
   var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
   var import_react11 = __toESM(require_react(), 1);
   var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
+  var import_react12 = __toESM(require_react(), 1);
   var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
-  var StageContext = (0, import_react4.createContext)({
-    sendMessage: null,
-    renderComponent: () => {
-      throw new Error(`missing root context`);
-    }
-  });
+  var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
+  var StageContext = (0, import_react5.createContext)(
+    new Proxy({}, {
+      get: () => {
+        throw new Error("Missing StageContext.Provider");
+      }
+    })
+  );
   var TOUCH_INDICATOR_CLASS = "touch-indicator";
   var TOUCHING_CLASS = "touching";
   var ERROR_CLASS = "error";
@@ -26171,7 +26218,7 @@ body {
   padding: 0 4px;
 `;
   var Button = (props) => {
-    const { sendMessage } = import_react3.default.useContext(StageContext);
+    const { sendMessage } = import_react4.default.useContext(StageContext);
     const { touching, handlers } = usePressable(
       () => sendMessage?.({
         type: "component-message",
@@ -26181,7 +26228,7 @@ body {
       })
     );
     const { state } = props.info;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
         className: calculateClass(
@@ -26192,10 +26239,10 @@ body {
         ...handlers,
         title: state.state === "error" ? state.error : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: TOUCH_INDICATOR_CLASS }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(ButtonContents, { children: [
-            props.info.icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { icon: props.info.icon }),
-            props.info.text && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonLabel, { children: props.info.text })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: TOUCH_INDICATOR_CLASS }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(ButtonContents, { children: [
+            props.info.icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { icon: props.info.icon }),
+            props.info.text && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonLabel, { children: props.info.text })
           ] })
         ]
       }
@@ -26213,8 +26260,8 @@ body {
   }
 
   &.${ERROR_CLASS} {
-    color: ${THEME.colorRed};
-    border-color: ${THEME.colorRed};
+    color: ${(p2) => p2.theme.colorRed};
+    border-color: ${(p2) => p2.theme.colorRed};
   }
 
   &.${TOUCHING_CLASS} {
@@ -26235,26 +26282,26 @@ body {
         return "dark";
     }
   }
-  var LastNestedColor = import_react6.default.createContext("dark");
+  var LastNestedColor = import_react7.default.createContext("dark");
   var NestedContent = ({ className, children }) => {
-    const color = import_react6.default.useContext(LastNestedColor);
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: calculateClass(className, `color-${color}`), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LastNestedColor.Provider, { value: nextColor(color), children }) });
+    const color = import_react7.default.useContext(LastNestedColor);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: calculateClass(className, `color-${color}`), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LastNestedColor.Provider, { value: nextColor(color), children }) });
   };
   NestedContent.displayName = "NestedContent";
   var StyledNestedContent = dt(NestedContent)`
-  padding: ${THEME.sizingPx.spacing / 2}px;
-  box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+  padding: ${(p2) => p2.theme.sizingPx.spacing / 2}px;
+  box-shadow: ${(p2) => p2.theme.shadows.boxShadowInset};
 
   &.color-dark {
-    background: ${THEME.bgDark1};
+    background: ${(p2) => p2.theme.bgDark1};
   }
 
   &.color-lighter {
-    background: ${THEME.bg};
+    background: ${(p2) => p2.theme.bg};
   }
 
   &.color-lighterer {
-    background: ${THEME.bgLight1};
+    background: ${(p2) => p2.theme.bgLight1};
   }
 `;
   var CollapseIcon = dt(Icon)({
@@ -26264,11 +26311,11 @@ body {
   display: flex;
   align-items: center;
   padding: 5px 2px;
-  background: ${THEME.borderDark};
-  border-bottom: 1px solid ${THEME.borderDark};
+  background: ${(p2) => p2.theme.borderDark};
+  border-bottom: 1px solid ${(p2) => p2.theme.borderDark};
 
   &.touching {
-    background: ${THEME.bgDark1};
+    background: ${(p2) => p2.theme.bgDark1};
   }
 
   &.collapsed {
@@ -26282,8 +26329,8 @@ body {
   var Label = dt.span`
   display: inline-block;
   border-radius: 3px;
-  background: ${THEME.bg};
-  border: 1px solid ${THEME.bgLight1};
+  background: ${(p2) => p2.theme.bg};
+  border: 1px solid ${(p2) => p2.theme.bgLight1};
   padding: 3px 4px;
 `;
   var Grow = dt.span({
@@ -26301,7 +26348,7 @@ body {
   ${(p2) => p2.info.direction === "vertical" ? "" : "align-items: center;"}
 
   > * {
-    margin: ${THEME.sizingPx.spacing / 2}px;
+    margin: ${(p2) => p2.theme.sizingPx.spacing / 2}px;
   }
 `;
   var EditableTitle = dt.span`
@@ -26316,14 +26363,14 @@ body {
   }
 
   > .icon {
-    color: ${THEME.bg};
+    color: ${(p2) => p2.theme.textMuted};
   }
 
   &:hover {
-    background: ${THEME.bg};
+    background: ${(p2) => p2.theme.bg};
 
     > .icon {
-      color: ${THEME.hint};
+      color: ${(p2) => p2.theme.hint};
     }
   }
 `;
@@ -26331,9 +26378,9 @@ body {
   background: none;
   border: none;
   outline: none;
-  color: ${THEME.textNormal};
+  color: ${(p2) => p2.theme.textNormal};
 `;
-  var GroupStateContext = import_react5.default.createContext({
+  var GroupStateContext = import_react6.default.createContext({
     isCollapsed: () => {
       throw new Error("missing GroupStateContext");
     },
@@ -26342,7 +26389,7 @@ body {
     }
   });
   var GroupStateWrapper = ({ openByDefault, children }) => {
-    const [state, setState] = (0, import_react5.useState)({});
+    const [state, setState] = (0, import_react6.useState)({});
     const isCollapsed = (key, defaultState) => {
       let match2 = state[key];
       if (!match2) {
@@ -26360,13 +26407,13 @@ body {
         [key]: current[key] === "closed" ? "open" : "closed"
       }));
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GroupStateContext.Provider, { value: { isCollapsed, toggleCollapsed }, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GroupStateContext.Provider, { value: { isCollapsed, toggleCollapsed }, children });
   };
   var Group = ({ className, info }) => {
-    const groupState = (0, import_react5.useContext)(GroupStateContext);
-    const { renderComponent, sendMessage } = (0, import_react5.useContext)(StageContext);
-    const [editingTitle, setEditingTitle] = (0, import_react5.useState)(false);
-    const children = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GroupChildren, { info, children: info.children.map(renderComponent) });
+    const groupState = (0, import_react6.useContext)(GroupStateContext);
+    const { renderComponent, sendMessage } = (0, import_react6.useContext)(StageContext);
+    const [editingTitle, setEditingTitle] = (0, import_react6.useState)(false);
+    const children = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GroupChildren, { info, children: info.children.map(renderComponent) });
     const collapsible = !!info.defaultCollapsibleState;
     const collapsed = info.defaultCollapsibleState ? groupState.isCollapsed(info.key, info.defaultCollapsibleState) : false;
     const collapsePressable = usePressable(
@@ -26395,9 +26442,9 @@ body {
       }
     };
     const hasBorder = info.border || displayHeader;
-    const childrenElements = hasBorder ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledNestedContent, { children }) : children;
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: calculateClass(className, !hasBorder && "no-border"), children: [
-      displayHeader ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    const childrenElements = hasBorder ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledNestedContent, { children }) : children;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: calculateClass(className, !hasBorder && "no-border"), children: [
+      displayHeader ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         Header,
         {
           className: calculateClass(
@@ -26405,15 +26452,15 @@ body {
             collapsible && collapsed && "collapsed"
           ),
           children: [
-            collapsible && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            collapsible && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               CollapseIcon,
               {
                 icon: collapsed ? "arrow_right" : "arrow_drop_down",
                 ...collapsePressable.handlers
               }
             ),
-            info.labels?.map((l2) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { children: l2.text })),
-            showTitle && (info.editableTitle ? editingTitle ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            info.labels?.map((l2) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label, { children: l2.text })),
+            showTitle && (info.editableTitle ? editingTitle ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               TitleInput,
               {
                 ref: (input) => input?.focus(),
@@ -26421,11 +26468,11 @@ body {
                 onKeyDown: keyDown,
                 defaultValue: info.title
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(EditableTitle, { onClick: () => setEditingTitle(true), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: info.title }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { className: "icon", icon: "edit" })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: info.title })),
-            collapsible ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CollapseBar, { ...collapsePressable.handlers }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Grow, {}),
+            ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(EditableTitle, { onClick: () => setEditingTitle(true), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: info.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { className: "icon", icon: "edit" })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: info.title })),
+            collapsible ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CollapseBar, { ...collapsePressable.handlers }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Grow, {}),
             info.headers?.map((h) => h.children.map((c2) => renderComponent(c2)))
           ]
         }
@@ -26435,12 +26482,12 @@ body {
   };
   Group.displayName = "Group";
   var StyledGroup = dt(Group)`
-  border: 1px solid ${THEME.borderDark};
+  border: 1px solid ${(p2) => p2.theme.borderDark};
 
   > .title {
     padding: 5px;
-    background: ${THEME.borderDark};
-    border-bottom: 1px solid ${THEME.borderDark};
+    background: ${(p2) => p2.theme.borderDark};
+    border-bottom: 1px solid ${(p2) => p2.theme.borderDark};
   }
 
   &.no-border {
@@ -26448,7 +26495,7 @@ body {
     margin: 0 !important;
   }
 `;
-  var Label2 = ({ className, info }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, children: info.text });
+  var Label2 = ({ className, info }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className, children: info.text });
   var StyledLabel = dt(Label2)`
   font-weight: ${(p2) => p2.info.bold ? "bold" : "normal"};
   white-space: nowrap;
@@ -26462,7 +26509,7 @@ body {
   background: url('${TRANSPARENCY_SVG_URI}');
   background-repeat: repeat;
   background-size: 10px;
-  border: 1px solid ${THEME.borderDark};
+  border: 1px solid ${(p2) => p2.theme.borderDark};
 
   &.${CLS_GROW} {
     flex-grow: 1;
@@ -26472,7 +26519,7 @@ body {
   width: 100%;
   height: 100%;
 `;
-  var Rect = ({ className, info }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Wrapper, { className: calculateClass(className, info.grow && CLS_GROW), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Inner, { style: { backgroundColor: info.color } }) });
+  var Rect = ({ className, info }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Wrapper, { className: calculateClass(className, info.grow && CLS_GROW), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Inner, { style: { backgroundColor: info.color } }) });
   var CLASS_SLIDER_DISPLAY = "slider-display";
   var CLASS_SLIDER_VALUE = "slider-value";
   var CLASS_GRADIENT = "gradient";
@@ -26497,16 +26544,16 @@ body {
     return pageX - rect.left;
   };
   var SliderButton = ({ info, className }) => {
-    const { sendMessage } = import_react7.default.useContext(StageContext);
-    const [state, setState] = import_react7.default.useState({ state: "closed" });
-    const input = import_react7.default.useRef(null);
+    const { sendMessage } = import_react8.default.useContext(StageContext);
+    const [state, setState] = import_react8.default.useState({ state: "closed" });
+    const input = import_react8.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_react7.useCallback)(
+    const sendValue = (0, import_react8.useCallback)(
       (value2) => sendMessage?.({
         type: "component-message",
         namespace: "core",
@@ -26516,7 +26563,7 @@ body {
       }),
       [sendMessage, info.key]
     );
-    const sanitizeValue = (0, import_react7.useCallback)(
+    const sanitizeValue = (0, import_react8.useCallback)(
       (value2) => {
         const i2 = Math.round((value2 - info.min) / info.step);
         const v2 = i2 * info.step + info.min;
@@ -26524,13 +26571,13 @@ body {
       },
       [info.min, info.max, info.step]
     );
-    const getNewValue = (0, import_react7.useCallback)(
+    const getNewValue = (0, import_react8.useCallback)(
       (startValue, diff) => {
         return sanitizeValue((startValue || 0) + diff);
       },
       [sanitizeValue]
     );
-    const getCurrentInputValue = (0, import_react7.useCallback)(
+    const getCurrentInputValue = (0, import_react8.useCallback)(
       (e) => {
         const float = parseFloat(e.currentTarget.value);
         return sanitizeValue(isNaN(float) ? info.value || 0 : float);
@@ -26606,7 +26653,7 @@ body {
     const sliderGradient = gradientStops ? {
       background: `linear-gradient(90deg, ${gradientStops.join(", ")}), url(${TRANSPARENCY_SVG_URI})`
     } : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         className: calculateClass(
@@ -26614,7 +26661,7 @@ body {
           `state-${state.state}`,
           info.grow && CLASS_GROW
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             className: "inner",
@@ -26623,7 +26670,7 @@ body {
             onTouchStart,
             style: state.state === "touching" ? { left: state.innerLeft } : {},
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "input",
                 {
                   type: "text",
@@ -26633,8 +26680,8 @@ body {
                   onKeyDown
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: CLASS_SLIDER_VALUE, children: valueDisplay }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: CLASS_SLIDER_VALUE, children: valueDisplay }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "div",
                 {
                   className: calculateClass(
@@ -26642,10 +26689,10 @@ body {
                     sliderGradient && CLASS_GRADIENT
                   ),
                   style: sliderGradient,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "inner", style: { width: valueCSSPercent } })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "inner", style: { width: valueCSSPercent } })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: CLASS_SLIDER_VALUE, children: valueDisplay })
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: CLASS_SLIDER_VALUE, children: valueDisplay })
             ]
           }
         )
@@ -26673,11 +26720,11 @@ body {
     cursor: pointer;
     transition: all 200ms;
     border-radius: 3px;
-    border: 1px solid ${THEME.borderDark};
+    border: 1px solid ${(p2) => p2.theme.borderDark};
     ${buttonStateNormal}
 
     > input {
-      color: ${THEME.textNormal};
+      color: ${(p2) => p2.theme.textNormal};
       opacity: 0;
       margin: 0 -9px;
       padding: 6px 8px;
@@ -26685,22 +26732,22 @@ body {
       pointer-events: none;
       transition: all 200ms;
       border-radius: 3px;
-      background: ${THEME.bgDark1};
-      border: 1px solid ${THEME.borderDark};
+      background: ${(p2) => p2.theme.bgDark1};
+      border: 1px solid ${(p2) => p2.theme.borderDark};
       overflow: hidden;
-      box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+      box-shadow: ${(p2) => p2.theme.shadows.boxShadowInset};
     }
 
     > .${CLASS_SLIDER_DISPLAY} {
       flex-grow: 1;
       margin: 0 ${SLIDER_PADDING / 2}px;
       height: 4px;
-      background: ${THEME.bgDark1};
-      border: 1px solid ${THEME.borderDark};
+      background: ${(p2) => p2.theme.bgDark1};
+      border: 1px solid ${(p2) => p2.theme.borderDark};
 
       > .inner {
         height: 100%;
-        background: ${THEME.hint};
+        background: ${(p2) => p2.theme.hint};
       }
 
       &.${CLASS_GRADIENT} {
@@ -26709,7 +26756,7 @@ body {
         > .inner {
           position: relative;
           background: none;
-          border-right: 2px solid ${THEME.borderDark};
+          border-right: 2px solid ${(p2) => p2.theme.borderDark};
 
           &::before {
             content: '';
@@ -26718,7 +26765,7 @@ body {
             top: -5px;
             bottom: -5px;
             right: -3px;
-            background: ${THEME.borderDark};
+            background: ${(p2) => p2.theme.borderDark};
           }
 
           &::after {
@@ -26728,7 +26775,7 @@ body {
             top: -4px;
             bottom: -4px;
             right: -2px;
-            background: ${THEME.textNormal};
+            background: ${(p2) => p2.theme.textNormal};
           }
         }
       }
@@ -26768,7 +26815,7 @@ body {
     z-index: 100;
 
     .inner {
-      background: ${THEME.bgDark1};
+      background: ${(p2) => p2.theme.bgDark1};
       width: ${OPEN_SLIDER_WIDTH}px;
 
       > .${CLASS_SLIDER_VALUE} {
@@ -26781,9 +26828,9 @@ body {
   var CLASS_TOUCHING = "touching";
   var TOUCH_INDICATOR_CLASS2 = "touch-indicator";
   var Switch = ({ className, info }) => {
-    const { sendMessage } = import_react8.default.useContext(StageContext);
-    const [touching, setTouching] = (0, import_react8.useState)(false);
-    const onClick = (0, import_react8.useMemo)(
+    const { sendMessage } = import_react9.default.useContext(StageContext);
+    const [touching, setTouching] = (0, import_react9.useState)(false);
+    const onClick = (0, import_react9.useMemo)(
       () => () => {
         sendMessage?.({
           type: "component-message",
@@ -26794,14 +26841,14 @@ body {
       },
       [sendMessage, info.key]
     );
-    const onTouchStart = (0, import_react8.useMemo)(
+    const onTouchStart = (0, import_react9.useMemo)(
       () => (event) => {
         event.preventDefault();
         setTouching(true);
       },
       []
     );
-    const onTouchEnd = (0, import_react8.useMemo)(
+    const onTouchEnd = (0, import_react9.useMemo)(
       () => (event) => {
         event.preventDefault();
         setTouching(false);
@@ -26809,7 +26856,7 @@ body {
       },
       []
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "div",
       {
         className: calculateClass(className, touching && CLASS_TOUCHING),
@@ -26817,11 +26864,11 @@ body {
         onTouchStart,
         onTouchEnd,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: TOUCH_INDICATOR_CLASS2 }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "inner", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "slider" + (info.state === "on" ? " on" : ""), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "on-text", children: "ON" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "off-text", children: "OFF" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "button" })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: TOUCH_INDICATOR_CLASS2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "inner", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "slider" + (info.state === "on" ? " on" : ""), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "on-text", children: "ON" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "off-text", children: "OFF" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "button" })
           ] }) })
         ]
       }
@@ -26841,7 +26888,7 @@ body {
     min-width: ${BUTTON_WIDTH + TEXT_WIDTH}px;
     height: ${SWITCH_HEIGHT}px;
     border-radius: 3px;
-    border: 1px solid ${THEME.borderDark};
+    border: 1px solid ${(p2) => p2.theme.borderDark};
 
     > .slider {
       position: absolute;
@@ -26863,7 +26910,7 @@ body {
         text-align: center;
         top: 0;
         line-height: ${SWITCH_HEIGHT - 2}px;
-        text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
+        text-shadow: ${(p2) => p2.theme.shadows.textShadowActive};
         box-shadow:
           inset 0 1px 2px rgba(0, 0, 0, 0.2),
           0 1px 0 0 rgba(255, 255, 255, 0.15);
@@ -26871,26 +26918,22 @@ body {
 
       > .on-text {
         left: -40px;
-        background: linear-gradient(
-          to bottom,
-          ${THEME.hintDark1},
-          ${THEME.hint}
-        );
+        background: ${(p2) => p2.theme.gradients.hintPressed};
       }
 
       > .button {
         top: -1px;
         left: -1px;
         width: ${BUTTON_WIDTH}px;
-        background: linear-gradient(to bottom, #4f5053, #343436);
-        text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
+        background: ${(p2) => p2.theme.gradients.button};
+        text-shadow: ${(p2) => p2.theme.shadows.textShadow};
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
         border-radius: 3px;
-        border: 1px solid ${THEME.borderDark};
+        border: 1px solid ${(p2) => p2.theme.borderDark};
       }
 
       > .off-text {
-        background: linear-gradient(to bottom, #242525, #37383a);
+        background: ${(p2) => p2.theme.gradients.buttonActive};
         left: ${BUTTON_WIDTH - 2}px;
       }
 
@@ -26899,7 +26942,7 @@ body {
       }
 
       &:hover > .button {
-        background: linear-gradient(to bottom, #5e6064, #393a3b);
+        background: ${(p2) => p2.theme.gradients.buttonHover};
       }
     }
   }
@@ -26917,47 +26960,47 @@ body {
   var Wrapper2 = dt.div`
   display: flex;
   flex-direction: column;
-  background: ${THEME.borderDark};
-  border: 1px solid ${THEME.borderDark};
+  background: ${(p2) => p2.theme.borderDark};
+  border: 1px solid ${(p2) => p2.theme.borderDark};
 `;
   var TabList = dt.div`
   display: flex;
   flex-direction: row;
-  border-bottom: 1px solid ${THEME.borderDark};
+  border-bottom: 1px solid ${(p2) => p2.theme.borderDark};
 `;
   var TabItem = dt.div`
-  height: ${THEME.sizingPx.spacing * 3}px;
+  height: ${(p2) => p2.theme.sizingPx.spacing * 3}px;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 0 ${THEME.sizingPx.spacing}px;
+  padding: 0 ${(p2) => p2.theme.sizingPx.spacing}px;
   cursor: pointer;
-  background: ${THEME.bgDark1};
+  background: ${(p2) => p2.theme.bgDark1};
   margin-right: 1px;
 
   &:hover,
   &.touching {
-    background: ${THEME.bgLight1};
+    background: ${(p2) => p2.theme.bgLight1};
   }
 
   &.current {
-    color: ${THEME.hint};
+    color: ${(p2) => p2.theme.hint};
 
     &::after {
       content: '';
-      border-bottom: 2px solid ${THEME.hint};
+      border-bottom: 2px solid ${(p2) => p2.theme.hint};
       display: block;
-      margin-top: ${THEME.sizingPx.spacing / 2}px;
+      margin-top: ${(p2) => p2.theme.sizingPx.spacing / 2}px;
     }
   }
 `;
   var Tabs = (props) => {
-    const { renderComponent } = import_react9.default.useContext(StageContext);
-    const [touching, setTouching] = import_react9.default.useState(null);
-    const [currentTab, setCurrentTab] = import_react9.default.useState(0);
+    const { renderComponent } = import_react10.default.useContext(StageContext);
+    const [touching, setTouching] = import_react10.default.useState(null);
+    const [currentTab, setCurrentTab] = import_react10.default.useState(0);
     const tab = props.info.tabs[currentTab];
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Wrapper2, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TabList, { children: props.info.tabs.map((tab2, i2) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Wrapper2, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TabList, { children: props.info.tabs.map((tab2, i2) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         TabItem,
         {
           className: calculateClass(
@@ -26978,18 +27021,18 @@ body {
         },
         i2
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledNestedContent, { children: tab?.child && renderComponent(tab.child) })
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StyledNestedContent, { children: tab?.child && renderComponent(tab.child) })
     ] });
   };
   var TextInput = ({ className, info }) => {
-    const { sendMessage } = import_react10.default.useContext(StageContext);
-    const ref = import_react10.default.useRef(null);
-    (0, import_react10.useEffect)(() => {
+    const { sendMessage } = import_react11.default.useContext(StageContext);
+    const ref = import_react11.default.useRef(null);
+    (0, import_react11.useEffect)(() => {
       if (ref.current && ref.current.value !== info.value) {
         ref.current.value = info.value;
       }
     }, [info.value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "input",
       {
         className,
@@ -27010,12 +27053,12 @@ body {
   box-sizing: border-box;
   padding: 6px 8px;
   border-radius: 3px;
-  background: ${THEME.bgDark1};
-  border: 1px solid ${THEME.borderDark};
+  background: ${(p2) => p2.theme.bgDark1};
+  border: 1px solid ${(p2) => p2.theme.borderDark};
   overflow: hidden;
-  box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
-  color: ${THEME.textNormal};
-  text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
+  box-shadow: ${(p2) => p2.theme.shadows.boxShadowInset};
+  color: ${(p2) => p2.theme.textNormal};
+  text-shadow: ${(p2) => p2.theme.shadows.textShadow};
 
   @media (max-width: 500px) {
     flex-basis: 100%;
@@ -27042,12 +27085,12 @@ body {
   var Bar = dt.div`
   width: 100%;
   height: 10px;
-  border: 1px solid ${THEME.borderDark};
-  background: ${THEME.borderDark};
+  border: 1px solid ${(p2) => p2.theme.borderDark};
+  background: ${(p2) => p2.theme.borderDark};
 `;
   var Fill = dt.div`
   height: 100%;
-  background: ${THEME.hint};
+  background: ${(p2) => p2.theme.hint};
 `;
   var Title = dt.div`
   font-size: 1.5em;
@@ -27061,12 +27104,12 @@ body {
 `;
   var Timeline = (props) => {
     const { className, info } = props;
-    const frameState = import_react11.default.useRef({
+    const frameState = import_react12.default.useRef({
       animationFrame: -1,
       state: null
     });
-    const [currentTimeMillis, setCurrentTimeMillis] = (0, import_react11.useState)(0);
-    (0, import_react11.useEffect)(() => {
+    const [currentTimeMillis, setCurrentTimeMillis] = (0, import_react12.useState)(0);
+    (0, import_react12.useEffect)(() => {
       frameState.current.state = info.state;
       const recalculateCurrentTimeMillis = () => {
         if (frameState.current.state !== info.state) {
@@ -27088,15 +27131,15 @@ body {
         window.cancelAnimationFrame(frameState.current.animationFrame);
       };
     }, [frameState, info.state]);
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Wrapper3, { className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Data, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Metadata, { children: [
-          info.title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Title, { children: info.title }),
-          info.subtitles?.map((subtitle, k2) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Subtitle, { children: subtitle }, k2))
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Wrapper3, { className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Data, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Metadata, { children: [
+          info.title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Title, { children: info.title }),
+          info.subtitles?.map((subtitle, k2) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Subtitle, { children: subtitle }, k2))
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(SourceData, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SourceData, { children: [
           info.source?.name,
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             IndicatorIcon,
             {
               icon: info.state.state === "playing" ? "play_arrow" : "pause"
@@ -27104,7 +27147,7 @@ body {
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Bar, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Bar, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         Fill,
         {
           style: {
@@ -27122,23 +27165,23 @@ body {
       }
       switch (info.component) {
         case "button":
-          return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StyledButton, { info }, info.key);
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StyledButton, { info }, info.key);
         case "group":
-          return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StyledGroup, { info }, info.key);
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StyledGroup, { info }, info.key);
         case "label":
-          return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StyledLabel, { info }, info.key);
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StyledLabel, { info }, info.key);
         case "rect":
-          return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Rect, { info }, info.key);
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Rect, { info }, info.key);
         case "slider_button":
-          return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StyledSliderButton, { info }, info.key);
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StyledSliderButton, { info }, info.key);
         case "switch":
-          return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StyledSwitch, { info }, info.key);
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StyledSwitch, { info }, info.key);
         case "tabs":
-          return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tabs, { info }, info.key);
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tabs, { info }, info.key);
         case "text-input":
-          return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StyledTextInput, { info }, info.key);
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StyledTextInput, { info }, info.key);
         case "timeline":
-          return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Timeline, { info }, info.key);
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Timeline, { info }, info.key);
         case "group-header":
         case "tab":
           throw new Error(
@@ -27201,20 +27244,239 @@ body {
   };
 
   // src/frontend/stage.tsx
-  var import_react12 = __toESM(require_react());
+  var import_react15 = __toESM(require_react());
+
+  // ../toolkit-frontend/src/util/index.ts
+  var import_react14 = __toESM(require_react());
+
+  // ../toolkit-frontend/src/util/touch.ts
+  var import_react13 = __toESM(require_react());
+
+  // ../toolkit-frontend/src/util/index.ts
+  var usePreferredColorScheme2 = () => {
+    const [theme, setTheme] = (0, import_react14.useState)("light");
+    (0, import_react14.useEffect)(() => {
+      if (typeof window !== "undefined") {
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        setTheme(mediaQuery.matches ? "dark" : "light");
+        const handleChange = (event) => {
+          setTheme(event.matches ? "dark" : "light");
+        };
+        mediaQuery.addEventListener("change", handleChange);
+        return () => {
+          mediaQuery.removeEventListener("change", handleChange);
+        };
+      }
+    }, []);
+    return theme;
+  };
+
+  // ../toolkit-frontend/src/styling.tsx
+  var import_jsx_runtime14 = __toESM(require_jsx_runtime());
+  var GlobalStyle2 = ft`
+body {
+  &.touch-mode * {
+    cursor: none !important;
+  }
+}
+`;
+  var DARK_THEME2 = {
+    pageBg: "#333",
+    colorGreen: "#98c379",
+    colorRed: "#e06c75",
+    colorAmber: "#d19a66",
+    bgDark1: "#252524",
+    bg: "#2a2a2b",
+    bgLight1: "#353638",
+    borderDark: "#151516",
+    borderLight: "#1c1d1d",
+    borderLighter: "#252524",
+    borderLighterer: "#6b6b67",
+    hint: "#4286f4",
+    hintRGB: "66, 134, 244",
+    hintDark1: "#2a77f3",
+    textNormal: "#F3F3F5",
+    textActive: "#ffffff",
+    textMuted: "#777777",
+    shadows: {
+      boxShadowInset: "inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3)",
+      textShadow: "0 -1px rgba(0, 0, 0, 0.7)",
+      textShadowActive: "0 -1px rgba(0, 0, 0, 0.4)"
+    },
+    gradients: {
+      button: "linear-gradient(to bottom, #4f5053, #343436)",
+      buttonHover: "linear-gradient(to bottom, #5e6064, #393a3b)",
+      buttonActive: "linear-gradient(to bottom, #242525, #37383a)",
+      buttonPressedHover: "linear-gradient(to bottom, #282929, #414243)",
+      hintPressed: "linear-gradient(to bottom,#2a77f3,#4286f4)"
+    },
+    sizingPx: {
+      spacing: 15,
+      unitHeight: 40
+    }
+  };
+  var LIGHT_THEME2 = {
+    pageBg: "#f8f9fa",
+    colorGreen: "#22863a",
+    colorRed: "#d73a49",
+    colorAmber: "#b08800",
+    bgDark1: "#e9ecef",
+    bg: "#ffffff",
+    bgLight1: "#f5f5f5",
+    borderDark: "#c7c7c7",
+    borderLight: "#d7d7d7",
+    borderLighter: "#eaecef",
+    borderLighterer: "#f6f8fa",
+    hint: "#4286f4",
+    hintRGB: "0, 92, 197",
+    hintDark1: "#2a77f3",
+    textNormal: "#24292e",
+    textActive: "#202020",
+    textMuted: "#6a737d",
+    shadows: {
+      boxShadowInset: "inset 0px 0px 8px 0px rgba(0, 0, 0, 0.05)",
+      textShadow: "0 1px rgba(255, 255, 255, 0.7)",
+      textShadowActive: "0 1px rgba(255, 255, 255, 0.4)"
+    },
+    gradients: {
+      button: "linear-gradient(to bottom, #e1e4e8, #d1d5da)",
+      buttonHover: "linear-gradient(to bottom, #d1d5da, #c1c6cc)",
+      buttonActive: "linear-gradient(to bottom, #b1b6bc, #d2d6da)",
+      buttonPressedHover: "linear-gradient(to bottom, #a1a6ac, #91969c)",
+      hintPressed: "linear-gradient(to bottom, #438bff, #85b3ff)"
+    },
+    sizingPx: DARK_THEME2.sizingPx
+  };
+  var BaseStyle2 = ft`
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: ${(p2) => p2.theme.pageBg};
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  font-family: sans-serif;
+}
+`;
+  var buttonStateNormal2 = lt`
+  color: ${(p2) => p2.theme.textNormal};
+  background: ${(p2) => p2.theme.gradients.button};
+  text-shadow: ${(p2) => p2.theme.shadows.textShadow};
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    0 1px 0 0 rgba(0, 0, 0, 0.25);
+`;
+  var buttonStateNormalHover2 = lt`
+  color: ${(p2) => p2.theme.textNormal};
+  outline-color: rgba(243, 243, 245, 0.3);
+  background: ${(p2) => p2.theme.gradients.buttonHover};
+  text-shadow: ${(p2) => p2.theme.shadows.textShadow};
+`;
+  var buttonStateNormalActive2 = lt`
+  color: ${(p2) => p2.theme.textNormal};
+  outline-color: rgba(255, 255, 255, 0.3);
+  background: ${(p2) => p2.theme.gradients.buttonActive};
+  text-shadow: ${(p2) => p2.theme.shadows.textShadowActive};
+  box-shadow:
+    inset 0 1px 2px rgba(0, 0, 0, 0.2),
+    0 1px 0 0 rgba(255, 255, 255, 0.15);
+  transition-duration: 50ms;
+`;
+  var buttonStatePressed2 = lt`
+  ${buttonStateNormalActive2}
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255,255,255,0.15);
+`;
+  var buttonStatePressedHover2 = lt`
+  ${buttonStateNormalActive2}
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255,255,255,0.15);
+  background: ${(p2) => p2.theme.gradients.buttonPressedHover};
+`;
+  var buttonStatePressedActive2 = buttonStateNormalActive2;
+  var buttonStateDisabled2 = lt`
+  ${buttonStateNormal2}
+
+  cursor: default;
+  background: ${(p2) => p2.theme.bg} !important;
+  color: rgba(${(p2) => p2.theme.textNormal}, 0.4);
+`;
+  var button2 = lt`
+  position: relative;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: all 200ms;
+  border-radius: 3px;
+  border: 1px solid ${(p2) => p2.theme.borderDark};
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  outline-color: transparent;
+  ${buttonStateNormal2}
+
+  &:hover {
+    ${buttonStateNormalHover2}
+  }
+
+  &:active {
+    ${buttonStateNormalActive2}
+  }
+`;
+  var buttonPressed2 = lt`
+  ${buttonStatePressed2}
+
+  &:hover {
+    ${buttonStatePressedHover2}
+  }
+
+  &:active {
+    ${buttonStatePressedActive2}
+  }
+`;
+  var buttonDisabled2 = lt`
+  ${buttonStateDisabled2}
+
+  &:hover, &:active {
+    ${buttonStateDisabled2}
+  }
+`;
+  var touchIndicatorNormal2 = lt`
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  left: -6px;
+  bottom: -6px;
+  border-radius: 6px;
+  border: 2px solid rgba(0, 0, 0, 0);
+  background-color: none;
+  transition: border-color 300ms;
+`;
+  var touchIndicatorTouching2 = lt`
+  border-color: ${(p2) => p2.theme.hint};
+  background-color: rgba(${(p2) => p2.theme.hintRGB}, 0.2);
+  transition: border-color 0s;
+`;
+  var PreferredThemeProvider2 = ({ dark, light, children }) => {
+    const theme = usePreferredColorScheme2();
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ot, { theme: theme === "dark" ? dark : light, children });
+  };
+
+  // src/frontend/stage.tsx
   var Stage = ({ className, renderers }) => {
-    const [root, setRoot] = (0, import_react12.useState)(
+    const [root, setRoot] = (0, import_react15.useState)(
       void 0
     );
-    const socket = (0, import_react12.useRef)(null);
-    const preparedRenderers = (0, import_react12.useMemo)(() => {
+    const socket = (0, import_react15.useRef)(null);
+    const uuid = (0, import_react15.useRef)(null);
+    const preparedRenderers = (0, import_react15.useMemo)(() => {
       const prepared = {};
       for (const renderer of renderers) {
         prepared[renderer.namespace] = renderer;
       }
       return prepared;
     }, [renderers]);
-    const renderComponent = (0, import_react12.useCallback)(
+    const renderComponent = (0, import_react15.useCallback)(
       (info) => {
         const renderer = preparedRenderers[info.namespace];
         if (!renderer) {
@@ -27224,7 +27486,7 @@ body {
       },
       [preparedRenderers]
     );
-    (0, import_react12.useEffect)(() => {
+    (0, import_react15.useEffect)(() => {
       initializeWebsocket();
     }, []);
     const initializeWebsocket = async () => {
@@ -27257,6 +27519,9 @@ body {
     };
     const handleMessage = (msg) => {
       switch (msg.type) {
+        case "metadata":
+          uuid.current = msg.connectionUuid;
+          return;
         case "tree-full":
           setRoot(msg.root);
           return;
@@ -27265,26 +27530,32 @@ body {
           return;
       }
     };
-    return /* @__PURE__ */ import_react12.default.createElement(
+    return /* @__PURE__ */ import_react15.default.createElement(
       StageContext.Provider,
       {
         value: {
           sendMessage,
-          renderComponent
+          renderComponent,
+          get connectionUuid() {
+            if (!uuid.current) {
+              throw new Error("Unexpected missing UUID");
+            }
+            return uuid.current;
+          }
         }
       },
-      /* @__PURE__ */ import_react12.default.createElement(GroupStateWrapper, { openByDefault: false }, /* @__PURE__ */ import_react12.default.createElement("div", { className }, root ? renderComponent(root) : /* @__PURE__ */ import_react12.default.createElement("div", { className: "no-root" }, "No root has been added to the light desk")))
+      /* @__PURE__ */ import_react15.default.createElement(GroupStateWrapper, { openByDefault: false }, /* @__PURE__ */ import_react15.default.createElement("div", { className }, root ? renderComponent(root) : /* @__PURE__ */ import_react15.default.createElement("div", { className: "no-root" }, "No root has been added to the light desk")))
     );
   };
   var StyledStage = dt(Stage)`
   width: 100%;
   height: 100%;
-  background-color: #333;
-  color: ${THEME.textNormal};
-  padding: ${THEME.sizingPx.spacing}px;
+  background-color: ${(p2) => p2.theme.pageBg};
+  color: ${(p2) => p2.theme.textNormal};
+  padding: ${(p2) => p2.theme.sizingPx.spacing}px;
 `;
   function rootComponent(props) {
-    return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(BaseStyle, null), /* @__PURE__ */ import_react12.default.createElement(GlobalStyle, null), /* @__PURE__ */ import_react12.default.createElement(ot, { theme: THEME }, /* @__PURE__ */ import_react12.default.createElement(StyledStage, { ...props })));
+    return /* @__PURE__ */ import_react15.default.createElement(PreferredThemeProvider2, { dark: DARK_THEME, light: LIGHT_THEME }, /* @__PURE__ */ import_react15.default.createElement(BaseStyle, null), /* @__PURE__ */ import_react15.default.createElement(GlobalStyle, null), /* @__PURE__ */ import_react15.default.createElement(StyledStage, { ...props }));
   }
 
   // src/frontend/index.ts