@arcanejs/toolkit-frontend 0.6.1 → 0.8.0

package/README.md

@@ -13,7 +13,7 @@ and can only be applied to objects that match the type
 of the objects being compared.
 
 This package is part of the
-[`arcanejs` project](https://github.com/arcanejs/arcanejs#arcanejs),
+[`arcanejs` project](https://github.com/ArcaneWizards/arcanejs#arcanejs),
 and is used to maintain a copy of a JSON tree in downstream clients in real-time
 via websockets.
 

package/dist/{chunk-BQS6YM6U.mjs → chunk-6XOE7F7U.mjs}

@@ -1,6 +1,6 @@
 import {
   usePreferredColorScheme
-} from "./chunk-E7JSREGM.mjs";
+} from "./chunk-PTANIWKR.mjs";
 
 // src/styling.tsx
 import {

package/dist/{chunk-MESQQRK3.mjs → chunk-GMPDVDSW.mjs}

@@ -1,7 +1,7 @@
 import {
   __export,
   calculateClass
-} from "./chunk-E7JSREGM.mjs";
+} from "./chunk-PTANIWKR.mjs";
 
 // src/components/core/index.ts
 var core_exports = {};

package/dist/{chunk-E7JSREGM.mjs → chunk-PTANIWKR.mjs}

@@ -73,7 +73,57 @@ function trackTouch(touch, move, end) {
 
 // src/util/index.ts
 var calculateClass = (...args) => args.filter((a) => !!a).join(" ");
+var COLOR_SCHEME_SETTINGS = "arcane-color-scheme-preference";
+var VALID_COLOR_SCHEME_PREFS = ["auto", "dark", "light"];
+var isValidColorSchemePreference = (value) => {
+  return VALID_COLOR_SCHEME_PREFS.includes(value);
+};
+var useColorSchemePreferences = () => {
+  if (typeof window === "undefined") {
+    return {
+      colorSchemePreference: "auto",
+      setColorSchemePreference: () => {
+      }
+    };
+  }
+  const [preference, setPreference] = useState2(
+    window.localStorage.getItem(
+      COLOR_SCHEME_SETTINGS
+    ) || "auto"
+  );
+  const setColorSchemePreference = (newPreference) => {
+    if (!isValidColorSchemePreference(newPreference)) {
+      throw new Error(`Invalid color scheme preference: ${newPreference}`);
+    }
+    window.localStorage.setItem(COLOR_SCHEME_SETTINGS, newPreference);
+    window.dispatchEvent(
+      new StorageEvent("storage", {
+        key: COLOR_SCHEME_SETTINGS,
+        newValue: newPreference
+      })
+    );
+  };
+  useEffect(() => {
+    const onStorageChange = (event) => {
+      if (event.key === COLOR_SCHEME_SETTINGS) {
+        const newValue = event.newValue;
+        if (isValidColorSchemePreference(newValue)) {
+          setPreference(newValue);
+        }
+      }
+    };
+    window.addEventListener("storage", onStorageChange);
+    return () => {
+      window.removeEventListener("storage", onStorageChange);
+    };
+  }, []);
+  return {
+    colorSchemePreference: isValidColorSchemePreference(preference) ? preference : "auto",
+    setColorSchemePreference
+  };
+};
 var usePreferredColorScheme = () => {
+  const { colorSchemePreference } = useColorSchemePreferences();
   const [theme, setTheme] = useState2("light");
   useEffect(() => {
     if (typeof window !== "undefined") {
@@ -88,7 +138,7 @@ var usePreferredColorScheme = () => {
       };
     }
   }, []);
-  return theme;
+  return colorSchemePreference === "auto" ? theme : colorSchemePreference;
 };
 
 export {
@@ -99,5 +149,7 @@ export {
   usePressable,
   trackTouch,
   calculateClass,
+  VALID_COLOR_SCHEME_PREFS,
+  useColorSchemePreferences,
   usePreferredColorScheme
 };

package/dist/{chunk-7VTNOX5O.js → chunk-TMN35K5Y.js}

@@ -73,7 +73,57 @@ function trackTouch(touch, move, end) {
 
 // src/util/index.ts
 var calculateClass = (...args) => args.filter((a) => !!a).join(" ");
+var COLOR_SCHEME_SETTINGS = "arcane-color-scheme-preference";
+var VALID_COLOR_SCHEME_PREFS = ["auto", "dark", "light"];
+var isValidColorSchemePreference = (value) => {
+  return VALID_COLOR_SCHEME_PREFS.includes(value);
+};
+var useColorSchemePreferences = () => {
+  if (typeof window === "undefined") {
+    return {
+      colorSchemePreference: "auto",
+      setColorSchemePreference: () => {
+      }
+    };
+  }
+  const [preference, setPreference] = _react.useState.call(void 0, 
+    window.localStorage.getItem(
+      COLOR_SCHEME_SETTINGS
+    ) || "auto"
+  );
+  const setColorSchemePreference = (newPreference) => {
+    if (!isValidColorSchemePreference(newPreference)) {
+      throw new Error(`Invalid color scheme preference: ${newPreference}`);
+    }
+    window.localStorage.setItem(COLOR_SCHEME_SETTINGS, newPreference);
+    window.dispatchEvent(
+      new StorageEvent("storage", {
+        key: COLOR_SCHEME_SETTINGS,
+        newValue: newPreference
+      })
+    );
+  };
+  _react.useEffect.call(void 0, () => {
+    const onStorageChange = (event) => {
+      if (event.key === COLOR_SCHEME_SETTINGS) {
+        const newValue = event.newValue;
+        if (isValidColorSchemePreference(newValue)) {
+          setPreference(newValue);
+        }
+      }
+    };
+    window.addEventListener("storage", onStorageChange);
+    return () => {
+      window.removeEventListener("storage", onStorageChange);
+    };
+  }, []);
+  return {
+    colorSchemePreference: isValidColorSchemePreference(preference) ? preference : "auto",
+    setColorSchemePreference
+  };
+};
 var usePreferredColorScheme = () => {
+  const { colorSchemePreference } = useColorSchemePreferences();
   const [theme, setTheme] = _react.useState.call(void 0, "light");
   _react.useEffect.call(void 0, () => {
     if (typeof window !== "undefined") {
@@ -88,7 +138,7 @@ var usePreferredColorScheme = () => {
       };
     }
   }, []);
-  return theme;
+  return colorSchemePreference === "auto" ? theme : colorSchemePreference;
 };
 
 
@@ -100,4 +150,6 @@ var usePreferredColorScheme = () => {
 
 
 
-exports.__export = __export; exports.switchToMouseMode = switchToMouseMode; exports.switchToTouchMode = switchToTouchMode; exports.initialiseListeners = initialiseListeners; exports.usePressable = usePressable; exports.trackTouch = trackTouch; exports.calculateClass = calculateClass; exports.usePreferredColorScheme = usePreferredColorScheme;
+
+
+exports.__export = __export; exports.switchToMouseMode = switchToMouseMode; exports.switchToTouchMode = switchToTouchMode; exports.initialiseListeners = initialiseListeners; exports.usePressable = usePressable; exports.trackTouch = trackTouch; exports.calculateClass = calculateClass; exports.VALID_COLOR_SCHEME_PREFS = VALID_COLOR_SCHEME_PREFS; exports.useColorSchemePreferences = useColorSchemePreferences; exports.usePreferredColorScheme = usePreferredColorScheme;

package/dist/{chunk-T3QSZARM.js → chunk-UHFE2X4V.js}

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunk7VTNOX5Ojs = require('./chunk-7VTNOX5O.js');
+var _chunkTMN35K5Yjs = require('./chunk-TMN35K5Y.js');
 
 // src/components/core/index.ts
 var core_exports = {};
-_chunk7VTNOX5Ojs.__export.call(void 0, core_exports, {
+_chunkTMN35K5Yjs.__export.call(void 0, core_exports, {
   Icon: () => Icon,
   TRANSPARENCY_SVG: () => TRANSPARENCY_SVG,
   TRANSPARENCY_SVG_URI: () => TRANSPARENCY_SVG_URI
@@ -31,7 +31,7 @@ var Span = _styledcomponents.styled.span`
     'wght' 300,
     'GRAD' -25;
 `;
-var Icon = ({ icon, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Span, { className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, props.className, ICON_CLASS), ...props, children: icon });
+var Icon = ({ icon, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Span, { className: _chunkTMN35K5Yjs.calculateClass.call(void 0, props.className, ICON_CLASS), ...props, children: icon });
 
 // src/components/core/index.ts
 var TRANSPARENCY_SVG = `

package/dist/{chunk-WVMAJYGI.js → chunk-ZHJBPEPY.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk7VTNOX5Ojs = require('./chunk-7VTNOX5O.js');
+var _chunkTMN35K5Yjs = require('./chunk-TMN35K5Y.js');
 
 // src/styling.tsx
 
@@ -195,7 +195,7 @@ var touchIndicatorTouching = _styledcomponents.css`
   transition: border-color 0s;
 `;
 var PreferredThemeProvider = ({ dark, light, children }) => {
-  const theme = _chunk7VTNOX5Ojs.usePreferredColorScheme.call(void 0, );
+  const theme = _chunkTMN35K5Yjs.usePreferredColorScheme.call(void 0, );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _styledcomponents.ThemeProvider, { theme: theme === "dark" ? dark : light, children });
 };
 

package/dist/components/core/index.js

@@ -2,10 +2,10 @@
 
 
 
-var _chunkT3QSZARMjs = require('../../chunk-T3QSZARM.js');
-require('../../chunk-7VTNOX5O.js');
+var _chunkUHFE2X4Vjs = require('../../chunk-UHFE2X4V.js');
+require('../../chunk-TMN35K5Y.js');
 
 
 
 
-exports.Icon = _chunkT3QSZARMjs.Icon; exports.TRANSPARENCY_SVG = _chunkT3QSZARMjs.TRANSPARENCY_SVG; exports.TRANSPARENCY_SVG_URI = _chunkT3QSZARMjs.TRANSPARENCY_SVG_URI;
+exports.Icon = _chunkUHFE2X4Vjs.Icon; exports.TRANSPARENCY_SVG = _chunkUHFE2X4Vjs.TRANSPARENCY_SVG; exports.TRANSPARENCY_SVG_URI = _chunkUHFE2X4Vjs.TRANSPARENCY_SVG_URI;

package/dist/components/core/index.mjs

@@ -2,8 +2,8 @@ import {
   Icon,
   TRANSPARENCY_SVG,
   TRANSPARENCY_SVG_URI
-} from "../../chunk-MESQQRK3.mjs";
-import "../../chunk-E7JSREGM.mjs";
+} from "../../chunk-GMPDVDSW.mjs";
+import "../../chunk-PTANIWKR.mjs";
 export {
   Icon,
   TRANSPARENCY_SVG,

package/dist/components/index.d.mts

@@ -12,7 +12,8 @@ interface Props$8 {
 declare const StyledButton: FC<Props$8>;
 
 type StageContextData = {
-    sendMessage: (<M extends proto$1.ClientMessage>(msg: M) => void) | null;
+    sendMessage: (<M extends proto$1.AnyClientComponentMessage>(msg: M) => void) | null;
+    call: (<Namespace extends string, P, Action extends string & keyof P>(msg: proto$1.CallForPair<Namespace, P, Action>) => Promise<proto$1.ReturnForPair<P, Action>>) | null;
     renderComponent: (info: proto$1.AnyComponentProto) => JSX.Element;
     connectionUuid: string;
 };

package/dist/components/index.d.ts

@@ -12,7 +12,8 @@ interface Props$8 {
 declare const StyledButton: FC<Props$8>;
 
 type StageContextData = {
-    sendMessage: (<M extends proto$1.ClientMessage>(msg: M) => void) | null;
+    sendMessage: (<M extends proto$1.AnyClientComponentMessage>(msg: M) => void) | null;
+    call: (<Namespace extends string, P, Action extends string & keyof P>(msg: proto$1.CallForPair<Namespace, P, Action>) => Promise<proto$1.ReturnForPair<P, Action>>) | null;
     renderComponent: (info: proto$1.AnyComponentProto) => JSX.Element;
     connectionUuid: string;
 };

package/dist/components/index.js

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
 
 
-var _chunkT3QSZARMjs = require('../chunk-T3QSZARM.js');
+var _chunkUHFE2X4Vjs = require('../chunk-UHFE2X4V.js');
 
 
 
@@ -11,12 +11,12 @@ var _chunkT3QSZARMjs = require('../chunk-T3QSZARM.js');
 
 
 
-var _chunkWVMAJYGIjs = require('../chunk-WVMAJYGI.js');
+var _chunkZHJBPEPYjs = require('../chunk-ZHJBPEPY.js');
 
 
 
 
-var _chunk7VTNOX5Ojs = require('../chunk-7VTNOX5O.js');
+var _chunkTMN35K5Yjs = require('../chunk-TMN35K5Y.js');
 
 // src/components/index.tsx
 var _core = require('@arcanejs/protocol/core');
@@ -38,6 +38,7 @@ var StageContext = _react.createContext.call(void 0,
 // src/components/button.tsx
 var _jsxruntime = require('react/jsx-runtime');
 var TOUCH_INDICATOR_CLASS = "touch-indicator";
+var LOADING_CLASS = "loading";
 var TOUCHING_CLASS = "touching";
 var ERROR_CLASS = "error";
 var ButtonContents = _styledcomponents.styled.div`
@@ -54,22 +55,31 @@ var ButtonLabel = _styledcomponents.styled.span`
   padding: 0 4px;
 `;
 var Button = (props) => {
-  const { sendMessage } = _react2.default.useContext(StageContext);
-  const { touching, handlers } = _chunk7VTNOX5Ojs.usePressable.call(void 0, 
-    () => _optionalChain([sendMessage, 'optionalCall', _ => _({
-      type: "component-message",
-      namespace: "core",
-      componentKey: props.info.key,
-      component: "button"
-    })])
-  );
-  const { state } = props.info;
+  const { call } = _react2.default.useContext(StageContext);
+  const [localState, setLocalState] = _react2.default.useState(null);
+  const state = _nullishCoalesce(localState, () => ( props.info.state));
+  const { touching, handlers } = _chunkTMN35K5Yjs.usePressable.call(void 0, async () => {
+    try {
+      if (!call) return;
+      setLocalState({ state: "loading" });
+      await _optionalChain([call, 'optionalCall', _ => _({
+        type: "component-call",
+        namespace: "core",
+        componentKey: props.info.key,
+        action: "press"
+      })]);
+      setLocalState(null);
+    } catch (e) {
+      setLocalState({ state: "error", error: `${e}` });
+    }
+  });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
-      className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, 
+      className: _chunkTMN35K5Yjs.calculateClass.call(void 0, 
         props.className,
-        touching || state.state === "pressed" ? TOUCHING_CLASS : null,
+        (touching || state.state === "pressed") && TOUCHING_CLASS,
+        state.state === "loading" && LOADING_CLASS,
         state.state === "error" && ERROR_CLASS
       ),
       ...handlers,
@@ -77,7 +87,7 @@ var Button = (props) => {
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: TOUCH_INDICATOR_CLASS }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ButtonContents, { children: [
-          props.info.icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkT3QSZARMjs.Icon, { icon: props.info.icon }),
+          props.info.icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUHFE2X4Vjs.Icon, { icon: props.info.icon }),
           props.info.text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonLabel, { children: props.info.text })
         ] })
       ]
@@ -85,14 +95,14 @@ var Button = (props) => {
   );
 };
 var StyledButton = _styledcomponents.styled.call(void 0, Button)`
-  ${_chunkWVMAJYGIjs.rectButton}
+  ${_chunkZHJBPEPYjs.rectButton}
   outline: none;
   height: 30px;
   position: relative;
   overflow: visible;
 
   .${TOUCH_INDICATOR_CLASS} {
-    ${_chunkWVMAJYGIjs.touchIndicatorNormal}
+    ${_chunkZHJBPEPYjs.touchIndicatorNormal}
   }
 
   &.${ERROR_CLASS} {
@@ -100,11 +110,11 @@ var StyledButton = _styledcomponents.styled.call(void 0, Button)`
     border-color: ${(p) => p.theme.colorRed};
   }
 
-  &.${TOUCHING_CLASS} {
-    ${_chunkWVMAJYGIjs.buttonStateNormalActive}
+  &.${TOUCHING_CLASS}, &.${LOADING_CLASS} {
+    ${_chunkZHJBPEPYjs.buttonStateNormalActive}
 
     .${TOUCH_INDICATOR_CLASS} {
-      ${_chunkWVMAJYGIjs.touchIndicatorTouching}
+      ${_chunkZHJBPEPYjs.touchIndicatorTouching}
     }
   }
 `;
@@ -133,7 +143,7 @@ function nextColor(currentColor) {
 var LastNestedColor = _react2.default.createContext("dark");
 var NestedContent = ({ className, children }) => {
   const color = _react2.default.useContext(LastNestedColor);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, className, `color-${color}`), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LastNestedColor.Provider, { value: nextColor(color), children }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkTMN35K5Yjs.calculateClass.call(void 0, className, `color-${color}`), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LastNestedColor.Provider, { value: nextColor(color), children }) });
 };
 NestedContent.displayName = "NestedContent";
 var StyledNestedContent = _styledcomponents.styled.call(void 0, NestedContent)`
@@ -155,7 +165,7 @@ var StyledNestedContent = _styledcomponents.styled.call(void 0, NestedContent)`
 
 // src/components/group.tsx
 
-var CollapseIcon = _styledcomponents.styled.call(void 0, (0, _chunkT3QSZARMjs.Icon))({
+var CollapseIcon = _styledcomponents.styled.call(void 0, (0, _chunkUHFE2X4Vjs.Icon))({
   cursor: "pointer"
 });
 var Header = _styledcomponents.styled.div`
@@ -267,7 +277,7 @@ var Group = ({ className, info }) => {
   const children = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GroupChildren, { info, children: info.children.map(renderComponent) });
   const collapsible = !!info.defaultCollapsibleState;
   const collapsed = info.defaultCollapsibleState ? groupState.isCollapsed(info.key, info.defaultCollapsibleState) : false;
-  const collapsePressable = _chunk7VTNOX5Ojs.usePressable.call(void 0, 
+  const collapsePressable = _chunkTMN35K5Yjs.usePressable.call(void 0, 
     () => groupState.toggleCollapsed(info.key)
   );
   const showTitle = info.title || info.editableTitle;
@@ -294,11 +304,11 @@ var Group = ({ className, info }) => {
   };
   const hasBorder = info.border || displayHeader;
   const childrenElements = hasBorder ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledNestedContent, { children }) : children;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, className, !hasBorder && "no-border"), children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkTMN35K5Yjs.calculateClass.call(void 0, className, !hasBorder && "no-border"), children: [
     displayHeader ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       Header,
       {
-        className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, 
+        className: _chunkTMN35K5Yjs.calculateClass.call(void 0, 
           collapsePressable.touching && "touching",
           collapsible && collapsed && "collapsed"
         ),
@@ -321,7 +331,7 @@ var Group = ({ className, info }) => {
             }
           ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, EditableTitle, { onClick: () => setEditingTitle(true), children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: info.title }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkT3QSZARMjs.Icon, { className: "icon", icon: "edit" })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUHFE2X4Vjs.Icon, { className: "icon", icon: "edit" })
           ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: info.title })),
           collapsible ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CollapseBar, { ...collapsePressable.handlers }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Grow, {}),
           _optionalChain([info, 'access', _12 => _12.headers, 'optionalAccess', _13 => _13.map, 'call', _14 => _14((h) => h.children.map((c) => renderComponent(c)))])
@@ -365,7 +375,7 @@ var Wrapper = _styledcomponents.styled.div`
   height: 30px;
   border-radius: 3px;
   overflow: hidden;
-  background: url('${_chunkT3QSZARMjs.TRANSPARENCY_SVG_URI}');
+  background: url('${_chunkUHFE2X4Vjs.TRANSPARENCY_SVG_URI}');
   background-repeat: repeat;
   background-size: 10px;
   border: 1px solid ${(p) => p.theme.borderDark};
@@ -378,7 +388,7 @@ var Inner = _styledcomponents.styled.div`
   width: 100%;
   height: 100%;
 `;
-var Rect = ({ className, info }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Wrapper, { className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, className, info.grow && CLS_GROW), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Inner, { style: { backgroundColor: info.color } }) });
+var Rect = ({ className, info }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Wrapper, { className: _chunkTMN35K5Yjs.calculateClass.call(void 0, className, info.grow && CLS_GROW), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Inner, { style: { backgroundColor: info.color } }) });
 
 // src/components/slider-button.tsx
 
@@ -478,7 +488,7 @@ var SliderButton = ({ info, className }) => {
         touch.pageX
       );
       const start = onDown(cursorPosition);
-      _chunk7VTNOX5Ojs.trackTouch.call(void 0, 
+      _chunkTMN35K5Yjs.trackTouch.call(void 0, 
         touch,
         (p) => {
           const amntDiff = (p.pageX - originalPageX) / OPEN_SLIDER_INNER_WIDTH;
@@ -515,12 +525,12 @@ var SliderButton = ({ info, className }) => {
   const valueCSSPercent = value ? (value - info.min) / (info.max - info.min) * 100 + "%" : "0";
   const gradientStops = info.gradient && info.gradient.map((g) => `${g.color} ${g.position * 100}%`);
   const sliderGradient = gradientStops ? {
-    background: `linear-gradient(90deg, ${gradientStops.join(", ")}), url(${_chunkT3QSZARMjs.TRANSPARENCY_SVG_URI})`
+    background: `linear-gradient(90deg, ${gradientStops.join(", ")}), url(${_chunkUHFE2X4Vjs.TRANSPARENCY_SVG_URI})`
   } : void 0;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
     {
-      className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, 
+      className: _chunkTMN35K5Yjs.calculateClass.call(void 0, 
         className,
         `state-${state.state}`,
         info.grow && CLASS_GROW
@@ -548,7 +558,7 @@ var SliderButton = ({ info, className }) => {
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "div",
               {
-                className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, 
+                className: _chunkTMN35K5Yjs.calculateClass.call(void 0, 
                   CLASS_SLIDER_DISPLAY,
                   sliderGradient && CLASS_GRADIENT
                 ),
@@ -585,7 +595,7 @@ var StyledSliderButton = _styledcomponents.styled.call(void 0, SliderButton)`
     transition: all 200ms;
     border-radius: 3px;
     border: 1px solid ${(p) => p.theme.borderDark};
-    ${_chunkWVMAJYGIjs.buttonStateNormal}
+    ${_chunkZHJBPEPYjs.buttonStateNormal}
 
     > input {
       color: ${(p) => p.theme.textNormal};
@@ -654,13 +664,13 @@ var StyledSliderButton = _styledcomponents.styled.call(void 0, SliderButton)`
     }
 
     &:hover {
-      ${_chunkWVMAJYGIjs.buttonStateNormalHover}
+      ${_chunkZHJBPEPYjs.buttonStateNormalHover}
     }
   }
 
   &.state-mouse-down {
     > .inner {
-      ${_chunkWVMAJYGIjs.buttonPressed}
+      ${_chunkZHJBPEPYjs.buttonPressed}
     }
   }
 
@@ -728,7 +738,7 @@ var Switch = ({ className, info }) => {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
-      className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, className, touching && CLASS_TOUCHING),
+      className: _chunkTMN35K5Yjs.calculateClass.call(void 0, className, touching && CLASS_TOUCHING),
       onClick,
       onTouchStart,
       onTouchEnd,
@@ -817,12 +827,12 @@ var StyledSwitch = _styledcomponents.styled.call(void 0, Switch)`
   }
 
   .${TOUCH_INDICATOR_CLASS2} {
-    ${_chunkWVMAJYGIjs.touchIndicatorNormal}
+    ${_chunkZHJBPEPYjs.touchIndicatorNormal}
   }
 
   &.${CLASS_TOUCHING} {
     .${TOUCH_INDICATOR_CLASS2} {
-      ${_chunkWVMAJYGIjs.touchIndicatorTouching}
+      ${_chunkZHJBPEPYjs.touchIndicatorTouching}
     }
   }
 `;
@@ -877,7 +887,7 @@ var Tabs = (props) => {
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabList, { children: props.info.tabs.map((tab2, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       TabItem,
       {
-        className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, 
+        className: _chunkTMN35K5Yjs.calculateClass.call(void 0, 
           touching === i && "touching",
           currentTab === i && "current"
         ),
@@ -963,7 +973,7 @@ var SourceData = _styledcomponents.styled.div`
   align-items: end;
   justify-content: center;
 `;
-var IndicatorIcon = _styledcomponents.styled.call(void 0, _chunkT3QSZARMjs.Icon)`
+var IndicatorIcon = _styledcomponents.styled.call(void 0, _chunkUHFE2X4Vjs.Icon)`
   font-size: 40px;
 `;
 var Bar = _styledcomponents.styled.div`
@@ -1092,4 +1102,4 @@ var CORE_FRONTEND_COMPONENT_RENDERER = {
 
 
 
-exports.Button = StyledButton; exports.CORE_FRONTEND_COMPONENT_RENDERER = CORE_FRONTEND_COMPONENT_RENDERER; exports.Group = StyledGroup; exports.GroupStateWrapper = GroupStateWrapper; exports.Label = StyledLabel; exports.NestedContent = StyledNestedContent; exports.Rect = Rect; exports.SliderButton = StyledSliderButton; exports.StageContext = StageContext; exports.Switch = StyledSwitch; exports.Tabs = Tabs; exports.TextInput = StyledTextInput; exports.Timeline = Timeline; exports.code = _chunkT3QSZARMjs.core_exports;
+exports.Button = StyledButton; exports.CORE_FRONTEND_COMPONENT_RENDERER = CORE_FRONTEND_COMPONENT_RENDERER; exports.Group = StyledGroup; exports.GroupStateWrapper = GroupStateWrapper; exports.Label = StyledLabel; exports.NestedContent = StyledNestedContent; exports.Rect = Rect; exports.SliderButton = StyledSliderButton; exports.StageContext = StageContext; exports.Switch = StyledSwitch; exports.Tabs = Tabs; exports.TextInput = StyledTextInput; exports.Timeline = Timeline; exports.code = _chunkUHFE2X4Vjs.core_exports;

package/dist/components/index.mjs

@@ -2,7 +2,7 @@ import {
   Icon,
   TRANSPARENCY_SVG_URI,
   core_exports
-} from "../chunk-MESQQRK3.mjs";
+} from "../chunk-GMPDVDSW.mjs";
 import {
   buttonPressed,
   buttonStateNormal,
@@ -11,12 +11,12 @@ import {
   rectButton,
   touchIndicatorNormal,
   touchIndicatorTouching
-} from "../chunk-BQS6YM6U.mjs";
+} from "../chunk-6XOE7F7U.mjs";
 import {
   calculateClass,
   trackTouch,
   usePressable
-} from "../chunk-E7JSREGM.mjs";
+} from "../chunk-PTANIWKR.mjs";
 
 // src/components/index.tsx
 import { isCoreComponent } from "@arcanejs/protocol/core";
@@ -38,6 +38,7 @@ var StageContext = createContext(
 // src/components/button.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var TOUCH_INDICATOR_CLASS = "touch-indicator";
+var LOADING_CLASS = "loading";
 var TOUCHING_CLASS = "touching";
 var ERROR_CLASS = "error";
 var ButtonContents = styled.div`
@@ -54,22 +55,31 @@ var ButtonLabel = styled.span`
   padding: 0 4px;
 `;
 var Button = (props) => {
-  const { sendMessage } = React.useContext(StageContext);
-  const { touching, handlers } = usePressable(
-    () => sendMessage?.({
-      type: "component-message",
-      namespace: "core",
-      componentKey: props.info.key,
-      component: "button"
-    })
-  );
-  const { state } = props.info;
+  const { call } = React.useContext(StageContext);
+  const [localState, setLocalState] = React.useState(null);
+  const state = localState ?? props.info.state;
+  const { touching, handlers } = usePressable(async () => {
+    try {
+      if (!call) return;
+      setLocalState({ state: "loading" });
+      await call?.({
+        type: "component-call",
+        namespace: "core",
+        componentKey: props.info.key,
+        action: "press"
+      });
+      setLocalState(null);
+    } catch (e) {
+      setLocalState({ state: "error", error: `${e}` });
+    }
+  });
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: calculateClass(
         props.className,
-        touching || state.state === "pressed" ? TOUCHING_CLASS : null,
+        (touching || state.state === "pressed") && TOUCHING_CLASS,
+        state.state === "loading" && LOADING_CLASS,
         state.state === "error" && ERROR_CLASS
       ),
       ...handlers,
@@ -100,7 +110,7 @@ var StyledButton = styled(Button)`
     border-color: ${(p) => p.theme.colorRed};
   }
 
-  &.${TOUCHING_CLASS} {
+  &.${TOUCHING_CLASS}, &.${LOADING_CLASS} {
     ${buttonStateNormalActive}
 
     .${TOUCH_INDICATOR_CLASS} {

package/dist/styling.js

@@ -12,8 +12,8 @@
 
 
 
-var _chunkWVMAJYGIjs = require('./chunk-WVMAJYGI.js');
-require('./chunk-7VTNOX5O.js');
+var _chunkZHJBPEPYjs = require('./chunk-ZHJBPEPY.js');
+require('./chunk-TMN35K5Y.js');
 
 
 
@@ -28,4 +28,4 @@ require('./chunk-7VTNOX5O.js');
 
 
 
-exports.BaseStyle = _chunkWVMAJYGIjs.BaseStyle; exports.DARK_THEME = _chunkWVMAJYGIjs.DARK_THEME; exports.GlobalStyle = _chunkWVMAJYGIjs.GlobalStyle; exports.LIGHT_THEME = _chunkWVMAJYGIjs.LIGHT_THEME; exports.PreferredThemeProvider = _chunkWVMAJYGIjs.PreferredThemeProvider; exports.buttonDisabled = _chunkWVMAJYGIjs.buttonDisabled; exports.buttonPressed = _chunkWVMAJYGIjs.buttonPressed; exports.buttonStateNormal = _chunkWVMAJYGIjs.buttonStateNormal; exports.buttonStateNormalActive = _chunkWVMAJYGIjs.buttonStateNormalActive; exports.buttonStateNormalHover = _chunkWVMAJYGIjs.buttonStateNormalHover; exports.rectButton = _chunkWVMAJYGIjs.rectButton; exports.touchIndicatorNormal = _chunkWVMAJYGIjs.touchIndicatorNormal; exports.touchIndicatorTouching = _chunkWVMAJYGIjs.touchIndicatorTouching;
+exports.BaseStyle = _chunkZHJBPEPYjs.BaseStyle; exports.DARK_THEME = _chunkZHJBPEPYjs.DARK_THEME; exports.GlobalStyle = _chunkZHJBPEPYjs.GlobalStyle; exports.LIGHT_THEME = _chunkZHJBPEPYjs.LIGHT_THEME; exports.PreferredThemeProvider = _chunkZHJBPEPYjs.PreferredThemeProvider; exports.buttonDisabled = _chunkZHJBPEPYjs.buttonDisabled; exports.buttonPressed = _chunkZHJBPEPYjs.buttonPressed; exports.buttonStateNormal = _chunkZHJBPEPYjs.buttonStateNormal; exports.buttonStateNormalActive = _chunkZHJBPEPYjs.buttonStateNormalActive; exports.buttonStateNormalHover = _chunkZHJBPEPYjs.buttonStateNormalHover; exports.rectButton = _chunkZHJBPEPYjs.rectButton; exports.touchIndicatorNormal = _chunkZHJBPEPYjs.touchIndicatorNormal; exports.touchIndicatorTouching = _chunkZHJBPEPYjs.touchIndicatorTouching;

package/dist/styling.mjs

@@ -12,8 +12,8 @@ import {
   rectButton,
   touchIndicatorNormal,
   touchIndicatorTouching
-} from "./chunk-BQS6YM6U.mjs";
-import "./chunk-E7JSREGM.mjs";
+} from "./chunk-6XOE7F7U.mjs";
+import "./chunk-PTANIWKR.mjs";
 export {
   BaseStyle,
   DARK_THEME,

package/dist/types.d.mts

@@ -2,7 +2,7 @@ import { BaseComponentProto } from '@arcanejs/protocol';
 
 type FrontendComponentRenderer = {
     namespace: string;
-    render: (component: BaseComponentProto<string>) => JSX.Element;
+    render: (component: BaseComponentProto<string, string>) => JSX.Element;
 };
 type FrontendComponentRenderers = FrontendComponentRenderer[];
 

package/dist/types.d.ts

@@ -2,7 +2,7 @@ import { BaseComponentProto } from '@arcanejs/protocol';
 
 type FrontendComponentRenderer = {
     namespace: string;
-    render: (component: BaseComponentProto<string>) => JSX.Element;
+    render: (component: BaseComponentProto<string, string>) => JSX.Element;
 };
 type FrontendComponentRenderers = FrontendComponentRenderer[];
 

package/dist/util/index.d.mts

@@ -1,7 +1,7 @@
 declare function switchToMouseMode(ev: MouseEvent): void;
 declare function switchToTouchMode(): void;
 declare function initialiseListeners(): void;
-declare const usePressable: (click: () => void) => {
+declare const usePressable: (click: () => unknown) => {
     touching: boolean;
     handlers: {
         onClick: React.MouseEventHandler<unknown>;
@@ -19,6 +19,12 @@ declare function trackTouch(touch: React.Touch, move: (pos: {
 }) => void): void;
 
 declare const calculateClass: (...args: (string | undefined | null | false)[]) => string;
+declare const VALID_COLOR_SCHEME_PREFS: readonly ["auto", "dark", "light"];
+type ColorSchemePreference = (typeof VALID_COLOR_SCHEME_PREFS)[number];
+declare const useColorSchemePreferences: () => {
+    colorSchemePreference: "dark" | "light" | "auto";
+    setColorSchemePreference: (newPreference: ColorSchemePreference) => void;
+};
 declare const usePreferredColorScheme: () => 'dark' | 'light';
 
-export { calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, usePreferredColorScheme, usePressable };
+export { VALID_COLOR_SCHEME_PREFS, calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, useColorSchemePreferences, usePreferredColorScheme, usePressable };

package/dist/util/index.d.ts

@@ -1,7 +1,7 @@
 declare function switchToMouseMode(ev: MouseEvent): void;
 declare function switchToTouchMode(): void;
 declare function initialiseListeners(): void;
-declare const usePressable: (click: () => void) => {
+declare const usePressable: (click: () => unknown) => {
     touching: boolean;
     handlers: {
         onClick: React.MouseEventHandler<unknown>;
@@ -19,6 +19,12 @@ declare function trackTouch(touch: React.Touch, move: (pos: {
 }) => void): void;
 
 declare const calculateClass: (...args: (string | undefined | null | false)[]) => string;
+declare const VALID_COLOR_SCHEME_PREFS: readonly ["auto", "dark", "light"];
+type ColorSchemePreference = (typeof VALID_COLOR_SCHEME_PREFS)[number];
+declare const useColorSchemePreferences: () => {
+    colorSchemePreference: "dark" | "light" | "auto";
+    setColorSchemePreference: (newPreference: ColorSchemePreference) => void;
+};
 declare const usePreferredColorScheme: () => 'dark' | 'light';
 
-export { calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, usePreferredColorScheme, usePressable };
+export { VALID_COLOR_SCHEME_PREFS, calculateClass, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, useColorSchemePreferences, usePreferredColorScheme, usePressable };

package/dist/util/index.js

@@ -6,13 +6,17 @@
 
 
 
-var _chunk7VTNOX5Ojs = require('../chunk-7VTNOX5O.js');
 
 
+var _chunkTMN35K5Yjs = require('../chunk-TMN35K5Y.js');
 
 
 
 
 
 
-exports.calculateClass = _chunk7VTNOX5Ojs.calculateClass; exports.initialiseListeners = _chunk7VTNOX5Ojs.initialiseListeners; exports.switchToMouseMode = _chunk7VTNOX5Ojs.switchToMouseMode; exports.switchToTouchMode = _chunk7VTNOX5Ojs.switchToTouchMode; exports.trackTouch = _chunk7VTNOX5Ojs.trackTouch; exports.usePreferredColorScheme = _chunk7VTNOX5Ojs.usePreferredColorScheme; exports.usePressable = _chunk7VTNOX5Ojs.usePressable;
+
+
+
+
+exports.VALID_COLOR_SCHEME_PREFS = _chunkTMN35K5Yjs.VALID_COLOR_SCHEME_PREFS; exports.calculateClass = _chunkTMN35K5Yjs.calculateClass; exports.initialiseListeners = _chunkTMN35K5Yjs.initialiseListeners; exports.switchToMouseMode = _chunkTMN35K5Yjs.switchToMouseMode; exports.switchToTouchMode = _chunkTMN35K5Yjs.switchToTouchMode; exports.trackTouch = _chunkTMN35K5Yjs.trackTouch; exports.useColorSchemePreferences = _chunkTMN35K5Yjs.useColorSchemePreferences; exports.usePreferredColorScheme = _chunkTMN35K5Yjs.usePreferredColorScheme; exports.usePressable = _chunkTMN35K5Yjs.usePressable;

package/dist/util/index.mjs

@@ -1,18 +1,22 @@
 import {
+  VALID_COLOR_SCHEME_PREFS,
   calculateClass,
   initialiseListeners,
   switchToMouseMode,
   switchToTouchMode,
   trackTouch,
+  useColorSchemePreferences,
   usePreferredColorScheme,
   usePressable
-} from "../chunk-E7JSREGM.mjs";
+} from "../chunk-PTANIWKR.mjs";
 export {
+  VALID_COLOR_SCHEME_PREFS,
   calculateClass,
   initialiseListeners,
   switchToMouseMode,
   switchToTouchMode,
   trackTouch,
+  useColorSchemePreferences,
   usePreferredColorScheme,
   usePressable
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcanejs/toolkit-frontend",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "private": false,
   "description": "Library of the frontend react components used to render the @arcanejs Toolkit",
   "keywords": [],
@@ -11,7 +11,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/arcanejs/arcanejs.git"
+    "url": "https://github.com/ArcaneWizards/arcanejs.git"
   },
   "exports": {
     ".": {
@@ -62,7 +62,7 @@
     "react": "^18",
     "react-dom": "18.3.1",
     "styled-components": "^6.1.13",
-    "@arcanejs/protocol": "^0.6.0"
+    "@arcanejs/protocol": "^0.7.0"
   },
   "files": [
     "dist"