@arcanejs/toolkit 3.1.0 → 4.0.0

package/dist/{chunk-7OX2FB6C.js → chunk-JSZMJCCH.js}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkSGACFY53js = require('./chunk-SGACFY53.js');
+var _chunkHTM2L3DTjs = require('./chunk-HTM2L3DT.js');
 
 // src/backend/components/rect.ts
 var DEFAULT_PROPS = {
   color: "rgba(0, 0, 0, 0)"
 };
-var Rect = class extends _chunkSGACFY53js.Base {
+var Rect = class extends _chunkHTM2L3DTjs.Base {
   constructor(props) {
     super(DEFAULT_PROPS, props);
   }

package/dist/{chunk-GMDJYFHD.js → chunk-LGIWNJQA.js}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); var _class; var _class2;
 
-var _chunkSGACFY53js = require('./chunk-SGACFY53.js');
+var _chunkHTM2L3DTjs = require('./chunk-HTM2L3DT.js');
 
 // src/backend/components/tabs.ts
-var Tab = (_class = class extends _chunkSGACFY53js.BaseParent {constructor(...args) { super(...args); _class.prototype.__init.call(this);_class.prototype.__init2.call(this); }
+var Tab = (_class = class extends _chunkHTM2L3DTjs.BaseParent {constructor(...args) { super(...args); _class.prototype.__init.call(this);_class.prototype.__init2.call(this); }
   __init() {this.validateChildren = (children) => {
     if (children.length > 1) {
       throw new Error("Tab can only have one child");
@@ -18,7 +18,7 @@ var Tab = (_class = class extends _chunkSGACFY53js.BaseParent {constructor(...ar
     child: this.getChildren().slice(0, 1).map((c) => c.getProtoInfo(idMap))[0]
   })}
 }, _class);
-var Tabs = (_class2 = class extends _chunkSGACFY53js.BaseParent {
+var Tabs = (_class2 = class extends _chunkHTM2L3DTjs.BaseParent {
   __init3() {this.validateChildren = (children) => {
     for (const child of children) {
       if (!(child instanceof Tab)) {

package/dist/{chunk-7TTY7CBH.mjs → chunk-MMK3PCSS.mjs}

@@ -1,6 +1,6 @@
 import {
   BaseParent
-} from "./chunk-RYR5I5FT.mjs";
+} from "./chunk-JKTEVA75.mjs";
 
 // src/backend/components/tabs.ts
 var Tab = class extends BaseParent {

package/dist/{chunk-5D7OSUZ6.mjs → chunk-PIVARHCZ.mjs}

@@ -1,7 +1,7 @@
 import {
   BaseParent,
   EventEmitter
-} from "./chunk-RYR5I5FT.mjs";
+} from "./chunk-JKTEVA75.mjs";
 
 // src/backend/components/group.ts
 import * as proto from "@arcanejs/protocol/core";

package/dist/{chunk-JFZXSCGK.mjs → chunk-PYJC5BFZ.mjs}

@@ -1,7 +1,7 @@
 import {
   Base,
   EventEmitter
-} from "./chunk-RYR5I5FT.mjs";
+} from "./chunk-JKTEVA75.mjs";
 
 // src/backend/components/slider-button.ts
 import * as proto from "@arcanejs/protocol/core";

package/dist/{chunk-O5ZW6JYG.js → chunk-QT43ONN5.js}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } var _class; var _class2;
 
 
-var _chunkSGACFY53js = require('./chunk-SGACFY53.js');
+var _chunkHTM2L3DTjs = require('./chunk-HTM2L3DT.js');
 
 // src/backend/components/group.ts
 var _core = require('@arcanejs/protocol/core'); var proto = _interopRequireWildcard(_core);
@@ -13,7 +13,7 @@ var DEFAULT_PROPS = {
   title: null,
   labels: null
 };
-var GroupHeader = (_class = class extends _chunkSGACFY53js.BaseParent {constructor(...args) { super(...args); _class.prototype.__init.call(this);_class.prototype.__init2.call(this); }
+var GroupHeader = (_class = class extends _chunkHTM2L3DTjs.BaseParent {constructor(...args) { super(...args); _class.prototype.__init.call(this);_class.prototype.__init2.call(this); }
   __init() {this.validateChildren = () => {
   }}
   /** @hidden */
@@ -24,9 +24,9 @@ var GroupHeader = (_class = class extends _chunkSGACFY53js.BaseParent {construct
     children: this.getChildren().map((c) => c.getProtoInfo(idMap))
   })}
 }, _class);
-var Group = (_class2 = class extends _chunkSGACFY53js.BaseParent {
+var Group = (_class2 = class extends _chunkHTM2L3DTjs.BaseParent {
   /** @hidden */
-  __init3() {this.events = new (0, _chunkSGACFY53js.EventEmitter)()}
+  __init3() {this.events = new (0, _chunkHTM2L3DTjs.EventEmitter)()}
   constructor(props) {
     super(DEFAULT_PROPS, props, {
       onPropsUpdated: (oldProps) => this.events.processPropChanges(

package/dist/{chunk-YBBUC3QC.mjs → chunk-VJ3Q2HZJ.mjs}

@@ -1,7 +1,7 @@
 import {
   Base,
   EventEmitter
-} from "./chunk-RYR5I5FT.mjs";
+} from "./chunk-JKTEVA75.mjs";
 
 // src/backend/components/text-input.ts
 import * as proto from "@arcanejs/protocol/core";

package/dist/{chunk-6CWEURJP.js → chunk-VXNNW2KH.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } var _class;
 
-var _chunkSGACFY53js = require('./chunk-SGACFY53.js');
+var _chunkHTM2L3DTjs = require('./chunk-HTM2L3DT.js');
 
 // src/backend/components/timeline.ts
 var DEFAULT_PROPS = {
@@ -13,7 +13,7 @@ var DEFAULT_PROPS = {
   subtitles: null,
   source: null
 };
-var Timeline = (_class = class extends _chunkSGACFY53js.Base {
+var Timeline = (_class = class extends _chunkHTM2L3DTjs.Base {
   constructor(props) {
     super(DEFAULT_PROPS, props);_class.prototype.__init.call(this);;
   }

package/dist/{chunk-N6IHYBZH.mjs → chunk-XMP5XJWR.mjs}

@@ -1,6 +1,6 @@
 import {
   Base
-} from "./chunk-RYR5I5FT.mjs";
+} from "./chunk-JKTEVA75.mjs";
 
 // src/backend/components/rect.ts
 var DEFAULT_PROPS = {

package/dist/{chunk-CUZSHFDP.mjs → chunk-XYFDH3E7.mjs}

@@ -1,6 +1,6 @@
 import {
   Base
-} from "./chunk-RYR5I5FT.mjs";
+} from "./chunk-JKTEVA75.mjs";
 
 // src/backend/components/label.ts
 var Label = class extends Base {

package/dist/{chunk-K37TZB75.mjs → chunk-YN7LHBRI.mjs}

@@ -1,6 +1,6 @@
 import {
   Base
-} from "./chunk-RYR5I5FT.mjs";
+} from "./chunk-JKTEVA75.mjs";
 
 // src/backend/components/timeline.ts
 var DEFAULT_PROPS = {

package/dist/{chunk-DRQVYGTI.js → chunk-Z3HEU534.js}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
 
-var _chunkSGACFY53js = require('./chunk-SGACFY53.js');
+var _chunkHTM2L3DTjs = require('./chunk-HTM2L3DT.js');
 
 // src/backend/components/label.ts
-var Label = class extends _chunkSGACFY53js.Base {
+var Label = class extends _chunkHTM2L3DTjs.Base {
   constructor(props) {
     super({ text: null }, props);
   }

package/dist/{chunk-DG75CS7F.js → chunk-ZWYJEKZP.js}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } var _class;
 
 
-var _chunkSGACFY53js = require('./chunk-SGACFY53.js');
+var _chunkHTM2L3DTjs = require('./chunk-HTM2L3DT.js');
 
 // src/backend/components/button.ts
 var _core = require('@arcanejs/protocol/core'); var proto = _interopRequireWildcard(_core);
@@ -12,9 +12,9 @@ var DEFAULT_PROPS = {
   error: null,
   onClick: null
 };
-var Button = (_class = class extends _chunkSGACFY53js.Base {
+var Button = (_class = class extends _chunkHTM2L3DTjs.Base {
   /** @hidden */
-  __init() {this.events = new (0, _chunkSGACFY53js.EventEmitter)()}
+  __init() {this.events = new (0, _chunkHTM2L3DTjs.EventEmitter)()}
   constructor(props) {
     super(DEFAULT_PROPS, props, {
       onPropsUpdated: (oldProps) => this.events.processPropChanges(
@@ -56,20 +56,11 @@ var Button = (_class = class extends _chunkSGACFY53js.Base {
     };
   }}
   /** @hidden */
-  __init8() {this.handleMessage = (message, connection) => {
-    if (proto.isCoreComponentMessage(message, "button")) {
-      this.events.emit("click", connection).then(() => {
-        if (this.props.error) {
-          this.updateProps({
-            error: null
-          });
-        }
-      }).catch((e) => {
-        this.updateProps({
-          error: `${e}`
-        });
-      });
+  __init8() {this.handleCall = (call, connection) => {
+    if (proto.isCoreComponentCall(call, "press")) {
+      return this.events.emit("click", connection).then(() => true);
     }
+    throw new Error(`Unhandled call action: ${call.action}`);
   }}
 }, _class);
 

package/dist/frontend/entrypoint.js

@@ -26202,6 +26202,7 @@ body {
     })
   );
   var TOUCH_INDICATOR_CLASS = "touch-indicator";
+  var LOADING_CLASS = "loading";
   var TOUCHING_CLASS = "touching";
   var ERROR_CLASS = "error";
   var ButtonContents = dt.div`
@@ -26218,22 +26219,31 @@ body {
   padding: 0 4px;
 `;
   var Button = (props) => {
-    const { sendMessage } = import_react4.default.useContext(StageContext);
-    const { touching, handlers } = usePressable(
-      () => sendMessage?.({
-        type: "component-message",
-        namespace: "core",
-        componentKey: props.info.key,
-        component: "button"
-      })
-    );
-    const { state } = props.info;
+    const { call } = import_react4.default.useContext(StageContext);
+    const [localState, setLocalState] = import_react4.default.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__ */ (0, import_jsx_runtime3.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,
@@ -26264,7 +26274,7 @@ body {
     border-color: ${(p2) => p2.theme.colorRed};
   }
 
-  &.${TOUCHING_CLASS} {
+  &.${TOUCHING_CLASS}, &.${LOADING_CLASS} {
     ${buttonStateNormalActive}
 
     .${TOUCH_INDICATOR_CLASS} {
@@ -27469,6 +27479,10 @@ body {
     );
     const socket = (0, import_react15.useRef)(null);
     const uuid = (0, import_react15.useRef)(null);
+    const calls = (0, import_react15.useRef)({
+      nextId: 1,
+      calls: /* @__PURE__ */ new Map()
+    });
     const preparedRenderers = (0, import_react15.useMemo)(() => {
       const prepared = {};
       for (const renderer of renderers) {
@@ -27486,10 +27500,36 @@ body {
       },
       [preparedRenderers]
     );
-    (0, import_react15.useEffect)(() => {
-      initializeWebsocket();
+    const handleMessage = (0, import_react15.useCallback)((msg) => {
+      switch (msg.type) {
+        case "metadata":
+          uuid.current = msg.connectionUuid;
+          return;
+        case "tree-full":
+          setRoot(msg.root);
+          return;
+        case "tree-diff":
+          setRoot((prevRoot) => patchJson(prevRoot, msg.diff));
+          return;
+        case "call-response": {
+          const call2 = calls.current.calls.get(msg.requestId);
+          if (call2) {
+            calls.current.calls.delete(msg.requestId);
+            if (msg.success) {
+              call2.resolve(msg.returnValue);
+            } else {
+              call2.reject(msg.errorMessage);
+            }
+          } else {
+            console.warn(
+              `Received response for unknown call request ID ${msg.requestId}`
+            );
+          }
+          return;
+        }
+      }
     }, []);
-    const initializeWebsocket = async () => {
+    const initializeWebsocket = (0, import_react15.useCallback)(async () => {
       console.log("initializing websocket");
       const wsUrl = new URL(window.location.href);
       wsUrl.protocol = wsUrl.protocol === "https:" ? "wss:" : "ws:";
@@ -27513,29 +27553,42 @@ body {
         };
       });
       return ws;
-    };
-    const sendMessage = async (msg) => {
+    }, []);
+    const sendMessage = (0, import_react15.useCallback)(async (msg) => {
       (await (socket.current || initializeWebsocket())).send(JSON.stringify(msg));
-    };
-    const handleMessage = (msg) => {
-      switch (msg.type) {
-        case "metadata":
-          uuid.current = msg.connectionUuid;
-          return;
-        case "tree-full":
-          setRoot(msg.root);
-          return;
-        case "tree-diff":
-          setRoot((prevRoot) => patchJson(prevRoot, msg.diff));
-          return;
-      }
-    };
+    }, []);
+    const call = (0, import_react15.useCallback)(
+      async (msg) => {
+        const requestId = calls.current.nextId++;
+        const sendMsg = {
+          ...msg,
+          requestId
+        };
+        const promise = new Promise(
+          (resolve, reject) => {
+            calls.current.calls.set(requestId, {
+              resolve,
+              reject
+            });
+            (socket.current || initializeWebsocket()).then(
+              (s2) => s2.send(JSON.stringify(sendMsg))
+            );
+          }
+        );
+        return promise;
+      },
+      []
+    );
+    (0, import_react15.useEffect)(() => {
+      initializeWebsocket();
+    }, [initializeWebsocket]);
     return /* @__PURE__ */ import_react15.default.createElement(
       StageContext.Provider,
       {
         value: {
           sendMessage,
           renderComponent,
+          call,
           get connectionUuid() {
             if (!uuid.current) {
               throw new Error("Unexpected missing UUID");