@arcanejs/toolkit-frontend 0.10.0 → 0.12.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 (17) hide show
  1. package/dist/{chunk-LXNJPBVT.js → chunk-BBUHASWZ.js} +2 -2
  2. package/dist/{chunk-TOVGDMHN.mjs → chunk-DK4BAXVE.mjs} +1 -1
  3. package/dist/{chunk-GBYIEWGN.js → chunk-R7E6SIN6.js} +40 -2
  4. package/dist/{chunk-2HBLGAG3.mjs → chunk-SNIL7DDI.mjs} +40 -2
  5. package/dist/components/core/index.js +3 -3
  6. package/dist/components/core/index.mjs +2 -2
  7. package/dist/components/index.d.mts +6 -1
  8. package/dist/components/index.d.ts +6 -1
  9. package/dist/components/index.js +89 -58
  10. package/dist/components/index.mjs +48 -17
  11. package/dist/styling.js +3 -3
  12. package/dist/styling.mjs +1 -1
  13. package/dist/util/index.d.mts +17 -3
  14. package/dist/util/index.d.ts +17 -3
  15. package/dist/util/index.js +4 -2
  16. package/dist/util/index.mjs +3 -1
  17. package/package.json +5 -5
package/dist/{chunk-LXNJPBVT.js → chunk-BBUHASWZ.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
- var _chunkGBYIEWGNjs = require('./chunk-GBYIEWGN.js');
3
+ var _chunkR7E6SIN6js = require('./chunk-R7E6SIN6.js');
4
4
 
5
5
 
6
6
  var _chunkMLKGABMKjs = require('./chunk-MLKGABMK.js');
@@ -22,7 +22,7 @@ var Icon = ({
22
22
  }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
23
23
  "span",
24
24
  {
25
- className: _chunkGBYIEWGNjs.cn.call(void 0,
25
+ className: _chunkR7E6SIN6js.cn.call(void 0,
26
26
  `
27
27
  inline-block text-arcane-icon leading-none font-normal tracking-normal
28
28
  whitespace-nowrap
package/dist/{chunk-TOVGDMHN.mjs → chunk-DK4BAXVE.mjs} RENAMED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  cn
3
- } from "./chunk-2HBLGAG3.mjs";
3
+ } from "./chunk-SNIL7DDI.mjs";
4
4
  import {
5
5
  __export
6
6
  } from "./chunk-7P6ASYW6.mjs";
package/dist/{chunk-GBYIEWGN.js → chunk-R7E6SIN6.js} RENAMED
@@ -37,12 +37,49 @@ var usePressable = (click) => {
37
37
  if (touching) {
38
38
  event.preventDefault();
39
39
  setTouching(false);
40
- click();
40
+ click(event);
41
41
  }
42
42
  }
43
43
  }
44
44
  };
45
45
  };
46
+ var useLongPressable = ({
47
+ onPress,
48
+ onRelease
49
+ }) => {
50
+ const [touching, setTouching] = _react.useState.call(void 0, false);
51
+ return _react.useMemo.call(void 0,
52
+ () => ({
53
+ touching,
54
+ handlers: {
55
+ onTouchStart: (e) => {
56
+ setTouching(true);
57
+ onPress(e);
58
+ },
59
+ onMouseDown: (e) => {
60
+ setTouching(true);
61
+ onPress(e);
62
+ },
63
+ onMouseUp: (e) => {
64
+ setTouching(false);
65
+ onRelease(e);
66
+ },
67
+ onTouchMove: (e) => {
68
+ setTouching(false);
69
+ onRelease(e);
70
+ },
71
+ onTouchEnd: (event) => {
72
+ if (touching) {
73
+ event.preventDefault();
74
+ setTouching(false);
75
+ onRelease(event);
76
+ }
77
+ }
78
+ }
79
+ }),
80
+ [touching, onRelease, onPress]
81
+ );
82
+ };
46
83
  function trackTouch(touch, move, end) {
47
84
  const touchMove = (ev) => {
48
85
  ev.preventDefault();
@@ -149,4 +186,5 @@ var usePreferredColorScheme = () => {
149
186
 
150
187
 
151
188
 
152
- exports.switchToMouseMode = switchToMouseMode; exports.switchToTouchMode = switchToTouchMode; exports.initialiseListeners = initialiseListeners; exports.usePressable = usePressable; exports.trackTouch = trackTouch; exports.cn = cn; exports.calculateClass = calculateClass; exports.VALID_COLOR_SCHEME_PREFS = VALID_COLOR_SCHEME_PREFS; exports.useColorSchemePreferences = useColorSchemePreferences; exports.usePreferredColorScheme = usePreferredColorScheme;
189
+
190
+ exports.switchToMouseMode = switchToMouseMode; exports.switchToTouchMode = switchToTouchMode; exports.initialiseListeners = initialiseListeners; exports.usePressable = usePressable; exports.useLongPressable = useLongPressable; exports.trackTouch = trackTouch; exports.cn = cn; exports.calculateClass = calculateClass; exports.VALID_COLOR_SCHEME_PREFS = VALID_COLOR_SCHEME_PREFS; exports.useColorSchemePreferences = useColorSchemePreferences; exports.usePreferredColorScheme = usePreferredColorScheme;
package/dist/{chunk-2HBLGAG3.mjs → chunk-SNIL7DDI.mjs} RENAMED
@@ -4,7 +4,7 @@ import { clsx } from "clsx";
4
4
  import { twMerge } from "tailwind-merge";
5
5
 
6
6
  // src/util/touch.ts
7
- import { useState } from "react";
7
+ import { useMemo, useState } from "react";
8
8
  function switchToMouseMode(ev) {
9
9
  if (ev.movementX === 0 && ev.movementY === 0) return;
10
10
  document.body.classList.remove("touch-mode");
@@ -37,12 +37,49 @@ var usePressable = (click) => {
37
37
  if (touching) {
38
38
  event.preventDefault();
39
39
  setTouching(false);
40
- click();
40
+ click(event);
41
41
  }
42
42
  }
43
43
  }
44
44
  };
45
45
  };
46
+ var useLongPressable = ({
47
+ onPress,
48
+ onRelease
49
+ }) => {
50
+ const [touching, setTouching] = useState(false);
51
+ return useMemo(
52
+ () => ({
53
+ touching,
54
+ handlers: {
55
+ onTouchStart: (e) => {
56
+ setTouching(true);
57
+ onPress(e);
58
+ },
59
+ onMouseDown: (e) => {
60
+ setTouching(true);
61
+ onPress(e);
62
+ },
63
+ onMouseUp: (e) => {
64
+ setTouching(false);
65
+ onRelease(e);
66
+ },
67
+ onTouchMove: (e) => {
68
+ setTouching(false);
69
+ onRelease(e);
70
+ },
71
+ onTouchEnd: (event) => {
72
+ if (touching) {
73
+ event.preventDefault();
74
+ setTouching(false);
75
+ onRelease(event);
76
+ }
77
+ }
78
+ }
79
+ }),
80
+ [touching, onRelease, onPress]
81
+ );
82
+ };
46
83
  function trackTouch(touch, move, end) {
47
84
  const touchMove = (ev) => {
48
85
  ev.preventDefault();
@@ -143,6 +180,7 @@ export {
143
180
  switchToTouchMode,
144
181
  initialiseListeners,
145
182
  usePressable,
183
+ useLongPressable,
146
184
  trackTouch,
147
185
  cn,
148
186
  calculateClass,
package/dist/components/core/index.js CHANGED
@@ -2,11 +2,11 @@
2
2
 
3
3
 
4
4
 
5
- var _chunkLXNJPBVTjs = require('../../chunk-LXNJPBVT.js');
6
- require('../../chunk-GBYIEWGN.js');
5
+ var _chunkBBUHASWZjs = require('../../chunk-BBUHASWZ.js');
6
+ require('../../chunk-R7E6SIN6.js');
7
7
  require('../../chunk-MLKGABMK.js');
8
8
 
9
9
 
10
10
 
11
11
 
12
- exports.Icon = _chunkLXNJPBVTjs.Icon; exports.TRANSPARENCY_SVG = _chunkLXNJPBVTjs.TRANSPARENCY_SVG; exports.TRANSPARENCY_SVG_URI = _chunkLXNJPBVTjs.TRANSPARENCY_SVG_URI;
12
+ exports.Icon = _chunkBBUHASWZjs.Icon; exports.TRANSPARENCY_SVG = _chunkBBUHASWZjs.TRANSPARENCY_SVG; exports.TRANSPARENCY_SVG_URI = _chunkBBUHASWZjs.TRANSPARENCY_SVG_URI;
package/dist/components/core/index.mjs CHANGED
@@ -2,8 +2,8 @@ import {
2
2
  Icon,
3
3
  TRANSPARENCY_SVG,
4
4
  TRANSPARENCY_SVG_URI
5
- } from "../../chunk-TOVGDMHN.mjs";
6
- import "../../chunk-2HBLGAG3.mjs";
5
+ } from "../../chunk-DK4BAXVE.mjs";
6
+ import "../../chunk-SNIL7DDI.mjs";
7
7
  import "../../chunk-7P6ASYW6.mjs";
8
8
  export {
9
9
  Icon,
package/dist/components/index.d.mts CHANGED
@@ -23,6 +23,10 @@ type StageConnectionState = {
23
23
  type StageContextData = {
24
24
  sendMessage: (<M extends proto$1.AnyClientComponentMessage>(msg: M) => void) | null;
25
25
  call: (<Namespace extends string, P, Action extends string & keyof P>(msg: proto$1.CallForPair<Namespace, P, Action>) => Promise<proto$1.ReturnForPair<P, Action>>) | null;
26
+ upload: (<M extends proto$1.AnyClientComponentCallUpload>(msg: Omit<M, 'requestId'>, data: Blob | ReadableStream<Uint8Array>) => Promise<void>) | null;
27
+ download: (<M extends proto$1.AnyClientComponentCallDownload>(msg: Omit<M, 'requestId'>) => Promise<ReadableStream<Uint8Array<ArrayBuffer>>>) | null;
28
+ addNotificationListener: ((listener: (msg: proto$1.BaseNotificationMessage<string, string>) => void) => void) | null;
29
+ removeNotificationListener: ((listener: (msg: proto$1.BaseNotificationMessage<string, string>) => void) => void) | null;
26
30
  renderComponent: (info: proto$1.AnyComponentProto) => ReactElement;
27
31
  connectionUuid: string | null;
28
32
  connection: StageConnectionState;
@@ -35,6 +39,7 @@ type StageContextData = {
35
39
  reconnect: () => void;
36
40
  };
37
41
  declare const StageContext: React.Context<StageContextData>;
42
+ declare const useNotificationHandler: <T extends proto$1.BaseNotificationMessage<string, string>>(typeGuard: (msg: proto$1.BaseNotificationMessage<string, string>) => msg is T, handler: (msg: T) => void, dependencyList: unknown[]) => void;
38
43
 
39
44
  interface Props$7 {
40
45
  className?: string;
@@ -98,4 +103,4 @@ declare const Timeline: FC<Props>;
98
103
 
99
104
  declare const CORE_FRONTEND_COMPONENT_RENDERER: FrontendComponentRenderer;
100
105
 
101
- export { Button, CORE_FRONTEND_COMPONENT_RENDERER, Group, GroupStateWrapper, Label, NestedContent, Rect, SliderButton, type StageConnectionState, StageContext, type StageContextData, Switch, Tabs, TextInput, Timeline };
106
+ export { Button, CORE_FRONTEND_COMPONENT_RENDERER, Group, GroupStateWrapper, Label, NestedContent, Rect, SliderButton, type StageConnectionState, StageContext, type StageContextData, Switch, Tabs, TextInput, Timeline, useNotificationHandler };
package/dist/components/index.d.ts CHANGED
@@ -23,6 +23,10 @@ type StageConnectionState = {
23
23
  type StageContextData = {
24
24
  sendMessage: (<M extends proto$1.AnyClientComponentMessage>(msg: M) => void) | null;
25
25
  call: (<Namespace extends string, P, Action extends string & keyof P>(msg: proto$1.CallForPair<Namespace, P, Action>) => Promise<proto$1.ReturnForPair<P, Action>>) | null;
26
+ upload: (<M extends proto$1.AnyClientComponentCallUpload>(msg: Omit<M, 'requestId'>, data: Blob | ReadableStream<Uint8Array>) => Promise<void>) | null;
27
+ download: (<M extends proto$1.AnyClientComponentCallDownload>(msg: Omit<M, 'requestId'>) => Promise<ReadableStream<Uint8Array<ArrayBuffer>>>) | null;
28
+ addNotificationListener: ((listener: (msg: proto$1.BaseNotificationMessage<string, string>) => void) => void) | null;
29
+ removeNotificationListener: ((listener: (msg: proto$1.BaseNotificationMessage<string, string>) => void) => void) | null;
26
30
  renderComponent: (info: proto$1.AnyComponentProto) => ReactElement;
27
31
  connectionUuid: string | null;
28
32
  connection: StageConnectionState;
@@ -35,6 +39,7 @@ type StageContextData = {
35
39
  reconnect: () => void;
36
40
  };
37
41
  declare const StageContext: React.Context<StageContextData>;
42
+ declare const useNotificationHandler: <T extends proto$1.BaseNotificationMessage<string, string>>(typeGuard: (msg: proto$1.BaseNotificationMessage<string, string>) => msg is T, handler: (msg: T) => void, dependencyList: unknown[]) => void;
38
43
 
39
44
  interface Props$7 {
40
45
  className?: string;
@@ -98,4 +103,4 @@ declare const Timeline: FC<Props>;
98
103
 
99
104
  declare const CORE_FRONTEND_COMPONENT_RENDERER: FrontendComponentRenderer;
100
105
 
101
- export { Button, CORE_FRONTEND_COMPONENT_RENDERER, Group, GroupStateWrapper, Label, NestedContent, Rect, SliderButton, type StageConnectionState, StageContext, type StageContextData, Switch, Tabs, TextInput, Timeline };
106
+ export { Button, CORE_FRONTEND_COMPONENT_RENDERER, Group, GroupStateWrapper, Label, NestedContent, Rect, SliderButton, type StageConnectionState, StageContext, type StageContextData, Switch, Tabs, TextInput, Timeline, useNotificationHandler };
package/dist/components/index.js CHANGED
@@ -2,12 +2,12 @@
2
2
 
3
3
 
4
4
 
5
- var _chunkLXNJPBVTjs = require('../chunk-LXNJPBVT.js');
5
+ var _chunkBBUHASWZjs = require('../chunk-BBUHASWZ.js');
6
6
 
7
7
 
8
8
 
9
9
 
10
- var _chunkGBYIEWGNjs = require('../chunk-GBYIEWGN.js');
10
+ var _chunkR7E6SIN6js = require('../chunk-R7E6SIN6.js');
11
11
  require('../chunk-MLKGABMK.js');
12
12
 
13
13
  // src/components/index.tsx
@@ -18,6 +18,11 @@ var _react = require('react'); var _react2 = _interopRequireDefault(_react);
18
18
 
19
19
  // src/components/context.ts
20
20
 
21
+
22
+
23
+
24
+
25
+
21
26
  var StageContext = _react.createContext.call(void 0,
22
27
  new Proxy({}, {
23
28
  get: () => {
@@ -25,6 +30,31 @@ var StageContext = _react.createContext.call(void 0,
25
30
  }
26
31
  })
27
32
  );
33
+ var useNotificationHandler = (typeGuard, handler, dependencyList) => {
34
+ const { addNotificationListener, removeNotificationListener } = _react.useContext.call(void 0, StageContext);
35
+ if (!addNotificationListener || !removeNotificationListener) {
36
+ throw new Error(
37
+ "useNotificationHandler must be used within a StageContext"
38
+ );
39
+ }
40
+ const callback = _react.useCallback.call(void 0, handler, dependencyList);
41
+ _react.useEffect.call(void 0, () => {
42
+ const listener = (msg) => {
43
+ if (typeGuard(msg)) {
44
+ callback(msg);
45
+ }
46
+ };
47
+ addNotificationListener(listener);
48
+ return () => {
49
+ removeNotificationListener(listener);
50
+ };
51
+ }, [
52
+ addNotificationListener,
53
+ removeNotificationListener,
54
+ typeGuard,
55
+ callback
56
+ ]);
57
+ };
28
58
 
29
59
  // src/components/button.tsx
30
60
  var _jsxruntime = require('react/jsx-runtime');
@@ -32,7 +62,7 @@ var Button = (props) => {
32
62
  const { call } = _react2.default.useContext(StageContext);
33
63
  const [localState, setLocalState] = _react2.default.useState(null);
34
64
  const state = _nullishCoalesce(localState, () => ( props.info.state));
35
- const { touching, handlers } = _chunkGBYIEWGNjs.usePressable.call(void 0, async () => {
65
+ const { touching, handlers } = _chunkR7E6SIN6js.usePressable.call(void 0, async () => {
36
66
  try {
37
67
  if (!call) return;
38
68
  setLocalState({ state: "loading" });
@@ -50,7 +80,7 @@ var Button = (props) => {
50
80
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
51
81
  "div",
52
82
  {
53
- className: _chunkGBYIEWGNjs.cn.call(void 0,
83
+ className: _chunkR7E6SIN6js.cn.call(void 0,
54
84
  `
55
85
  relative box-border flex h-arcane-btn cursor-pointer items-center
56
86
  justify-center overflow-visible rounded-arcane-btn border
@@ -74,7 +104,7 @@ var Button = (props) => {
74
104
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
75
105
  "div",
76
106
  {
77
- className: _chunkGBYIEWGNjs.cn.call(void 0,
107
+ className: _chunkR7E6SIN6js.cn.call(void 0,
78
108
  `
79
109
  pointer-events-none absolute -inset-1.5 rounded-md border-2
80
110
  border-transparent bg-transparent transition-colors duration-300
@@ -83,9 +113,9 @@ var Button = (props) => {
83
113
  )
84
114
  }
85
115
  ),
86
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "flex items-center justify-center px-0.5"), children: [
87
- props.info.icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLXNJPBVTjs.Icon, { icon: props.info.icon }),
88
- props.info.text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunkGBYIEWGNjs.cn.call(void 0, "px-1"), children: props.info.text })
116
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkR7E6SIN6js.cn.call(void 0, "flex items-center justify-center px-0.5"), children: [
117
+ props.info.icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBBUHASWZjs.Icon, { icon: props.info.icon }),
118
+ props.info.text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunkR7E6SIN6js.cn.call(void 0, "px-1"), children: props.info.text })
89
119
  ] })
90
120
  ]
91
121
  }
@@ -117,7 +147,7 @@ var NestedContent = ({ className, children }) => {
117
147
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
118
148
  "div",
119
149
  {
120
- className: _chunkGBYIEWGNjs.cn.call(void 0,
150
+ className: _chunkR7E6SIN6js.cn.call(void 0,
121
151
  "p-2 shadow-arcane-box-inset",
122
152
  color === "dark" && "bg-arcane-bg-dark-1",
123
153
  color === "lighter" && "bg-arcane-bg",
@@ -168,7 +198,7 @@ var Group = ({ className, info }) => {
168
198
  const children = /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
169
199
  "div",
170
200
  {
171
- className: _chunkGBYIEWGNjs.cn.call(void 0,
201
+ className: _chunkR7E6SIN6js.cn.call(void 0,
172
202
  "flex gap-2",
173
203
  info.direction === "vertical" && "flex-col",
174
204
  info.direction === "horizontal" && "items-center",
@@ -179,7 +209,7 @@ var Group = ({ className, info }) => {
179
209
  );
180
210
  const collapsible = !!info.defaultCollapsibleState;
181
211
  const collapsed = info.defaultCollapsibleState ? groupState.isCollapsed(info.key, info.defaultCollapsibleState) : false;
182
- const collapsePressable = _chunkGBYIEWGNjs.usePressable.call(void 0,
212
+ const collapsePressable = _chunkR7E6SIN6js.usePressable.call(void 0,
183
213
  () => groupState.toggleCollapsed(info.key)
184
214
  );
185
215
  const showTitle = info.title || info.editableTitle;
@@ -209,7 +239,7 @@ var Group = ({ className, info }) => {
209
239
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
210
240
  "div",
211
241
  {
212
- className: _chunkGBYIEWGNjs.cn.call(void 0,
242
+ className: _chunkR7E6SIN6js.cn.call(void 0,
213
243
  hasBorder ? "border border-arcane-btn-border" : "m-0 border-none",
214
244
  className
215
245
  ),
@@ -217,7 +247,7 @@ var Group = ({ className, info }) => {
217
247
  displayHeader ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
218
248
  "div",
219
249
  {
220
- className: _chunkGBYIEWGNjs.cn.call(void 0,
250
+ className: _chunkR7E6SIN6js.cn.call(void 0,
221
251
  `
222
252
  flex items-center gap-0.5 border-b border-arcane-btn-border
223
253
  bg-arcane-btn-border p-1
@@ -227,9 +257,9 @@ var Group = ({ className, info }) => {
227
257
  ),
228
258
  children: [
229
259
  collapsible && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
230
- _chunkLXNJPBVTjs.Icon,
260
+ _chunkBBUHASWZjs.Icon,
231
261
  {
232
- className: _chunkGBYIEWGNjs.cn.call(void 0, "mx-0.5 cursor-pointer"),
262
+ className: _chunkR7E6SIN6js.cn.call(void 0, "mx-0.5 cursor-pointer"),
233
263
  icon: collapsed ? "arrow_right" : "arrow_drop_down",
234
264
  ...collapsePressable.handlers
235
265
  }
@@ -237,7 +267,7 @@ var Group = ({ className, info }) => {
237
267
  _optionalChain([info, 'access', _7 => _7.labels, 'optionalAccess', _8 => _8.map, 'call', _9 => _9((l, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
238
268
  "span",
239
269
  {
240
- className: _chunkGBYIEWGNjs.cn.call(void 0,
270
+ className: _chunkR7E6SIN6js.cn.call(void 0,
241
271
  `
242
272
  mx-0.5 inline-block rounded-arcane-btn border
243
273
  border-arcane-bg-light-1 bg-arcane-bg px-1 py-0.5
@@ -250,7 +280,7 @@ var Group = ({ className, info }) => {
250
280
  showTitle && (info.editableTitle ? editingTitle ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
251
281
  "input",
252
282
  {
253
- className: _chunkGBYIEWGNjs.cn.call(void 0,
283
+ className: _chunkR7E6SIN6js.cn.call(void 0,
254
284
  `
255
285
  border-none bg-transparent px-0.5 text-arcane-normal
256
286
  text-arcane-text outline-none
@@ -264,7 +294,7 @@ var Group = ({ className, info }) => {
264
294
  ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
265
295
  "span",
266
296
  {
267
- className: _chunkGBYIEWGNjs.cn.call(void 0,
297
+ className: _chunkR7E6SIN6js.cn.call(void 0,
268
298
  `
269
299
  group flex cursor-pointer items-center gap-0.5
270
300
  rounded-arcane-btn px-0.5 text-arcane-normal
@@ -275,9 +305,9 @@ var Group = ({ className, info }) => {
275
305
  children: [
276
306
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: info.title }),
277
307
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
278
- _chunkLXNJPBVTjs.Icon,
308
+ _chunkBBUHASWZjs.Icon,
279
309
  {
280
- className: _chunkGBYIEWGNjs.cn.call(void 0,
310
+ className: _chunkR7E6SIN6js.cn.call(void 0,
281
311
  `
282
312
  text-arcane-text-muted
283
313
  group-hover:text-arcane-hint
@@ -292,10 +322,10 @@ var Group = ({ className, info }) => {
292
322
  collapsible ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
293
323
  "span",
294
324
  {
295
- className: _chunkGBYIEWGNjs.cn.call(void 0, "mx-0.5 h-arcane-btn grow cursor-pointer"),
325
+ className: _chunkR7E6SIN6js.cn.call(void 0, "mx-0.5 h-arcane-btn grow cursor-pointer"),
296
326
  ...collapsePressable.handlers
297
327
  }
298
- ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunkGBYIEWGNjs.cn.call(void 0, "grow") }),
328
+ ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunkR7E6SIN6js.cn.call(void 0, "grow") }),
299
329
  _optionalChain([info, 'access', _12 => _12.headers, 'optionalAccess', _13 => _13.map, 'call', _14 => _14((h) => h.children.map((c) => renderComponent(c)))])
300
330
  ]
301
331
  }
@@ -312,7 +342,7 @@ Group.displayName = "Group";
312
342
  var Label = ({ className, info }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
313
343
  "div",
314
344
  {
315
- className: _chunkGBYIEWGNjs.cn.call(void 0,
345
+ className: _chunkR7E6SIN6js.cn.call(void 0,
316
346
  "font-normal whitespace-nowrap",
317
347
  info.bold && "font-bold",
318
348
  className
@@ -326,7 +356,7 @@ var Label = ({ className, info }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0
326
356
  var Rect = ({ className, info }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
327
357
  "div",
328
358
  {
329
- className: _chunkGBYIEWGNjs.cn.call(void 0,
359
+ className: _chunkR7E6SIN6js.cn.call(void 0,
330
360
  `
331
361
  h-arcane-rect min-w-arcane-rect overflow-hidden rounded-arcane-btn
332
362
  border border-arcane-btn-border bg-repeat
@@ -335,10 +365,10 @@ var Rect = ({ className, info }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
335
365
  className
336
366
  ),
337
367
  style: {
338
- backgroundImage: `url('${_chunkLXNJPBVTjs.TRANSPARENCY_SVG_URI}')`,
368
+ backgroundImage: `url('${_chunkBBUHASWZjs.TRANSPARENCY_SVG_URI}')`,
339
369
  backgroundSize: "10px"
340
370
  },
341
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "size-full"), style: { backgroundColor: info.color } })
371
+ children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkR7E6SIN6js.cn.call(void 0, "size-full"), style: { backgroundColor: info.color } })
342
372
  }
343
373
  );
344
374
 
@@ -435,7 +465,7 @@ var SliderButton = ({ info, className }) => {
435
465
  touch.pageX
436
466
  );
437
467
  const start = onDown(cursorPosition);
438
- _chunkGBYIEWGNjs.trackTouch.call(void 0,
468
+ _chunkR7E6SIN6js.trackTouch.call(void 0,
439
469
  touch,
440
470
  (p) => {
441
471
  const amntDiff = (p.pageX - originalPageX) / OPEN_SLIDER_INNER_WIDTH;
@@ -472,12 +502,12 @@ var SliderButton = ({ info, className }) => {
472
502
  const valueCSSPercent = value ? (value - info.min) / (info.max - info.min) * 100 + "%" : "0";
473
503
  const gradientStops = info.gradient && info.gradient.map((g) => `${g.color} ${g.position * 100}%`);
474
504
  const sliderGradient = gradientStops ? {
475
- background: `linear-gradient(90deg, ${gradientStops.join(", ")}), url(${_chunkLXNJPBVTjs.TRANSPARENCY_SVG_URI})`
505
+ background: `linear-gradient(90deg, ${gradientStops.join(", ")}), url(${_chunkBBUHASWZjs.TRANSPARENCY_SVG_URI})`
476
506
  } : void 0;
477
507
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
478
508
  "div",
479
509
  {
480
- className: _chunkGBYIEWGNjs.cn.call(void 0,
510
+ className: _chunkR7E6SIN6js.cn.call(void 0,
481
511
  "relative min-h-arcane-btn min-w-arcane-slider-min",
482
512
  info.grow && "grow",
483
513
  state.state === "touching" && "z-arcane-slider-touching",
@@ -486,7 +516,7 @@ var SliderButton = ({ info, className }) => {
486
516
  children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
487
517
  "div",
488
518
  {
489
- className: _chunkGBYIEWGNjs.cn.call(void 0,
519
+ className: _chunkR7E6SIN6js.cn.call(void 0,
490
520
  `
491
521
  absolute inset-y-0 left-0 flex w-full cursor-pointer items-center
492
522
  rounded-arcane-btn border border-arcane-btn-border
@@ -508,7 +538,7 @@ var SliderButton = ({ info, className }) => {
508
538
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
509
539
  "input",
510
540
  {
511
- className: _chunkGBYIEWGNjs.cn.call(void 0,
541
+ className: _chunkR7E6SIN6js.cn.call(void 0,
512
542
  `
513
543
  pointer-events-none -mx-arcane-slider-input-hidden my-0 w-0
514
544
  overflow-hidden rounded-arcane-btn border border-arcane-btn-border
@@ -531,7 +561,7 @@ var SliderButton = ({ info, className }) => {
531
561
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
532
562
  "div",
533
563
  {
534
- className: _chunkGBYIEWGNjs.cn.call(void 0,
564
+ className: _chunkR7E6SIN6js.cn.call(void 0,
535
565
  `
536
566
  -mx-arcane-slider-value-hidden w-arcane-slider-value text-center
537
567
  leading-arcane-slider-value-hidden opacity-0
@@ -544,7 +574,7 @@ var SliderButton = ({ info, className }) => {
544
574
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
545
575
  "div",
546
576
  {
547
- className: _chunkGBYIEWGNjs.cn.call(void 0,
577
+ className: _chunkR7E6SIN6js.cn.call(void 0,
548
578
  `
549
579
  mx-arcane-slider-pad h-arcane-slider-display grow border
550
580
  border-arcane-btn-border bg-arcane-bg-dark-1
@@ -555,7 +585,7 @@ var SliderButton = ({ info, className }) => {
555
585
  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
556
586
  "div",
557
587
  {
558
- className: _chunkGBYIEWGNjs.cn.call(void 0,
588
+ className: _chunkR7E6SIN6js.cn.call(void 0,
559
589
  `h-full bg-arcane-hint`,
560
590
  sliderGradient && `border-arcane-btn-border relative border-r-[2px] bg-transparent`,
561
591
  sliderGradient && `before:absolute before:w-[4px] before:-top-[5px] before:-bottom-[5px] before:-right-[3px] before:bg-arcane-btn-border`,
@@ -569,7 +599,7 @@ var SliderButton = ({ info, className }) => {
569
599
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
570
600
  "div",
571
601
  {
572
- className: _chunkGBYIEWGNjs.cn.call(void 0,
602
+ className: _chunkR7E6SIN6js.cn.call(void 0,
573
603
  `
574
604
  -mx-arcane-slider-value-hidden w-arcane-slider-value text-center
575
605
  leading-arcane-slider-value-hidden opacity-0
@@ -621,7 +651,7 @@ var Switch = ({ className, info }) => {
621
651
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
622
652
  "div",
623
653
  {
624
- className: _chunkGBYIEWGNjs.cn.call(void 0, "relative", className),
654
+ className: _chunkR7E6SIN6js.cn.call(void 0, "relative", className),
625
655
  onClick,
626
656
  onTouchStart,
627
657
  onTouchEnd,
@@ -629,7 +659,7 @@ var Switch = ({ className, info }) => {
629
659
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
630
660
  "div",
631
661
  {
632
- className: _chunkGBYIEWGNjs.cn.call(void 0,
662
+ className: _chunkR7E6SIN6js.cn.call(void 0,
633
663
  `
634
664
  pointer-events-none absolute -inset-arcane-touch-indicator
635
665
  rounded-arcane-touch-indicator border-2 border-transparent
@@ -642,7 +672,7 @@ var Switch = ({ className, info }) => {
642
672
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
643
673
  "div",
644
674
  {
645
- className: _chunkGBYIEWGNjs.cn.call(void 0,
675
+ className: _chunkR7E6SIN6js.cn.call(void 0,
646
676
  `
647
677
  relative block h-arcane-switch-knob w-arcane-switch-track
648
678
  min-w-arcane-switch-track overflow-hidden rounded-arcane-btn border
@@ -652,7 +682,7 @@ var Switch = ({ className, info }) => {
652
682
  children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
653
683
  "div",
654
684
  {
655
- className: _chunkGBYIEWGNjs.cn.call(void 0,
685
+ className: _chunkR7E6SIN6js.cn.call(void 0,
656
686
  `absolute top-0 left-0 cursor-pointer transition-all duration-300`,
657
687
  info.state === "on" && "left-arcane-switch-label"
658
688
  ),
@@ -660,7 +690,7 @@ var Switch = ({ className, info }) => {
660
690
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
661
691
  "div",
662
692
  {
663
- className: _chunkGBYIEWGNjs.cn.call(void 0,
693
+ className: _chunkR7E6SIN6js.cn.call(void 0,
664
694
  `
665
695
  absolute top-0 -left-arcane-switch-label h-arcane-switch-knob
666
696
  w-arcane-switch-label bg-arcane-grad-hint-pressed text-center
@@ -674,7 +704,7 @@ var Switch = ({ className, info }) => {
674
704
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
675
705
  "div",
676
706
  {
677
- className: _chunkGBYIEWGNjs.cn.call(void 0,
707
+ className: _chunkR7E6SIN6js.cn.call(void 0,
678
708
  `
679
709
  absolute top-0 left-arcane-switch-off-left h-arcane-switch-knob
680
710
  w-arcane-switch-label bg-arcane-grad-btn-active text-center
@@ -688,7 +718,7 @@ var Switch = ({ className, info }) => {
688
718
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
689
719
  "div",
690
720
  {
691
- className: _chunkGBYIEWGNjs.cn.call(void 0,
721
+ className: _chunkR7E6SIN6js.cn.call(void 0,
692
722
  `
693
723
  absolute -top-px -left-px size-arcane-btn rounded-arcane-btn
694
724
  border border-arcane-btn-border bg-arcane-grad-btn
@@ -719,14 +749,14 @@ var Tabs = (props) => {
719
749
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
720
750
  "div",
721
751
  {
722
- className: _chunkGBYIEWGNjs.cn.call(void 0,
752
+ className: _chunkR7E6SIN6js.cn.call(void 0,
723
753
  "flex flex-col border border-arcane-btn-border bg-arcane-btn-border"
724
754
  ),
725
755
  children: [
726
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "flex flex-row border-b border-arcane-btn-border"), children: props.info.tabs.map((tab2, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
756
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkR7E6SIN6js.cn.call(void 0, "flex flex-row border-b border-arcane-btn-border"), children: props.info.tabs.map((tab2, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
727
757
  "div",
728
758
  {
729
- className: _chunkGBYIEWGNjs.cn.call(void 0,
759
+ className: _chunkR7E6SIN6js.cn.call(void 0,
730
760
  `
731
761
  relative mr-px flex h-arcane-tabs-item cursor-pointer
732
762
  items-center bg-arcane-bg-dark-1 px-arcane
@@ -750,7 +780,7 @@ var Tabs = (props) => {
750
780
  currentTab === i ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
751
781
  "span",
752
782
  {
753
- className: _chunkGBYIEWGNjs.cn.call(void 0,
783
+ className: _chunkR7E6SIN6js.cn.call(void 0,
754
784
  "absolute inset-x-2 bottom-1 h-0.5 bg-arcane-hint"
755
785
  )
756
786
  }
@@ -779,7 +809,7 @@ var TextInput = ({ className, info }) => {
779
809
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
780
810
  "input",
781
811
  {
782
- className: _chunkGBYIEWGNjs.cn.call(void 0,
812
+ className: _chunkR7E6SIN6js.cn.call(void 0,
783
813
  `
784
814
  relative box-border overflow-hidden rounded-arcane-btn border
785
815
  border-arcane-btn-border bg-arcane-bg-dark-1 px-1 py-0.5
@@ -833,18 +863,18 @@ var Timeline = (props) => {
833
863
  window.cancelAnimationFrame(frameState.current.animationFrame);
834
864
  };
835
865
  }, [frameState, info.state, timeDifferenceMs]);
836
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "grow", className), children: [
837
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "flex"), children: [
838
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "grow"), children: [
839
- info.title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "mb-2 text-arcane-title font-bold"), children: info.title }),
840
- _optionalChain([info, 'access', _25 => _25.subtitles, 'optionalAccess', _26 => _26.map, 'call', _27 => _27((subtitle, k) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "mb-2 text-arcane-subtitle font-bold"), children: subtitle }, k))])
866
+ return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkR7E6SIN6js.cn.call(void 0, "grow", className), children: [
867
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkR7E6SIN6js.cn.call(void 0, "flex"), children: [
868
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkR7E6SIN6js.cn.call(void 0, "grow"), children: [
869
+ info.title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkR7E6SIN6js.cn.call(void 0, "mb-2 text-arcane-title font-bold"), children: info.title }),
870
+ _optionalChain([info, 'access', _25 => _25.subtitles, 'optionalAccess', _26 => _26.map, 'call', _27 => _27((subtitle, k) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkR7E6SIN6js.cn.call(void 0, "mb-2 text-arcane-subtitle font-bold"), children: subtitle }, k))])
841
871
  ] }),
842
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "flex flex-col items-end justify-center"), children: [
872
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkR7E6SIN6js.cn.call(void 0, "flex flex-col items-end justify-center"), children: [
843
873
  _optionalChain([info, 'access', _28 => _28.source, 'optionalAccess', _29 => _29.name]),
844
874
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
845
- _chunkLXNJPBVTjs.Icon,
875
+ _chunkBBUHASWZjs.Icon,
846
876
  {
847
- className: _chunkGBYIEWGNjs.cn.call(void 0, "text-arcane-timeline-indicator"),
877
+ className: _chunkR7E6SIN6js.cn.call(void 0, "text-arcane-timeline-indicator"),
848
878
  icon: info.state.state === "playing" ? "play_arrow" : "pause"
849
879
  }
850
880
  )
@@ -853,7 +883,7 @@ var Timeline = (props) => {
853
883
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
854
884
  "div",
855
885
  {
856
- className: _chunkGBYIEWGNjs.cn.call(void 0,
886
+ className: _chunkR7E6SIN6js.cn.call(void 0,
857
887
  `
858
888
  h-arcane-timeline-bar w-full border border-arcane-btn-border
859
889
  bg-arcane-btn-border
@@ -862,7 +892,7 @@ var Timeline = (props) => {
862
892
  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
863
893
  "div",
864
894
  {
865
- className: _chunkGBYIEWGNjs.cn.call(void 0, "h-full bg-arcane-hint"),
895
+ className: _chunkR7E6SIN6js.cn.call(void 0, "h-full bg-arcane-hint"),
866
896
  style: {
867
897
  width: `${Math.min(100, 100 * currentTimeMillis / info.state.totalTimeMillis)}%`
868
898
  }
@@ -924,4 +954,5 @@ var CORE_FRONTEND_COMPONENT_RENDERER = {
924
954
 
925
955
 
926
956
 
927
- exports.Button = Button; exports.CORE_FRONTEND_COMPONENT_RENDERER = CORE_FRONTEND_COMPONENT_RENDERER; exports.Group = Group; exports.GroupStateWrapper = GroupStateWrapper; exports.Label = Label; exports.NestedContent = NestedContent; exports.Rect = Rect; exports.SliderButton = SliderButton; exports.StageContext = StageContext; exports.Switch = Switch; exports.Tabs = Tabs; exports.TextInput = TextInput; exports.Timeline = Timeline; exports.code = _chunkLXNJPBVTjs.core_exports;
957
+
958
+ exports.Button = Button; exports.CORE_FRONTEND_COMPONENT_RENDERER = CORE_FRONTEND_COMPONENT_RENDERER; exports.Group = Group; exports.GroupStateWrapper = GroupStateWrapper; exports.Label = Label; exports.NestedContent = NestedContent; exports.Rect = Rect; exports.SliderButton = SliderButton; exports.StageContext = StageContext; exports.Switch = Switch; exports.Tabs = Tabs; exports.TextInput = TextInput; exports.Timeline = Timeline; exports.code = _chunkBBUHASWZjs.core_exports; exports.useNotificationHandler = useNotificationHandler;
package/dist/components/index.mjs CHANGED
@@ -2,12 +2,12 @@ import {
2
2
  Icon,
3
3
  TRANSPARENCY_SVG_URI,
4
4
  core_exports
5
- } from "../chunk-TOVGDMHN.mjs";
5
+ } from "../chunk-DK4BAXVE.mjs";
6
6
  import {
7
7
  cn,
8
8
  trackTouch,
9
9
  usePressable
10
- } from "../chunk-2HBLGAG3.mjs";
10
+ } from "../chunk-SNIL7DDI.mjs";
11
11
  import "../chunk-7P6ASYW6.mjs";
12
12
 
13
13
  // src/components/index.tsx
@@ -17,7 +17,12 @@ import { isCoreComponent } from "@arcanejs/protocol/core";
17
17
  import React from "react";
18
18
 
19
19
  // src/components/context.ts
20
- import { createContext } from "react";
20
+ import {
21
+ createContext,
22
+ useCallback,
23
+ useContext,
24
+ useEffect
25
+ } from "react";
21
26
  var StageContext = createContext(
22
27
  new Proxy({}, {
23
28
  get: () => {
@@ -25,6 +30,31 @@ var StageContext = createContext(
25
30
  }
26
31
  })
27
32
  );
33
+ var useNotificationHandler = (typeGuard, handler, dependencyList) => {
34
+ const { addNotificationListener, removeNotificationListener } = useContext(StageContext);
35
+ if (!addNotificationListener || !removeNotificationListener) {
36
+ throw new Error(
37
+ "useNotificationHandler must be used within a StageContext"
38
+ );
39
+ }
40
+ const callback = useCallback(handler, dependencyList);
41
+ useEffect(() => {
42
+ const listener = (msg) => {
43
+ if (typeGuard(msg)) {
44
+ callback(msg);
45
+ }
46
+ };
47
+ addNotificationListener(listener);
48
+ return () => {
49
+ removeNotificationListener(listener);
50
+ };
51
+ }, [
52
+ addNotificationListener,
53
+ removeNotificationListener,
54
+ typeGuard,
55
+ callback
56
+ ]);
57
+ };
28
58
 
29
59
  // src/components/button.tsx
30
60
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -94,7 +124,7 @@ var Button = (props) => {
94
124
 
95
125
  // src/components/group.tsx
96
126
  import React3, {
97
- useContext,
127
+ useContext as useContext2,
98
128
  useState
99
129
  } from "react";
100
130
 
@@ -162,8 +192,8 @@ var GroupStateWrapper = ({ openByDefault, children }) => {
162
192
  return /* @__PURE__ */ jsx3(GroupStateContext.Provider, { value: { isCollapsed, toggleCollapsed }, children });
163
193
  };
164
194
  var Group = ({ className, info }) => {
165
- const groupState = useContext(GroupStateContext);
166
- const { renderComponent, sendMessage } = useContext(StageContext);
195
+ const groupState = useContext2(GroupStateContext);
196
+ const { renderComponent, sendMessage } = useContext2(StageContext);
167
197
  const [editingTitle, setEditingTitle] = useState(false);
168
198
  const children = /* @__PURE__ */ jsx3(
169
199
  "div",
@@ -343,7 +373,7 @@ var Rect = ({ className, info }) => /* @__PURE__ */ jsx5(
343
373
  );
344
374
 
345
375
  // src/components/slider-button.tsx
346
- import React4, { useCallback } from "react";
376
+ import React4, { useCallback as useCallback2 } from "react";
347
377
  import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
348
378
  var OPEN_SLIDER_WIDTH = 400;
349
379
  var SLIDER_PADDING = 15;
@@ -374,7 +404,7 @@ var SliderButton = ({ info, className }) => {
374
404
  }
375
405
  return NUMBER_FORMATTER.format(value2);
376
406
  };
377
- const sendValue = useCallback(
407
+ const sendValue = useCallback2(
378
408
  (value2) => sendMessage?.({
379
409
  type: "component-message",
380
410
  namespace: "core",
@@ -384,7 +414,7 @@ var SliderButton = ({ info, className }) => {
384
414
  }),
385
415
  [sendMessage, info.key]
386
416
  );
387
- const sanitizeValue = useCallback(
417
+ const sanitizeValue = useCallback2(
388
418
  (value2) => {
389
419
  const i = Math.round((value2 - info.min) / info.step);
390
420
  const v = i * info.step + info.min;
@@ -392,13 +422,13 @@ var SliderButton = ({ info, className }) => {
392
422
  },
393
423
  [info.min, info.max, info.step]
394
424
  );
395
- const getNewValue = useCallback(
425
+ const getNewValue = useCallback2(
396
426
  (startValue, diff) => {
397
427
  return sanitizeValue((startValue || 0) + diff);
398
428
  },
399
429
  [sanitizeValue]
400
430
  );
401
- const getCurrentInputValue = useCallback(
431
+ const getCurrentInputValue = useCallback2(
402
432
  (e) => {
403
433
  const float = parseFloat(e.currentTarget.value);
404
434
  return sanitizeValue(isNaN(float) ? info.value || 0 : float);
@@ -766,12 +796,12 @@ var Tabs = (props) => {
766
796
  };
767
797
 
768
798
  // src/components/text-input.tsx
769
- import React7, { useEffect } from "react";
799
+ import React7, { useEffect as useEffect2 } from "react";
770
800
  import { jsx as jsx9 } from "react/jsx-runtime";
771
801
  var TextInput = ({ className, info }) => {
772
802
  const { sendMessage } = React7.useContext(StageContext);
773
803
  const ref = React7.useRef(null);
774
- useEffect(() => {
804
+ useEffect2(() => {
775
805
  if (ref.current && ref.current.value !== info.value) {
776
806
  ref.current.value = info.value;
777
807
  }
@@ -801,17 +831,17 @@ var TextInput = ({ className, info }) => {
801
831
  };
802
832
 
803
833
  // src/components/timeline.tsx
804
- import React8, { useContext as useContext2, useEffect as useEffect2, useState as useState3 } from "react";
834
+ import React8, { useContext as useContext3, useEffect as useEffect3, useState as useState3 } from "react";
805
835
  import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
806
836
  var Timeline = (props) => {
807
837
  const { className, info } = props;
808
- const { timeDifferenceMs } = useContext2(StageContext);
838
+ const { timeDifferenceMs } = useContext3(StageContext);
809
839
  const frameState = React8.useRef({
810
840
  animationFrame: -1,
811
841
  state: null
812
842
  });
813
843
  const [currentTimeMillis, setCurrentTimeMillis] = useState3(0);
814
- useEffect2(() => {
844
+ useEffect3(() => {
815
845
  frameState.current.state = info.state;
816
846
  const recalculateCurrentTimeMillis = () => {
817
847
  if (frameState.current.state !== info.state) {
@@ -923,5 +953,6 @@ export {
923
953
  Tabs,
924
954
  TextInput,
925
955
  Timeline,
926
- core_exports as code
956
+ core_exports as code,
957
+ useNotificationHandler
927
958
  };
package/dist/styling.js CHANGED
@@ -1,18 +1,18 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
2
2
 
3
3
 
4
- var _chunkGBYIEWGNjs = require('./chunk-GBYIEWGN.js');
4
+ var _chunkR7E6SIN6js = require('./chunk-R7E6SIN6.js');
5
5
  require('./chunk-MLKGABMK.js');
6
6
 
7
7
  // src/styling.tsx
8
8
  var _jsxruntime = require('react/jsx-runtime');
9
9
  var ThemeRoot = ({ children, rootProps }) => {
10
- const { colorSchemePreference } = _chunkGBYIEWGNjs.useColorSchemePreferences.call(void 0, );
10
+ const { colorSchemePreference } = _chunkR7E6SIN6js.useColorSchemePreferences.call(void 0, );
11
11
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
12
12
  "div",
13
13
  {
14
14
  ...rootProps,
15
- className: _chunkGBYIEWGNjs.calculateClass.call(void 0,
15
+ className: _chunkR7E6SIN6js.calculateClass.call(void 0,
16
16
  "arcane-theme-root",
17
17
  `theme-${colorSchemePreference}`,
18
18
  _optionalChain([rootProps, 'optionalAccess', _ => _.className])
package/dist/styling.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  calculateClass,
3
3
  useColorSchemePreferences
4
- } from "./chunk-2HBLGAG3.mjs";
4
+ } from "./chunk-SNIL7DDI.mjs";
5
5
  import "./chunk-7P6ASYW6.mjs";
6
6
 
7
7
  // src/styling.tsx
package/dist/util/index.d.mts CHANGED
@@ -3,7 +3,8 @@ import { ClassValue } from 'clsx';
3
3
  declare function switchToMouseMode(ev: MouseEvent): void;
4
4
  declare function switchToTouchMode(): void;
5
5
  declare function initialiseListeners(): void;
6
- declare const usePressable: (click: () => unknown) => {
6
+ type PressableOnClickListener = (event: React.MouseEvent<unknown> | React.TouchEvent<unknown>) => unknown;
7
+ declare const usePressable: (click: PressableOnClickListener) => {
7
8
  touching: boolean;
8
9
  handlers: {
9
10
  onClick: React.MouseEventHandler<unknown>;
@@ -12,6 +13,19 @@ declare const usePressable: (click: () => unknown) => {
12
13
  onTouchEnd: React.TouchEventHandler<unknown>;
13
14
  };
14
15
  };
16
+ declare const useLongPressable: ({ onPress, onRelease, }: {
17
+ onPress: PressableOnClickListener;
18
+ onRelease: PressableOnClickListener;
19
+ }) => {
20
+ touching: boolean;
21
+ handlers: {
22
+ onMouseDown: React.MouseEventHandler<unknown>;
23
+ onMouseUp: React.MouseEventHandler<unknown>;
24
+ onTouchStart: React.TouchEventHandler<unknown>;
25
+ onTouchMove: React.TouchEventHandler<unknown>;
26
+ onTouchEnd: React.TouchEventHandler<unknown>;
27
+ };
28
+ };
15
29
  declare function trackTouch(touch: React.Touch, move: (pos: {
16
30
  pageX: number;
17
31
  pageY: number;
@@ -28,6 +42,6 @@ declare const useColorSchemePreferences: () => {
28
42
  colorSchemePreference: "auto" | "dark" | "light";
29
43
  setColorSchemePreference: (newPreference: ColorSchemePreference) => void;
30
44
  };
31
- declare const usePreferredColorScheme: () => 'dark' | 'light';
45
+ declare const usePreferredColorScheme: () => "dark" | "light";
32
46
 
33
- export { VALID_COLOR_SCHEME_PREFS, calculateClass, cn, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, useColorSchemePreferences, usePreferredColorScheme, usePressable };
47
+ export { type PressableOnClickListener, VALID_COLOR_SCHEME_PREFS, calculateClass, cn, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, useColorSchemePreferences, useLongPressable, usePreferredColorScheme, usePressable };
package/dist/util/index.d.ts CHANGED
@@ -3,7 +3,8 @@ import { ClassValue } from 'clsx';
3
3
  declare function switchToMouseMode(ev: MouseEvent): void;
4
4
  declare function switchToTouchMode(): void;
5
5
  declare function initialiseListeners(): void;
6
- declare const usePressable: (click: () => unknown) => {
6
+ type PressableOnClickListener = (event: React.MouseEvent<unknown> | React.TouchEvent<unknown>) => unknown;
7
+ declare const usePressable: (click: PressableOnClickListener) => {
7
8
  touching: boolean;
8
9
  handlers: {
9
10
  onClick: React.MouseEventHandler<unknown>;
@@ -12,6 +13,19 @@ declare const usePressable: (click: () => unknown) => {
12
13
  onTouchEnd: React.TouchEventHandler<unknown>;
13
14
  };
14
15
  };
16
+ declare const useLongPressable: ({ onPress, onRelease, }: {
17
+ onPress: PressableOnClickListener;
18
+ onRelease: PressableOnClickListener;
19
+ }) => {
20
+ touching: boolean;
21
+ handlers: {
22
+ onMouseDown: React.MouseEventHandler<unknown>;
23
+ onMouseUp: React.MouseEventHandler<unknown>;
24
+ onTouchStart: React.TouchEventHandler<unknown>;
25
+ onTouchMove: React.TouchEventHandler<unknown>;
26
+ onTouchEnd: React.TouchEventHandler<unknown>;
27
+ };
28
+ };
15
29
  declare function trackTouch(touch: React.Touch, move: (pos: {
16
30
  pageX: number;
17
31
  pageY: number;
@@ -28,6 +42,6 @@ declare const useColorSchemePreferences: () => {
28
42
  colorSchemePreference: "auto" | "dark" | "light";
29
43
  setColorSchemePreference: (newPreference: ColorSchemePreference) => void;
30
44
  };
31
- declare const usePreferredColorScheme: () => 'dark' | 'light';
45
+ declare const usePreferredColorScheme: () => "dark" | "light";
32
46
 
33
- export { VALID_COLOR_SCHEME_PREFS, calculateClass, cn, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, useColorSchemePreferences, usePreferredColorScheme, usePressable };
47
+ export { type PressableOnClickListener, VALID_COLOR_SCHEME_PREFS, calculateClass, cn, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, useColorSchemePreferences, useLongPressable, usePreferredColorScheme, usePressable };
package/dist/util/index.js CHANGED
@@ -9,7 +9,8 @@
9
9
 
10
10
 
11
11
 
12
- var _chunkGBYIEWGNjs = require('../chunk-GBYIEWGN.js');
12
+
13
+ var _chunkR7E6SIN6js = require('../chunk-R7E6SIN6.js');
13
14
  require('../chunk-MLKGABMK.js');
14
15
 
15
16
 
@@ -22,4 +23,5 @@ require('../chunk-MLKGABMK.js');
22
23
 
23
24
 
24
25
 
25
- exports.VALID_COLOR_SCHEME_PREFS = _chunkGBYIEWGNjs.VALID_COLOR_SCHEME_PREFS; exports.calculateClass = _chunkGBYIEWGNjs.calculateClass; exports.cn = _chunkGBYIEWGNjs.cn; exports.initialiseListeners = _chunkGBYIEWGNjs.initialiseListeners; exports.switchToMouseMode = _chunkGBYIEWGNjs.switchToMouseMode; exports.switchToTouchMode = _chunkGBYIEWGNjs.switchToTouchMode; exports.trackTouch = _chunkGBYIEWGNjs.trackTouch; exports.useColorSchemePreferences = _chunkGBYIEWGNjs.useColorSchemePreferences; exports.usePreferredColorScheme = _chunkGBYIEWGNjs.usePreferredColorScheme; exports.usePressable = _chunkGBYIEWGNjs.usePressable;
26
+
27
+ exports.VALID_COLOR_SCHEME_PREFS = _chunkR7E6SIN6js.VALID_COLOR_SCHEME_PREFS; exports.calculateClass = _chunkR7E6SIN6js.calculateClass; exports.cn = _chunkR7E6SIN6js.cn; exports.initialiseListeners = _chunkR7E6SIN6js.initialiseListeners; exports.switchToMouseMode = _chunkR7E6SIN6js.switchToMouseMode; exports.switchToTouchMode = _chunkR7E6SIN6js.switchToTouchMode; exports.trackTouch = _chunkR7E6SIN6js.trackTouch; exports.useColorSchemePreferences = _chunkR7E6SIN6js.useColorSchemePreferences; exports.useLongPressable = _chunkR7E6SIN6js.useLongPressable; exports.usePreferredColorScheme = _chunkR7E6SIN6js.usePreferredColorScheme; exports.usePressable = _chunkR7E6SIN6js.usePressable;
package/dist/util/index.mjs CHANGED
@@ -7,9 +7,10 @@ import {
7
7
  switchToTouchMode,
8
8
  trackTouch,
9
9
  useColorSchemePreferences,
10
+ useLongPressable,
10
11
  usePreferredColorScheme,
11
12
  usePressable
12
- } from "../chunk-2HBLGAG3.mjs";
13
+ } from "../chunk-SNIL7DDI.mjs";
13
14
  import "../chunk-7P6ASYW6.mjs";
14
15
  export {
15
16
  VALID_COLOR_SCHEME_PREFS,
@@ -20,6 +21,7 @@ export {
20
21
  switchToTouchMode,
21
22
  trackTouch,
22
23
  useColorSchemePreferences,
24
+ useLongPressable,
23
25
  usePreferredColorScheme,
24
26
  usePressable
25
27
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcanejs/toolkit-frontend",
3
- "version": "0.10.0",
3
+ "version": "0.12.0",
4
4
  "private": false,
5
5
  "description": "Library of the frontend react components used to render the @arcanejs Toolkit",
6
6
  "keywords": [],
@@ -72,16 +72,16 @@
72
72
  "eslint-plugin-better-tailwindcss": "^4.2.0",
73
73
  "tailwindcss": "^4.1.13",
74
74
  "tsup": "^8.1.0",
75
- "typescript": "^5.3.3",
76
- "@arcanejs/eslint-config": "^0.0.0",
77
- "@arcanejs/typescript-config": "^0.0.0"
75
+ "typescript": "^5.7",
76
+ "@arcanejs/typescript-config": "^0.0.0",
77
+ "@arcanejs/eslint-config": "^0.0.0"
78
78
  },
79
79
  "dependencies": {
80
80
  "clsx": "^2.1.1",
81
81
  "react": "^19.2.0",
82
82
  "react-dom": "^19.2.0",
83
83
  "tailwind-merge": "^3.5.0",
84
- "@arcanejs/protocol": "^0.8.0"
84
+ "@arcanejs/protocol": "^0.9.0"
85
85
  },
86
86
  "files": [
87
87
  "dist"