@arcanejs/toolkit 6.0.0 → 7.0.0

package/dist/frontend/index.d.mts

@@ -1,16 +1,14 @@
-import { Theme } from '@arcanejs/toolkit-frontend/styling';
+import React, { ReactNode } from 'react';
 import { FrontendComponentRenderers } from '@arcanejs/toolkit-frontend/types';
 
 type Props = {
     className?: string;
     renderers: FrontendComponentRenderers;
-    themes?: {
-        dark: Theme;
-        light: Theme;
-    };
+    themeRootProps?: React.HTMLAttributes<HTMLDivElement>;
+    loadingState?: () => ReactNode;
 };
 
-type ArcaneFrontendOptions = Pick<Props, 'renderers' | 'themes'>;
+type ArcaneFrontendOptions = Pick<Props, 'renderers' | 'themeRootProps' | 'loadingState'>;
 declare const startArcaneFrontend: (opts: ArcaneFrontendOptions) => void;
 
 export { type ArcaneFrontendOptions, startArcaneFrontend };

package/dist/frontend/index.d.ts

@@ -1,16 +1,14 @@
-import { Theme } from '@arcanejs/toolkit-frontend/styling';
+import React, { ReactNode } from 'react';
 import { FrontendComponentRenderers } from '@arcanejs/toolkit-frontend/types';
 
 type Props = {
     className?: string;
     renderers: FrontendComponentRenderers;
-    themes?: {
-        dark: Theme;
-        light: Theme;
-    };
+    themeRootProps?: React.HTMLAttributes<HTMLDivElement>;
+    loadingState?: () => ReactNode;
 };
 
-type ArcaneFrontendOptions = Pick<Props, 'renderers' | 'themes'>;
+type ArcaneFrontendOptions = Pick<Props, 'renderers' | 'themeRootProps' | 'loadingState'>;
 declare const startArcaneFrontend: (opts: ArcaneFrontendOptions) => void;
 
 export { type ArcaneFrontendOptions, startArcaneFrontend };

package/dist/frontend/index.js

@@ -11,294 +11,14 @@ var _diff = require('@arcanejs/diff');
 
 
 var _react = require('react');
-var _styledcomponents = require('styled-components');
-
-
-
-
-
 var _styling = require('@arcanejs/toolkit-frontend/styling');
 
 
 
 var _toolkitfrontend = require('@arcanejs/toolkit-frontend');
 
-// ../toolkit-frontend/src/styling.tsx
-
-
-
-
-
-
-// ../toolkit-frontend/src/util/index.ts
-
-
-// ../toolkit-frontend/src/util/touch.ts
-
-
-// ../toolkit-frontend/src/util/index.ts
-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") {
-      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 colorSchemePreference === "auto" ? theme : colorSchemePreference;
-};
-
-// ../toolkit-frontend/src/styling.tsx
 var _jsxruntime = require('react/jsx-runtime');
-var GlobalStyle = _styledcomponents.createGlobalStyle`
-body {
-  &.touch-mode * {
-    cursor: none !important;
-  }
-}
-`;
-var DARK_THEME = {
-  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_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 = _styledcomponents.createGlobalStyle`
-* {
-  box-sizing: border-box;
-}
-
-body {
-  background: ${(p) => p.theme.pageBg};
-  margin: 0;
-  padding: 0;
-  font-size: 14px;
-  font-family: sans-serif;
-}
-`;
-var buttonStateNormal = _styledcomponents.css`
-  color: ${(p) => p.theme.textNormal};
-  background: ${(p) => p.theme.gradients.button};
-  text-shadow: ${(p) => p.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 buttonStateNormalHover = _styledcomponents.css`
-  color: ${(p) => p.theme.textNormal};
-  outline-color: rgba(243, 243, 245, 0.3);
-  background: ${(p) => p.theme.gradients.buttonHover};
-  text-shadow: ${(p) => p.theme.shadows.textShadow};
-`;
-var buttonStateNormalActive = _styledcomponents.css`
-  color: ${(p) => p.theme.textNormal};
-  outline-color: rgba(255, 255, 255, 0.3);
-  background: ${(p) => p.theme.gradients.buttonActive};
-  text-shadow: ${(p) => p.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 buttonStatePressed = _styledcomponents.css`
-  ${buttonStateNormalActive}
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255,255,255,0.15);
-`;
-var buttonStatePressedHover = _styledcomponents.css`
-  ${buttonStateNormalActive}
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255,255,255,0.15);
-  background: ${(p) => p.theme.gradients.buttonPressedHover};
-`;
-var buttonStatePressedActive = buttonStateNormalActive;
-var buttonStateDisabled = _styledcomponents.css`
-  ${buttonStateNormal}
-
-  cursor: default;
-  background: ${(p) => p.theme.bg} !important;
-  color: rgba(${(p) => p.theme.textNormal}, 0.4);
-`;
-var button = _styledcomponents.css`
-  position: relative;
-  box-sizing: border-box;
-  cursor: pointer;
-  transition: all 200ms;
-  border-radius: 3px;
-  border: 1px solid ${(p) => p.theme.borderDark};
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  outline-color: transparent;
-  ${buttonStateNormal}
-
-  &:hover {
-    ${buttonStateNormalHover}
-  }
-
-  &:active {
-    ${buttonStateNormalActive}
-  }
-`;
-var buttonPressed = _styledcomponents.css`
-  ${buttonStatePressed}
-
-  &:hover {
-    ${buttonStatePressedHover}
-  }
-
-  &:active {
-    ${buttonStatePressedActive}
-  }
-`;
-var buttonDisabled = _styledcomponents.css`
-  ${buttonStateDisabled}
-
-  &:hover, &:active {
-    ${buttonStateDisabled}
-  }
-`;
-var touchIndicatorNormal = _styledcomponents.css`
-  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 touchIndicatorTouching = _styledcomponents.css`
-  border-color: ${(p) => p.theme.hint};
-  background-color: rgba(${(p) => p.theme.hintRGB}, 0.2);
-  transition: border-color 0s;
-`;
-var PreferredThemeProvider = ({ dark, light, children }) => {
-  const theme = usePreferredColorScheme();
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _styledcomponents.ThemeProvider, { theme: theme === "dark" ? dark : light, children });
-};
-
-// src/frontend/stage.tsx
-
-var Stage = ({ className, renderers }) => {
+var Stage = ({ className, renderers, loadingState }) => {
   const [root, setRoot] = _react.useState.call(void 0, 
     void 0
   );
@@ -306,10 +26,17 @@ var Stage = ({ className, renderers }) => {
   const [connection, setConnection] = _react.useState.call(void 0, {
     state: "connecting"
   });
+  const [clockSync, setClockSync] = _react.useState.call(void 0, null);
+  const [lastPingMs, setLastPingMs] = _react.useState.call(void 0, null);
+  const [bestPing, setBestPing] = _react.useState.call(void 0, null);
   const calls = _react.useRef.call(void 0, {
     nextId: 1,
     calls: /* @__PURE__ */ new Map()
   });
+  const pings = _react.useRef.call(void 0, {
+    nextId: 1,
+    pings: /* @__PURE__ */ new Map()
+  });
   const preparedRenderers = _react.useMemo.call(void 0, () => {
     const prepared = {};
     for (const renderer of renderers) {
@@ -331,6 +58,7 @@ var Stage = ({ className, renderers }) => {
     switch (msg.type) {
       case "metadata":
         setConnection({ state: "connected", uuid: msg.connectionUuid });
+        setClockSync(msg.clockSync);
         return;
       case "tree-full":
         setRoot(msg.root);
@@ -354,6 +82,32 @@ var Stage = ({ className, renderers }) => {
         }
         return;
       }
+      case "pong": {
+        const ping = pings.current.pings.get(msg.pingId);
+        if (!ping) {
+          console.warn(
+            `Received pong response for unknown ping ID ${msg.pingId}`
+          );
+          return;
+        }
+        pings.current.pings.delete(msg.pingId);
+        const roundTripMs = performance.now() - ping.sentAtPerfMs;
+        const estimatedClientMidpointMs = ping.sentAtUnixMs + roundTripMs / 2;
+        const nextTimeDifferenceMs = estimatedClientMidpointMs - msg.serverTimeMillis;
+        setLastPingMs(roundTripMs);
+        setBestPing(
+          (current) => (
+            // No best ping yet
+            current === null || // Better ping than current best, so this will likely be more precise
+            roundTripMs < current.pingMs || // Time difference has changed significantly, so this is likely more accurate even if ping isn't better
+            Math.abs(nextTimeDifferenceMs - current.timeDifferenceMs) > roundTripMs ? {
+              pingMs: roundTripMs,
+              timeDifferenceMs: nextTimeDifferenceMs
+            } : current
+          )
+        );
+        return;
+      }
     }
   }, []);
   const initializeWebsocket = _react.useCallback.call(void 0, async () => {
@@ -364,6 +118,7 @@ var Stage = ({ className, renderers }) => {
     console.log("initializing websocket");
     const wsUrl = new URL(window.location.href);
     wsUrl.protocol = wsUrl.protocol === "https:" ? "wss:" : "ws:";
+    wsUrl.hash = "";
     const ws = new WebSocket(wsUrl.href);
     ws.onmessage = (event) => {
       handleMessage(JSON.parse(event.data));
@@ -419,6 +174,36 @@ var Stage = ({ className, renderers }) => {
   _react.useEffect.call(void 0, () => {
     initializeWebsocket();
   }, [initializeWebsocket]);
+  _react.useEffect.call(void 0, () => {
+    if (connection.state !== "connected" && clockSync !== null) {
+      setClockSync(null);
+    }
+    setLastPingMs(null);
+    setBestPing(null);
+    pings.current.pings.clear();
+    if (connection.state !== "connected" || clockSync === null) {
+      return;
+    }
+    const sendPing = () => {
+      const pingId = pings.current.nextId++;
+      pings.current.pings.set(pingId, {
+        sentAtUnixMs: Date.now(),
+        sentAtPerfMs: performance.now()
+      });
+      sendMessage({
+        type: "ping",
+        pingId
+      }).catch((error) => {
+        pings.current.pings.delete(pingId);
+        console.error("Unable to send ping", error);
+      });
+    };
+    sendPing();
+    const interval = window.setInterval(sendPing, clockSync.pingIntervalMs);
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [clockSync, connection.state, sendMessage]);
   const stageContext = _react.useMemo.call(void 0, 
     () => ({
       sendMessage,
@@ -426,32 +211,30 @@ var Stage = ({ className, renderers }) => {
       call,
       connectionUuid: connection.state === "connected" ? connection.uuid : null,
       connection,
+      timeDifferenceMs: _nullishCoalesce(_optionalChain([bestPing, 'optionalAccess', _ => _.timeDifferenceMs]), () => ( null)),
+      lastPingMs,
       reconnect: () => void initializeWebsocket()
     }),
-    [sendMessage, renderComponent, call, initializeWebsocket, connection]
+    [
+      sendMessage,
+      renderComponent,
+      call,
+      initializeWebsocket,
+      connection,
+      bestPing,
+      lastPingMs
+    ]
   );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _toolkitfrontend.StageContext.Provider, { value: stageContext, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _toolkitfrontend.GroupStateWrapper, { openByDefault: false, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className, children: root ? renderComponent(root) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "no-root", children: "No root has been added to the light desk" }) }) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _toolkitfrontend.StageContext.Provider, { value: stageContext, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _toolkitfrontend.GroupStateWrapper, { openByDefault: false, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className, children: root ? renderComponent(root) : _nullishCoalesce(_optionalChain([loadingState, 'optionalCall', _2 => _2()]), () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "arcane-stage__no-root", children: "No root has been added to the light desk" }))) }) }) });
 };
-var StyledStage = _styledcomponents.styled.call(void 0, Stage)`
-  width: 100%;
-  height: 100%;
-  background-color: ${(p) => p.theme.pageBg};
-  color: ${(p) => p.theme.textNormal};
-  padding: ${(p) => p.theme.sizingPx.spacing}px;
-`;
 function rootComponent(props) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    PreferredThemeProvider,
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _styling.ThemeRoot, { rootProps: props.themeRootProps, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Stage,
     {
-      dark: _nullishCoalesce(_optionalChain([props, 'access', _ => _.themes, 'optionalAccess', _2 => _2.dark]), () => ( _styling.DARK_THEME)),
-      light: _nullishCoalesce(_optionalChain([props, 'access', _3 => _3.themes, 'optionalAccess', _4 => _4.light]), () => ( _styling.LIGHT_THEME)),
-      children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _styling.BaseStyle, {}),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _styling.GlobalStyle, {}),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledStage, { ...props })
-      ]
+      ...props,
+      className: _util.calculateClass.call(void 0, "arcane-stage", props.className)
     }
-  );
+  ) });
 }
 
 // src/frontend/index.ts