@arcanejs/toolkit 4.1.0 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/frontend/entrypoint.js +54 -4
  2. package/dist/frontend/entrypoint.js.map +4 -4
  3. package/dist/frontend/index.js +51 -1
  4. package/dist/frontend/index.mjs +51 -1
  5. package/package.json +3 -3
package/dist/frontend/index.js CHANGED
@@ -34,7 +34,57 @@ var _toolkitfrontend = require('@arcanejs/toolkit-frontend');
34
34
 
35
35
 
36
36
  // ../toolkit-frontend/src/util/index.ts
37
+ var COLOR_SCHEME_SETTINGS = "arcane-color-scheme-preference";
38
+ var VALID_COLOR_SCHEME_PREFS = ["auto", "dark", "light"];
39
+ var isValidColorSchemePreference = (value) => {
40
+ return VALID_COLOR_SCHEME_PREFS.includes(value);
41
+ };
42
+ var useColorSchemePreferences = () => {
43
+ if (typeof window === "undefined") {
44
+ return {
45
+ colorSchemePreference: "auto",
46
+ setColorSchemePreference: () => {
47
+ }
48
+ };
49
+ }
50
+ const [preference, setPreference] = _react.useState.call(void 0,
51
+ window.localStorage.getItem(
52
+ COLOR_SCHEME_SETTINGS
53
+ ) || "auto"
54
+ );
55
+ const setColorSchemePreference = (newPreference) => {
56
+ if (!isValidColorSchemePreference(newPreference)) {
57
+ throw new Error(`Invalid color scheme preference: ${newPreference}`);
58
+ }
59
+ window.localStorage.setItem(COLOR_SCHEME_SETTINGS, newPreference);
60
+ window.dispatchEvent(
61
+ new StorageEvent("storage", {
62
+ key: COLOR_SCHEME_SETTINGS,
63
+ newValue: newPreference
64
+ })
65
+ );
66
+ };
67
+ _react.useEffect.call(void 0, () => {
68
+ const onStorageChange = (event) => {
69
+ if (event.key === COLOR_SCHEME_SETTINGS) {
70
+ const newValue = event.newValue;
71
+ if (isValidColorSchemePreference(newValue)) {
72
+ setPreference(newValue);
73
+ }
74
+ }
75
+ };
76
+ window.addEventListener("storage", onStorageChange);
77
+ return () => {
78
+ window.removeEventListener("storage", onStorageChange);
79
+ };
80
+ }, []);
81
+ return {
82
+ colorSchemePreference: isValidColorSchemePreference(preference) ? preference : "auto",
83
+ setColorSchemePreference
84
+ };
85
+ };
37
86
  var usePreferredColorScheme = () => {
87
+ const { colorSchemePreference } = useColorSchemePreferences();
38
88
  const [theme, setTheme] = _react.useState.call(void 0, "light");
39
89
  _react.useEffect.call(void 0, () => {
40
90
  if (typeof window !== "undefined") {
@@ -49,7 +99,7 @@ var usePreferredColorScheme = () => {
49
99
  };
50
100
  }
51
101
  }, []);
52
- return theme;
102
+ return colorSchemePreference === "auto" ? theme : colorSchemePreference;
53
103
  };
54
104
 
55
105
  // ../toolkit-frontend/src/styling.tsx
package/dist/frontend/index.mjs CHANGED
@@ -34,7 +34,57 @@ import { useEffect, useState as useState2 } from "react";
34
34
  import { useState } from "react";
35
35
 
36
36
  // ../toolkit-frontend/src/util/index.ts
37
+ var COLOR_SCHEME_SETTINGS = "arcane-color-scheme-preference";
38
+ var VALID_COLOR_SCHEME_PREFS = ["auto", "dark", "light"];
39
+ var isValidColorSchemePreference = (value) => {
40
+ return VALID_COLOR_SCHEME_PREFS.includes(value);
41
+ };
42
+ var useColorSchemePreferences = () => {
43
+ if (typeof window === "undefined") {
44
+ return {
45
+ colorSchemePreference: "auto",
46
+ setColorSchemePreference: () => {
47
+ }
48
+ };
49
+ }
50
+ const [preference, setPreference] = useState2(
51
+ window.localStorage.getItem(
52
+ COLOR_SCHEME_SETTINGS
53
+ ) || "auto"
54
+ );
55
+ const setColorSchemePreference = (newPreference) => {
56
+ if (!isValidColorSchemePreference(newPreference)) {
57
+ throw new Error(`Invalid color scheme preference: ${newPreference}`);
58
+ }
59
+ window.localStorage.setItem(COLOR_SCHEME_SETTINGS, newPreference);
60
+ window.dispatchEvent(
61
+ new StorageEvent("storage", {
62
+ key: COLOR_SCHEME_SETTINGS,
63
+ newValue: newPreference
64
+ })
65
+ );
66
+ };
67
+ useEffect(() => {
68
+ const onStorageChange = (event) => {
69
+ if (event.key === COLOR_SCHEME_SETTINGS) {
70
+ const newValue = event.newValue;
71
+ if (isValidColorSchemePreference(newValue)) {
72
+ setPreference(newValue);
73
+ }
74
+ }
75
+ };
76
+ window.addEventListener("storage", onStorageChange);
77
+ return () => {
78
+ window.removeEventListener("storage", onStorageChange);
79
+ };
80
+ }, []);
81
+ return {
82
+ colorSchemePreference: isValidColorSchemePreference(preference) ? preference : "auto",
83
+ setColorSchemePreference
84
+ };
85
+ };
37
86
  var usePreferredColorScheme = () => {
87
+ const { colorSchemePreference } = useColorSchemePreferences();
38
88
  const [theme, setTheme] = useState2("light");
39
89
  useEffect(() => {
40
90
  if (typeof window !== "undefined") {
@@ -49,7 +99,7 @@ var usePreferredColorScheme = () => {
49
99
  };
50
100
  }
51
101
  }, []);
52
- return theme;
102
+ return colorSchemePreference === "auto" ? theme : colorSchemePreference;
53
103
  };
54
104
 
55
105
  // ../toolkit-frontend/src/styling.tsx
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcanejs/toolkit",
3
- "version": "4.1.0",
3
+ "version": "5.0.0",
4
4
  "private": false,
5
5
  "description": "Build web-accessible control interfaces for your long-running Node.js processes",
6
6
  "keywords": [
@@ -114,8 +114,8 @@
114
114
  "styled-components": "^6.1.13",
115
115
  "tsup": "^8.1.0",
116
116
  "typescript": "^5.3.3",
117
+ "@arcanejs/toolkit-frontend": "^0.8.0",
117
118
  "@arcanejs/eslint-config": "^0.0.0",
118
- "@arcanejs/toolkit-frontend": "^0.7.0",
119
119
  "@arcanejs/typescript-config": "^0.0.0"
120
120
  },
121
121
  "dependencies": {
@@ -132,7 +132,7 @@
132
132
  "react": "^18",
133
133
  "react-dom": "18.3.1",
134
134
  "styled-components": "^6.1.13",
135
- "@arcanejs/toolkit-frontend": "^0.7.0"
135
+ "@arcanejs/toolkit-frontend": "^0.8.0"
136
136
  },
137
137
  "peerDependenciesMeta": {
138
138
  "@arcanejs/toolkit-frontend": {