@arcanejs/toolkit 2.0.0 → 3.0.0

package/dist/frontend/index.js

@@ -16,9 +16,235 @@ 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 usePreferredColorScheme = () => {
+  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 theme;
+};
+
+// ../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 }) => {
   const [root, setRoot] = _react.useState.call(void 0, 
     void 0
@@ -106,15 +332,15 @@ var Stage = ({ className, renderers }) => {
 var StyledStage = _styledcomponents.styled.call(void 0, Stage)`
   width: 100%;
   height: 100%;
-  background-color: #333;
-  color: ${_styling.THEME.textNormal};
-  padding: ${_styling.THEME.sizingPx.spacing}px;
+  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, _jsxruntime.Fragment, { children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PreferredThemeProvider, { dark: _styling.DARK_THEME, 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, _styledcomponents.ThemeProvider, { theme: _styling.THEME, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledStage, { ...props }) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledStage, { ...props })
   ] });
 }
 

package/dist/frontend/index.mjs

@@ -5,22 +5,248 @@ import { initialiseListeners } from "@arcanejs/toolkit-frontend/util";
 // src/frontend/stage.tsx
 import { patchJson } from "@arcanejs/diff";
 import {
-  useState,
+  useState as useState3,
   useRef,
   useCallback,
-  useEffect,
+  useEffect as useEffect2,
   useMemo
 } from "react";
-import { styled, ThemeProvider } from "styled-components";
+import { styled } from "styled-components";
 import {
-  BaseStyle,
-  GlobalStyle,
-  THEME
+  BaseStyle as BaseStyle2,
+  GlobalStyle as GlobalStyle2,
+  DARK_THEME as DARK_THEME2,
+  LIGHT_THEME as LIGHT_THEME2
 } from "@arcanejs/toolkit-frontend/styling";
 import { GroupStateWrapper, StageContext } from "@arcanejs/toolkit-frontend";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+// ../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 usePreferredColorScheme = () => {
+  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 theme;
+};
+
+// ../toolkit-frontend/src/styling.tsx
+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] = useState(
+  const [root, setRoot] = useState3(
     void 0
   );
   const socket = useRef(null);
@@ -42,7 +268,7 @@ var Stage = ({ className, renderers }) => {
     },
     [preparedRenderers]
   );
-  useEffect(() => {
+  useEffect2(() => {
     initializeWebsocket();
   }, []);
   const initializeWebsocket = async () => {
@@ -86,7 +312,7 @@ var Stage = ({ className, renderers }) => {
         return;
     }
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     StageContext.Provider,
     {
       value: {
@@ -99,22 +325,22 @@ var Stage = ({ className, renderers }) => {
           return uuid.current;
         }
       },
-      children: /* @__PURE__ */ jsx(GroupStateWrapper, { openByDefault: false, children: /* @__PURE__ */ jsx("div", { className, children: root ? renderComponent(root) : /* @__PURE__ */ jsx("div", { className: "no-root", children: "No root has been added to the light desk" }) }) })
+      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" }) }) })
     }
   );
 };
 var StyledStage = styled(Stage)`
   width: 100%;
   height: 100%;
-  background-color: #333;
-  color: ${THEME.textNormal};
-  padding: ${THEME.sizingPx.spacing}px;
+  background-color: ${(p) => p.theme.pageBg};
+  color: ${(p) => p.theme.textNormal};
+  padding: ${(p) => p.theme.sizingPx.spacing}px;
 `;
 function rootComponent(props) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(BaseStyle, {}),
-    /* @__PURE__ */ jsx(GlobalStyle, {}),
-    /* @__PURE__ */ jsx(ThemeProvider, { theme: THEME, children: /* @__PURE__ */ jsx(StyledStage, { ...props }) })
+  return /* @__PURE__ */ jsxs(PreferredThemeProvider, { dark: DARK_THEME2, light: LIGHT_THEME2, children: [
+    /* @__PURE__ */ jsx2(BaseStyle2, {}),
+    /* @__PURE__ */ jsx2(GlobalStyle2, {}),
+    /* @__PURE__ */ jsx2(StyledStage, { ...props })
   ] });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcanejs/toolkit",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "private": false,
   "description": "Build web-accessible control interfaces for your long-running Node.js processes",
   "keywords": [
@@ -115,7 +115,7 @@
     "tsup": "^8.1.0",
     "typescript": "^5.3.3",
     "@arcanejs/eslint-config": "^0.0.0",
-    "@arcanejs/toolkit-frontend": "^0.4.0",
+    "@arcanejs/toolkit-frontend": "^0.5.0",
     "@arcanejs/typescript-config": "^0.0.0"
   },
   "dependencies": {
@@ -132,7 +132,7 @@
     "react": "^18",
     "react-dom": "18.3.1",
     "styled-components": "^6.1.13",
-    "@arcanejs/toolkit-frontend": "^0.4.0"
+    "@arcanejs/toolkit-frontend": "^0.5.0"
   },
   "peerDependenciesMeta": {
     "@arcanejs/toolkit-frontend": {