@arcanejs/toolkit-frontend 0.11.0 → 0.12.0

package/dist/components/index.d.mts

@@ -23,6 +23,10 @@ type StageConnectionState = {
 type StageContextData = {
     sendMessage: (<M extends proto$1.AnyClientComponentMessage>(msg: M) => void) | null;
     call: (<Namespace extends string, P, Action extends string & keyof P>(msg: proto$1.CallForPair<Namespace, P, Action>) => Promise<proto$1.ReturnForPair<P, Action>>) | null;
+    upload: (<M extends proto$1.AnyClientComponentCallUpload>(msg: Omit<M, 'requestId'>, data: Blob | ReadableStream<Uint8Array>) => Promise<void>) | null;
+    download: (<M extends proto$1.AnyClientComponentCallDownload>(msg: Omit<M, 'requestId'>) => Promise<ReadableStream<Uint8Array<ArrayBuffer>>>) | null;
+    addNotificationListener: ((listener: (msg: proto$1.BaseNotificationMessage<string, string>) => void) => void) | null;
+    removeNotificationListener: ((listener: (msg: proto$1.BaseNotificationMessage<string, string>) => void) => void) | null;
     renderComponent: (info: proto$1.AnyComponentProto) => ReactElement;
     connectionUuid: string | null;
     connection: StageConnectionState;
@@ -35,6 +39,7 @@ type StageContextData = {
     reconnect: () => void;
 };
 declare const StageContext: React.Context<StageContextData>;
+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;
 
 interface Props$7 {
     className?: string;
@@ -98,4 +103,4 @@ declare const Timeline: FC<Props>;
 
 declare const CORE_FRONTEND_COMPONENT_RENDERER: FrontendComponentRenderer;
 
-export { Button, CORE_FRONTEND_COMPONENT_RENDERER, Group, GroupStateWrapper, Label, NestedContent, Rect, SliderButton, type StageConnectionState, StageContext, type StageContextData, Switch, Tabs, TextInput, Timeline };
+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

@@ -23,6 +23,10 @@ type StageConnectionState = {
 type StageContextData = {
     sendMessage: (<M extends proto$1.AnyClientComponentMessage>(msg: M) => void) | null;
     call: (<Namespace extends string, P, Action extends string & keyof P>(msg: proto$1.CallForPair<Namespace, P, Action>) => Promise<proto$1.ReturnForPair<P, Action>>) | null;
+    upload: (<M extends proto$1.AnyClientComponentCallUpload>(msg: Omit<M, 'requestId'>, data: Blob | ReadableStream<Uint8Array>) => Promise<void>) | null;
+    download: (<M extends proto$1.AnyClientComponentCallDownload>(msg: Omit<M, 'requestId'>) => Promise<ReadableStream<Uint8Array<ArrayBuffer>>>) | null;
+    addNotificationListener: ((listener: (msg: proto$1.BaseNotificationMessage<string, string>) => void) => void) | null;
+    removeNotificationListener: ((listener: (msg: proto$1.BaseNotificationMessage<string, string>) => void) => void) | null;
     renderComponent: (info: proto$1.AnyComponentProto) => ReactElement;
     connectionUuid: string | null;
     connection: StageConnectionState;
@@ -35,6 +39,7 @@ type StageContextData = {
     reconnect: () => void;
 };
 declare const StageContext: React.Context<StageContextData>;
+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;
 
 interface Props$7 {
     className?: string;
@@ -98,4 +103,4 @@ declare const Timeline: FC<Props>;
 
 declare const CORE_FRONTEND_COMPONENT_RENDERER: FrontendComponentRenderer;
 
-export { Button, CORE_FRONTEND_COMPONENT_RENDERER, Group, GroupStateWrapper, Label, NestedContent, Rect, SliderButton, type StageConnectionState, StageContext, type StageContextData, Switch, Tabs, TextInput, Timeline };
+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

@@ -18,6 +18,11 @@ var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 
 // src/components/context.ts
 
+
+
+
+
+
 var StageContext = _react.createContext.call(void 0, 
   new Proxy({}, {
     get: () => {
@@ -25,6 +30,31 @@ var StageContext = _react.createContext.call(void 0,
     }
   })
 );
+var useNotificationHandler = (typeGuard, handler, dependencyList) => {
+  const { addNotificationListener, removeNotificationListener } = _react.useContext.call(void 0, StageContext);
+  if (!addNotificationListener || !removeNotificationListener) {
+    throw new Error(
+      "useNotificationHandler must be used within a StageContext"
+    );
+  }
+  const callback = _react.useCallback.call(void 0, handler, dependencyList);
+  _react.useEffect.call(void 0, () => {
+    const listener = (msg) => {
+      if (typeGuard(msg)) {
+        callback(msg);
+      }
+    };
+    addNotificationListener(listener);
+    return () => {
+      removeNotificationListener(listener);
+    };
+  }, [
+    addNotificationListener,
+    removeNotificationListener,
+    typeGuard,
+    callback
+  ]);
+};
 
 // src/components/button.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -924,4 +954,5 @@ var CORE_FRONTEND_COMPONENT_RENDERER = {
 
 
 
-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.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

@@ -17,7 +17,12 @@ import { isCoreComponent } from "@arcanejs/protocol/core";
 import React from "react";
 
 // src/components/context.ts
-import { createContext } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect
+} from "react";
 var StageContext = createContext(
   new Proxy({}, {
     get: () => {
@@ -25,6 +30,31 @@ var StageContext = createContext(
     }
   })
 );
+var useNotificationHandler = (typeGuard, handler, dependencyList) => {
+  const { addNotificationListener, removeNotificationListener } = useContext(StageContext);
+  if (!addNotificationListener || !removeNotificationListener) {
+    throw new Error(
+      "useNotificationHandler must be used within a StageContext"
+    );
+  }
+  const callback = useCallback(handler, dependencyList);
+  useEffect(() => {
+    const listener = (msg) => {
+      if (typeGuard(msg)) {
+        callback(msg);
+      }
+    };
+    addNotificationListener(listener);
+    return () => {
+      removeNotificationListener(listener);
+    };
+  }, [
+    addNotificationListener,
+    removeNotificationListener,
+    typeGuard,
+    callback
+  ]);
+};
 
 // src/components/button.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -94,7 +124,7 @@ var Button = (props) => {
 
 // src/components/group.tsx
 import React3, {
-  useContext,
+  useContext as useContext2,
   useState
 } from "react";
 
@@ -162,8 +192,8 @@ var GroupStateWrapper = ({ openByDefault, children }) => {
   return /* @__PURE__ */ jsx3(GroupStateContext.Provider, { value: { isCollapsed, toggleCollapsed }, children });
 };
 var Group = ({ className, info }) => {
-  const groupState = useContext(GroupStateContext);
-  const { renderComponent, sendMessage } = useContext(StageContext);
+  const groupState = useContext2(GroupStateContext);
+  const { renderComponent, sendMessage } = useContext2(StageContext);
   const [editingTitle, setEditingTitle] = useState(false);
   const children = /* @__PURE__ */ jsx3(
     "div",
@@ -343,7 +373,7 @@ var Rect = ({ className, info }) => /* @__PURE__ */ jsx5(
 );
 
 // src/components/slider-button.tsx
-import React4, { useCallback } from "react";
+import React4, { useCallback as useCallback2 } from "react";
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var OPEN_SLIDER_WIDTH = 400;
 var SLIDER_PADDING = 15;
@@ -374,7 +404,7 @@ var SliderButton = ({ info, className }) => {
     }
     return NUMBER_FORMATTER.format(value2);
   };
-  const sendValue = useCallback(
+  const sendValue = useCallback2(
     (value2) => sendMessage?.({
       type: "component-message",
       namespace: "core",
@@ -384,7 +414,7 @@ var SliderButton = ({ info, className }) => {
     }),
     [sendMessage, info.key]
   );
-  const sanitizeValue = useCallback(
+  const sanitizeValue = useCallback2(
     (value2) => {
       const i = Math.round((value2 - info.min) / info.step);
       const v = i * info.step + info.min;
@@ -392,13 +422,13 @@ var SliderButton = ({ info, className }) => {
     },
     [info.min, info.max, info.step]
   );
-  const getNewValue = useCallback(
+  const getNewValue = useCallback2(
     (startValue, diff) => {
       return sanitizeValue((startValue || 0) + diff);
     },
     [sanitizeValue]
   );
-  const getCurrentInputValue = useCallback(
+  const getCurrentInputValue = useCallback2(
     (e) => {
       const float = parseFloat(e.currentTarget.value);
       return sanitizeValue(isNaN(float) ? info.value || 0 : float);
@@ -766,12 +796,12 @@ var Tabs = (props) => {
 };
 
 // src/components/text-input.tsx
-import React7, { useEffect } from "react";
+import React7, { useEffect as useEffect2 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var TextInput = ({ className, info }) => {
   const { sendMessage } = React7.useContext(StageContext);
   const ref = React7.useRef(null);
-  useEffect(() => {
+  useEffect2(() => {
     if (ref.current && ref.current.value !== info.value) {
       ref.current.value = info.value;
     }
@@ -801,17 +831,17 @@ var TextInput = ({ className, info }) => {
 };
 
 // src/components/timeline.tsx
-import React8, { useContext as useContext2, useEffect as useEffect2, useState as useState3 } from "react";
+import React8, { useContext as useContext3, useEffect as useEffect3, useState as useState3 } from "react";
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var Timeline = (props) => {
   const { className, info } = props;
-  const { timeDifferenceMs } = useContext2(StageContext);
+  const { timeDifferenceMs } = useContext3(StageContext);
   const frameState = React8.useRef({
     animationFrame: -1,
     state: null
   });
   const [currentTimeMillis, setCurrentTimeMillis] = useState3(0);
-  useEffect2(() => {
+  useEffect3(() => {
     frameState.current.state = info.state;
     const recalculateCurrentTimeMillis = () => {
       if (frameState.current.state !== info.state) {
@@ -923,5 +953,6 @@ export {
   Tabs,
   TextInput,
   Timeline,
-  core_exports as code
+  core_exports as code,
+  useNotificationHandler
 };

package/dist/util/index.d.mts

@@ -42,6 +42,6 @@ declare const useColorSchemePreferences: () => {
     colorSchemePreference: "auto" | "dark" | "light";
     setColorSchemePreference: (newPreference: ColorSchemePreference) => void;
 };
-declare const usePreferredColorScheme: () => 'dark' | 'light';
+declare const usePreferredColorScheme: () => "dark" | "light";
 
 export { type PressableOnClickListener, VALID_COLOR_SCHEME_PREFS, calculateClass, cn, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, useColorSchemePreferences, useLongPressable, usePreferredColorScheme, usePressable };

package/dist/util/index.d.ts

@@ -42,6 +42,6 @@ declare const useColorSchemePreferences: () => {
     colorSchemePreference: "auto" | "dark" | "light";
     setColorSchemePreference: (newPreference: ColorSchemePreference) => void;
 };
-declare const usePreferredColorScheme: () => 'dark' | 'light';
+declare const usePreferredColorScheme: () => "dark" | "light";
 
 export { type PressableOnClickListener, VALID_COLOR_SCHEME_PREFS, calculateClass, cn, initialiseListeners, switchToMouseMode, switchToTouchMode, trackTouch, useColorSchemePreferences, useLongPressable, usePreferredColorScheme, usePressable };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcanejs/toolkit-frontend",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "private": false,
   "description": "Library of the frontend react components used to render the @arcanejs Toolkit",
   "keywords": [],
@@ -72,16 +72,16 @@
     "eslint-plugin-better-tailwindcss": "^4.2.0",
     "tailwindcss": "^4.1.13",
     "tsup": "^8.1.0",
-    "typescript": "^5.3.3",
-    "@arcanejs/eslint-config": "^0.0.0",
-    "@arcanejs/typescript-config": "^0.0.0"
+    "typescript": "^5.7",
+    "@arcanejs/typescript-config": "^0.0.0",
+    "@arcanejs/eslint-config": "^0.0.0"
   },
   "dependencies": {
     "clsx": "^2.1.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "tailwind-merge": "^3.5.0",
-    "@arcanejs/protocol": "^0.8.0"
+    "@arcanejs/protocol": "^0.9.0"
   },
   "files": [
     "dist"