@arcanejs/toolkit 6.0.1 → 7.0.0

package/dist/frontend/index.mjs

@@ -5,311 +5,38 @@ import { initialiseListeners } from "@arcanejs/toolkit-frontend/util";
 // src/frontend/stage.tsx
 import { patchJson } from "@arcanejs/diff";
 import {
-  useState as useState3,
+  useState,
   useRef,
   useCallback,
-  useEffect as useEffect2,
+  useEffect,
   useMemo
 } from "react";
-import { styled } from "styled-components";
-import {
-  BaseStyle as BaseStyle2,
-  GlobalStyle as GlobalStyle2,
-  DARK_THEME as DARK_THEME2,
-  LIGHT_THEME as LIGHT_THEME2
-} from "@arcanejs/toolkit-frontend/styling";
+import { ThemeRoot } from "@arcanejs/toolkit-frontend/styling";
 import {
   GroupStateWrapper,
   StageContext
 } from "@arcanejs/toolkit-frontend";
-
-// ../toolkit-frontend/src/styling.tsx
-import {
-  createGlobalStyle,
-  css,
-  ThemeProvider
-} from "styled-components";
-
-// ../toolkit-frontend/src/util/index.ts
-import { useEffect, useState as useState2 } from "react";
-
-// ../toolkit-frontend/src/util/touch.ts
-import { useState } from "react";
-
-// ../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] = 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") {
-      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
+import { calculateClass } from "@arcanejs/toolkit-frontend/util";
 import { jsx } from "react/jsx-runtime";
-var GlobalStyle = 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 = createGlobalStyle`
-* {
-  box-sizing: border-box;
-}
-
-body {
-  background: ${(p) => p.theme.pageBg};
-  margin: 0;
-  padding: 0;
-  font-size: 14px;
-  font-family: sans-serif;
-}
-`;
-var buttonStateNormal = 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 = 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 = 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 = 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 = 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 = css`
-  ${buttonStateNormal}
-
-  cursor: default;
-  background: ${(p) => p.theme.bg} !important;
-  color: rgba(${(p) => p.theme.textNormal}, 0.4);
-`;
-var button = 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 = css`
-  ${buttonStatePressed}
-
-  &:hover {
-    ${buttonStatePressedHover}
-  }
-
-  &:active {
-    ${buttonStatePressedActive}
-  }
-`;
-var buttonDisabled = css`
-  ${buttonStateDisabled}
-
-  &:hover, &:active {
-    ${buttonStateDisabled}
-  }
-`;
-var touchIndicatorNormal = 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 = 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__ */ jsx(ThemeProvider, { theme: theme === "dark" ? dark : light, children });
-};
-
-// src/frontend/stage.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var Stage = ({ className, renderers }) => {
-  const [root, setRoot] = useState3(
+var Stage = ({ className, renderers, loadingState }) => {
+  const [root, setRoot] = useState(
     void 0
   );
   const socket = useRef(null);
-  const [connection, setConnection] = useState3({
+  const [connection, setConnection] = useState({
     state: "connecting"
   });
+  const [clockSync, setClockSync] = useState(null);
+  const [lastPingMs, setLastPingMs] = useState(null);
+  const [bestPing, setBestPing] = useState(null);
   const calls = useRef({
     nextId: 1,
     calls: /* @__PURE__ */ new Map()
   });
+  const pings = useRef({
+    nextId: 1,
+    pings: /* @__PURE__ */ new Map()
+  });
   const preparedRenderers = useMemo(() => {
     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 = useCallback(async () => {
@@ -417,9 +171,39 @@ var Stage = ({ className, renderers }) => {
     },
     []
   );
-  useEffect2(() => {
+  useEffect(() => {
     initializeWebsocket();
   }, [initializeWebsocket]);
+  useEffect(() => {
+    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 = useMemo(
     () => ({
       sendMessage,
@@ -427,32 +211,30 @@ var Stage = ({ className, renderers }) => {
       call,
       connectionUuid: connection.state === "connected" ? connection.uuid : null,
       connection,
+      timeDifferenceMs: bestPing?.timeDifferenceMs ?? null,
+      lastPingMs,
       reconnect: () => void initializeWebsocket()
     }),
-    [sendMessage, renderComponent, call, initializeWebsocket, connection]
+    [
+      sendMessage,
+      renderComponent,
+      call,
+      initializeWebsocket,
+      connection,
+      bestPing,
+      lastPingMs
+    ]
   );
-  return /* @__PURE__ */ jsx2(StageContext.Provider, { value: stageContext, children: /* @__PURE__ */ jsx2(GroupStateWrapper, { openByDefault: false, children: /* @__PURE__ */ jsx2("div", { className, children: root ? renderComponent(root) : /* @__PURE__ */ jsx2("div", { className: "no-root", children: "No root has been added to the light desk" }) }) }) });
+  return /* @__PURE__ */ jsx(StageContext.Provider, { value: stageContext, children: /* @__PURE__ */ jsx(GroupStateWrapper, { openByDefault: false, children: /* @__PURE__ */ jsx("div", { className, children: root ? renderComponent(root) : loadingState?.() ?? /* @__PURE__ */ jsx("div", { className: "arcane-stage__no-root", children: "No root has been added to the light desk" }) }) }) });
 };
-var StyledStage = styled(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__ */ jsxs(
-    PreferredThemeProvider,
+  return /* @__PURE__ */ jsx(ThemeRoot, { rootProps: props.themeRootProps, children: /* @__PURE__ */ jsx(
+    Stage,
     {
-      dark: props.themes?.dark ?? DARK_THEME2,
-      light: props.themes?.light ?? LIGHT_THEME2,
-      children: [
-        /* @__PURE__ */ jsx2(BaseStyle2, {}),
-        /* @__PURE__ */ jsx2(GlobalStyle2, {}),
-        /* @__PURE__ */ jsx2(StyledStage, { ...props })
-      ]
+      ...props,
+      className: calculateClass("arcane-stage", props.className)
     }
-  );
+  ) });
 }
 
 // src/frontend/index.ts

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-export { A as AnyComponent, B as Button, G as Group, e as GroupHeader, T as Toolkit, a as ToolkitConnection, d as ToolkitOptions, c as ToolkitServerListener, b as ToolkitServerListenerOptions } from './toolkit-CohVRj6u.mjs';
+export { A as AnyComponent, B as Button, G as Group, l as GroupHeader, T as Toolkit, e as ToolkitAdditionalFiles, f as ToolkitClockSyncOptions, a as ToolkitConnection, g as ToolkitCoreAssetRelativePath, h as ToolkitHtmlPageContext, i as ToolkitOptions, b as ToolkitRenderContext, d as ToolkitServerListener, c as ToolkitServerListenerOptions, j as ToolkitStaticFile, k as ToolkitStaticFileResolver } from './toolkit-BPqxbDbk.mjs';
 export { Label } from './backend/components/label.mjs';
 export { Rect } from './backend/components/rect.mjs';
 export { SliderButton } from './backend/components/slider-button.mjs';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { A as AnyComponent, B as Button, G as Group, e as GroupHeader, T as Toolkit, a as ToolkitConnection, d as ToolkitOptions, c as ToolkitServerListener, b as ToolkitServerListenerOptions } from './toolkit-C_2Y8N9R.js';
+export { A as AnyComponent, B as Button, G as Group, l as GroupHeader, T as Toolkit, e as ToolkitAdditionalFiles, f as ToolkitClockSyncOptions, a as ToolkitConnection, g as ToolkitCoreAssetRelativePath, h as ToolkitHtmlPageContext, i as ToolkitOptions, b as ToolkitRenderContext, d as ToolkitServerListener, c as ToolkitServerListenerOptions, j as ToolkitStaticFile, k as ToolkitStaticFileResolver } from './toolkit-Bglbv3ix.js';
 export { Label } from './backend/components/label.js';
 export { Rect } from './backend/components/rect.js';
 export { SliderButton } from './backend/components/slider-button.js';