@arcanejs/react-toolkit 0.12.5 → 0.13.0

package/README.md

@@ -2,309 +2,389 @@
 
 [![NPM Version](https://img.shields.io/npm/v/%40arcanejs%2Freact-toolkit)](https://www.npmjs.com/package/@arcanejs/react-toolkit)
 
-`@arcanejs/react-toolkit` Allows you to quickly create real-time control panels
-for your single-process Node.js apps,
-using a custom react renderer, and WebSockets.
+React renderer for ArcaneJS server-side control panels.
 
-Control panels can be accessed by any number of
-browsers / devices / clients simultaneously,
-and changes caused by any client will be immediately propagated to all other
-clients.
-
-The UI has also been designed primarily with touch devices in mind,
-but also works well with a cursor and keyboard.
+This package lets you build toolkit component trees using React state/hooks on the server, then synchronize them to connected browser clients in real time.
 
 <p align="center">
   <img src="https://raw.githubusercontent.com/ArcaneWizards/arcanejs/main/packages/react-toolkit/docs/architecture.svg" alt="Architecture Diagram">
 </p>
 
-## What
+## Why Use `@arcanejs/react-toolkit`
 
-- Easily create controller UIs for Node.js processes
+This package is useful when you want a control panel for a long-running Node.js process without building a full web app stack.
 
-- Uses server-side **React** for state management and UI composition
+It gives you:
 
-  - This is not SSR, you can use `useState()` hooks etc...
+- server-side React state/hooks for control logic
+- realtime multi-client sync over WebSockets
+- a ready set of control-oriented UI components (switches, sliders, groups, tabs, timelines)
+- an extension path for custom components when core components are not enough
 
-- Instantly updates all clients using WebSockets
+Typical use cases:
 
-- Collection of 9+ components to build your UIs
+- home/lab automation control surfaces
+- AV/lighting/operations dashboards on a local network
+- internal tooling for stateful services/scripts that need live operator controls
 
-## Why
+## When It Fits (And When It Doesn't)
 
-Sometimes you're working on relatively simple local applications or scripts,
-and would like to have a way to interact with the state or configuration
-of these applications in real-time,
-for example:
+Good fit:
 
-- Lighting control or AV systems
-- Home-Automation or Office building management and operation
+- single-process Node.js apps with in-memory state
+- trusted/internal networks where operators need live controls
+- projects where React composition is preferred over manual tree mutation
 
-### Why Not
+Not a fit:
 
-This project is not designed to be a general-purpose application framework,
-in particular, it's not suitable for any project / application that:
+- internet-exposed apps requiring built-in auth/authz
+- horizontally scaled/multi-process architectures needing shared state coordination
+- general-purpose public web apps that need standard React DOM/SSR patterns
 
-- Needs to scale beyond a single Node.js process
-- Is stateless _(It's explicitly designed to manage in-memory state)_
-- Will be exposed over the internet _(no authentication has been implemented)_
+## Install
 
-## Usage
+```bash
+npm install react@^19.2.0 @arcanejs/toolkit @arcanejs/react-toolkit
+```
 
-Install the following packages:
+Version compatibility:
 
-```
-npm install --save react@^18 @arcanejs/toolkit @arcanejs/react-toolkit
-```
+- `@arcanejs/react-toolkit` is tested against React 19 and `react-reconciler` 0.33.x.
 
-Note:
+Optional helper dependencies:
 
-- We explicitly require `react` version 18
-- We don't need `react-dom` or any react native libraries,
-  `@arcanejs/react-toolkit` is the react renderer.
+- `zod` is required if you use `@arcanejs/react-toolkit/data`
 
-Then you can then create control panels using react to manage the
-server-side state like this:
+## Quick Start
 
-```ts
+```tsx
 import { useState } from 'react';
 import { Toolkit } from '@arcanejs/toolkit';
-import { ToolkitRenderer, Group, Switch, SliderButton } from '@arcanejs/react-toolkit';
+import {
+  ToolkitRenderer,
+  Group,
+  Switch,
+  SliderButton,
+} from '@arcanejs/react-toolkit';
 
 const toolkit = new Toolkit();
+toolkit.start({ mode: 'automatic', port: 3000 });
 
-// Expose the toolkit control panel on HTTP port 3000
-// Navigate to http://localhost:3000 to access the control panel
-// this will be printed in your console
-toolkit.start({
-  mode: 'automatic',
-  port: 3000,
-});
-
-const ControlPanel = () => {
-  const [switchState, setSwitchState] = useState<'off' | 'on'>('off');
-  const [sliderValue, setSliderValue] = useState(50);
+function App() {
+  const [enabled, setEnabled] = useState<'on' | 'off'>('off');
+  const [level, setLevel] = useState(50);
 
   return (
-    <Group direction='vertical'>
+    <Group direction="vertical" title="Controller">
       <Group>
-        {`Switch State: ${switchState}`}
-        <Switch
-            value={switchState}
-            onChange={setSwitchState}
-          />
+        {`Enabled: ${enabled}`}
+        <Switch value={enabled} onChange={setEnabled} />
       </Group>
       <Group>
-        {`Slider Value: ${sliderValue}`}
-        <SliderButton
-          value={sliderValue}
-          onChange={setSliderValue}
-          min={0}
-          max={100}
-          />
+        {`Level: ${level}`}
+        <SliderButton value={level} onChange={setLevel} min={0} max={100} />
       </Group>
     </Group>
   );
-};
+}
 
-// Start rendering the control panel with @arcanejs/react-toolkit
-ToolkitRenderer.render(<ControlPanel />, toolkit);
+ToolkitRenderer.render(<App />, toolkit);
 ```
 
-You would then be able to access the following control panel
-from [localhost:3000](http://localhost:3000):
+## Core Exports
 
-![Control Panel Screenshot](https://raw.githubusercontent.com/ArcaneWizards/arcanejs/main/packages/react-toolkit/docs/example-controller.png)
+### From `@arcanejs/react-toolkit`
 
-Please note:
+- `ToolkitRenderer`
+  - `render(element, toolkit, rootGroupProps?, config?)`
+  - `renderGroup(element, group, config?)`
+- Core React components:
+  - `Button`, `Group`, `GroupHeader`, `Label`, `Rect`, `SliderButton`, `Switch`, `Tab`, `Tabs`, `TextInput`, `Timeline`
+- Extension helpers:
+  - `prepareComponents(namespace, components)`
+  - `CoreComponents`
 
-- You can not use normal `react-dom` / HTML elements in these applications
-  or components, only `@arcanejs` components are supported.
+Core component props/events map directly to the corresponding classes in `@arcanejs/toolkit`.
 
-- You are welcome to abstract / componentize your application as you like,
-  in the same manner that you would any `react-dom` or `react-native` project.
+## Core Component API
 
-  _See the [counter example](https://github.com/ArcaneWizards/arcanejs/blob/main/examples/react/src/counter.tsx)._
+These are the React components most users consume directly from `@arcanejs/react-toolkit`.
 
-- This react / component-tree / state is managed server-side,
-  and does not accurately represent the HTML used on the frontend.
-  Your `@arcanejs` tree is converted to a JSON representation,
-  and then sent to clients / browsers over a WebSocket.
-  There is then a separate `react-dom` application
-  that is loaded in the browser,
-  and then used to render the JSON representation of the `@arcanejs` tree.
-
-- It's possible to define your own custom components,
-  however this functionality is not documented.
-
-  You can see code examples of this functionality here in the
-  [custom components example app](https://github.com/ArcaneWizards/arcanejs/tree/main/examples/custom-components).
+### `Button`
 
-## Components
+Props:
 
-For full example usage all of our components in applications that are
-ready-to-run, we recommend that you check-out the
-[examples directory](https://github.com/ArcaneWizards/arcanejs/tree/main/examples/react).
+- `text?: string | null`
+- `icon?: string | null` (Material Symbols Outlined icon name)
+- `mode?: 'normal' | 'pressed'`
+- `error?: string | null`
+- `onClick?: (connection) => void | Promise<void>`
 
-### `Button`
+Notes:
 
-**Properties:**
+- `onClick` uses request/response semantics and can be async.
+- Throwing (or rejecting) in `onClick` surfaces an error state in the UI.
 
-- `text: string` (optional)
+```tsx
+<Button
+  text="Run"
+  icon="play_arrow"
+  onClick={async () => {
+    await runTask();
+  }}
+/>
+```
 
-  Text to display on the button
+### `Group`
 
-- `icon: string` (optional)
+Props:
 
-  In icon name from [Material Icons](https://fonts.google.com/icons) to include
-  on the button.
+- `direction?: 'horizontal' | 'vertical'`
+- `wrap?: boolean`
+- `border?: true`
+- `title?: string | null`
+- `labels?: Array<{ text: string }> | null`
+- `editableTitle?: boolean`
+- `defaultCollapsibleState?: 'open' | 'closed' | 'auto'`
+- `onTitleChanged?: (title, connection) => void`
 
-- `error: string` (optional)
+Use `Group` as the primary layout primitive and nest groups freely.
 
-  When set, highlight the button in a way to indicate an error,
-  and expose the given text as a tooltip upon user hover.
+```tsx
+<Group
+  direction="vertical"
+  title="Fixture Settings"
+  border
+  editableTitle
+  onTitleChanged={(title) => setPanelTitle(title)}
+>
+  <Label text="Master Intensity" />
+  <SliderButton value={master} min={0} max={100} onChange={setMaster} />
+</Group>
+```
 
-- `mode: 'normal' | 'pressed'` (default: `'normal'`)
+### `GroupHeader`
 
-  Should the button display as pressed or not.
+`GroupHeader` lets you place controls in a group's header area.
 
-- `onClick: () => void | Promise<void>`
+```tsx
+<Group title="Playlist">
+  <GroupHeader>
+    <Button text="Add" onClick={addItem} />
+    <Button text="Shuffle" onClick={shuffle} />
+  </GroupHeader>
+  <Label text="Current Queue" />
+</Group>
+```
 
-  Set an event listener for when the button is pressed.
+### `Label`
 
-  The listener can throw an exception, or return a promise that rejects,
-  to indicate an error and propagate an error message to the user,
-  similar to setting the `error` property.
+Props:
 
-e.g.:
+- `text: string | null`
+- `bold?: boolean`
 
 ```tsx
-const MyComponent = () => (
-  <Button text="Stop" onClick={() => doAThing()} icon="close" />
-);
+<Label text={`Connected: ${isConnected ? 'yes' : 'no'}`} bold />
 ```
 
-### `Group`
+### `Rect`
+
+Props:
 
-This component is the primary building block when it comes to creating layouts,
-you generally have many groups,
-and nest them to achieve the desired layout.
+- `color?: string`
+- `grow?: boolean`
 
-You can think of a group as similar to a `<div>` or `<section>` in HTML.
+Useful for color/state swatches.
+
+```tsx
+<Group>
+  <Label text="Current Color" />
+  <Rect color={`hsl(${hue}deg 100% 50%)`} grow />
+</Group>
+```
 
-**Properties:**
+### `SliderButton`
 
-- `direction: 'horizontal' | 'vertical'` (default: `'horizontal'`)
+Props:
 
-  Whether to arrange the children of this group in a row or column.
+- `value: number` (required)
+- `min?: number` (default `0`)
+- `max?: number` (default `255`)
+- `step?: number` (default `5`)
+- `defaultValue?: number` (for uncontrolled style workflows)
+- `gradient?: Array<{ color: string; position: number }>`
+- `grow?: boolean`
+- `onChange?: (value, connection) => void | Promise<void>`
 
-- `wrap: boolean` (default: false)
+```tsx
+<SliderButton
+  value={temperature}
+  min={2700}
+  max={6500}
+  step={100}
+  onChange={setTemperature}
+/>
+```
 
-  If true, when the group runs out of vertical or horizontal space, child
-  components will be wrapped, and start to be arranged on additional columns
-  or rows.
+### `Switch`
 
-- `border: boolean` (default: false)
+Props:
 
-  If true, this group will have a border and a different color background
-  to its parent.
+- `value?: 'on' | 'off'`
+- `defaultValue?: 'on' | 'off'`
+- `onChange?: (state, connection) => void | Promise<void>`
 
-  This allows you to add a distinctive border between components,
-  without needing to set a header, add header components,
-  or make it collapsible.
+```tsx
+<Switch value={enabled} onChange={setEnabled} />
+```
 
-- `title: string` (optional)
+### `Tabs` and `Tab`
 
-  If set, will display a title as a header at the top of the group.
+`Tabs` only accepts `Tab` children. Each `Tab` should contain one child component subtree.
 
-- `editableTitle: boolean` (default: false)
+```tsx
+<Tabs>
+  <Tab name="Input">
+    <Group>
+      <TextInput value={input} onChange={setInput} />
+    </Group>
+  </Tab>
+  <Tab name="Output">
+    <Group>
+      <Label text={output} />
+    </Group>
+  </Tab>
+</Tabs>
+```
 
-  If true,
-  will allow the user to click on the title to change it,
-  which will trigger a callback to the listener `onTitleChanged`.
+### `TextInput`
 
-- `defaultCollapsibleState: 'open' | 'closed' | 'auto'`
-  (optional, default: `undefined`)
+Props:
 
-  If set,
-  will allow the user to expand / collapse the given group,
-  by default set to the given state.
+- `value?: string | null`
+- `onChange?: (value, connection) => void | Promise<void>`
 
-  Whether a group is open or closed is independent on a per-client basis,
-  and a fresh page reload will set the collapsible state to the default set here.
+```tsx
+<TextInput value={name} onChange={setName} />
+```
 
-- `labels: { text: string }[] | null` (default: null)
+### `Timeline`
 
-  Adds labels next to the title in the group header.
+Props:
 
-**Special Child Components**
+- `state?`:
+  - `{ state: 'playing'; totalTimeMillis; effectiveStartTime; speed }`
+  - `{ state: 'stopped'; totalTimeMillis; currentTimeMillis }`
+- `title?: string | null`
+- `subtitles?: string[] | null`
+- `source?: { name: string } | null`
 
-- `GroupHeader`
+```tsx
+<Timeline
+  title="Show Timeline"
+  subtitles={[`Cue ${cue}`, `BPM ${bpm}`]}
+  source={{ name: activeTrack }}
+  state={
+    playing
+      ? {
+          state: 'playing',
+          totalTimeMillis: duration,
+          effectiveStartTime: startedAt,
+          speed: 1,
+        }
+      : {
+          state: 'stopped',
+          totalTimeMillis: duration,
+          currentTimeMillis: pausedAt,
+        }
+  }
+/>
+```
 
-  You can add components to the header of a group by wrapping them in a
-  `<GroupHeader/>` component directly under the `<Group/>`.
+## Helper Modules
 
-  You can add as many separate `GroupHeader` components as needed throughout
-  a `<Group>` component's direct children,
-  and all nested components will be placed in the header.
+### `@arcanejs/react-toolkit/connections`
 
-  Currently `GroupHeader` only supports rendering the following children:
+Connection-awareness for server-side React trees:
 
-  - `Button`
+- `ConnectionsContext`
+- `ConnectionsContextProvider`
 
-TODO: example
+Use this to render connection-specific UI or track per-connection state.
 
-### `Label`
+### `@arcanejs/react-toolkit/data`
 
-TODO
+JSON file persistence helpers backed by Zod validation:
 
-### `Rect`
+- `createDataFileDefinition`
+- `useDataFileContext`
+- `useDataFileData`
+- `useDataFileUpdater`
+- `useDataFile`
+- `useDataFileCore`
 
-TODO
+Supports:
 
-### `SliderButton`
+- lazy file creation with defaults
+- schema validation on load
+- throttled disk writes
+- path switching behavior (`onPathChange: 'transfer' | 'defaultValue'`)
 
-TODO
+### `@arcanejs/react-toolkit/colors`
 
-### `Switch`
+- `HslColor` type
+- `HslColorPicker` component
 
-TODO
+### `@arcanejs/react-toolkit/logging`
 
-### `Tabs`
+- `LoggerContext`
+- `useLogger()`
 
-TODO
+## Custom Component Namespaces
 
-### `TextInput`
+Use `prepareComponents(...)` + `ToolkitRenderer` config to add custom namespaces:
 
-TODO
+```tsx
+import {
+  prepareComponents,
+  CoreComponents,
+  ToolkitRenderer,
+} from '@arcanejs/react-toolkit';
+
+const Custom = prepareComponents('custom', {
+  MyComponent,
+});
 
-### `Timeline`
+ToolkitRenderer.render(
+  <App />,
+  toolkit,
+  {},
+  {
+    componentNamespaces: [CoreComponents, Custom],
+  },
+);
+```
 
-TODO
+You must also implement matching protocol/backend/frontend layers. See:
 
-## [Examples](https://github.com/ArcaneWizards/arcanejs/tree/main/examples/react)
+- <https://github.com/ArcaneWizards/arcanejs/tree/main/examples/custom-components>
 
-For a comprehensive list of examples,
-please see the example directory in the arcane monorepo:
-<https://github.com/ArcaneWizards/arcanejs/tree/main/examples/react>
+## Important Constraints
 
-### [Example Philips Hue App](https://github.com/arcanejs/hue-example)
+- This is a custom renderer, not React DOM. Standard HTML elements are not supported.
+- React state/hooks run on the server process.
+- Toolkit root can only be set once.
+- Architecture is single-process and intentionally stateful.
+- No built-in authentication/authorization.
 
-Check out this example repository that uses `@arcanejs/react-toolkit`
-to create an app that can be used to control a Philips Hue Bridge
-on your local network.
+## Stability / Suitability
 
-## Status / Suitability / Security Disclaimer
+ArcaneJS uses `react-reconciler` APIs and is considered experimental. It is best suited for trusted-network/internal control applications.
 
-This project is **experimental**,
-and takes advantage of unstable `react` APIs exposed via `react-render`.
-It's not suitable for production or commercial projects yet,
-especially those that rely on regular updates of dependencies
-for security reasons,
-as usage of this project may make it difficult to keep `react` up-to-date
-(that being said, the license does not prohibit this,
-so feel free to at-your-own-risk).
+## Examples
 
-There are also no authentication mechanisms implemented yet,
-so be careful when exposing your control panels over the network,
-as this will allow anyone to interact with your processes.
+- React examples: <https://github.com/ArcaneWizards/arcanejs/tree/main/examples/react>
+- Main readme example: <https://github.com/ArcaneWizards/arcanejs/blob/main/examples/react/src/readme.tsx>
+- Connections example: <https://github.com/ArcaneWizards/arcanejs/blob/main/examples/react/src/connections.tsx>
+- Data file example: <https://github.com/ArcaneWizards/arcanejs/blob/main/examples/react/src/data-file.tsx>

package/dist/{chunk-Q54JXYCV.js → chunk-EJVUDIQP.js}

@@ -4,12 +4,13 @@ var _chunkRT2VSMJLjs = require('./chunk-RT2VSMJL.js');
 
 // src/index.tsx
 var _reactreconciler = require('react-reconciler'); var _reactreconciler2 = _interopRequireDefault(_reactreconciler);
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 var _constants = require('react-reconciler/constants');
 var _toolkit = require('@arcanejs/toolkit'); var ld = _interopRequireWildcard(_toolkit);
 var _base = require('@arcanejs/toolkit/components/base');
 
 // src/registry.ts
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
 var prepareComponents = (namespace, defn) => {
   const entries = Object.entries(defn);
   const _creators = entries.reduce((acc, [key, cls]) => {
@@ -67,9 +68,48 @@ var CoreComponents = prepareComponents("core", {
 // src/index.tsx
 var _jsxruntime = require('react/jsx-runtime');
 var canSetProps = (instance) => instance instanceof _base.Base;
-var hostConfig = ({
-  componentNamespaces
-}) => {
+var getPropsToSet = (props) => {
+  const updates = {};
+  for (const [key, val] of Object.entries(props)) {
+    if (key !== "children") {
+      updates[key] = val;
+    }
+  }
+  return updates;
+};
+var setInstanceProps = (instance, props) => {
+  if (canSetProps(instance)) {
+    instance.setProps(props);
+  } else {
+    throw new Error(`Unexpected Instance: ${instance}`);
+  }
+};
+var scheduleMicrotaskCompat = typeof queueMicrotask === "function" ? queueMicrotask : (cb) => {
+  Promise.resolve().then(cb);
+};
+var reportRendererError = (error) => {
+  console.error(error);
+};
+var createContainerCompat = (reconciler, container) => {
+  const createContainer = reconciler.createContainer;
+  if (createContainer.length <= 4) {
+    return createContainer(container, 0, false, null);
+  }
+  return createContainer(
+    container,
+    0,
+    null,
+    false,
+    null,
+    "",
+    reportRendererError,
+    reportRendererError,
+    reportRendererError,
+    null
+  );
+};
+var ROOT_HOST_CONTEXT = {};
+var hostConfig = ({ componentNamespaces }) => {
   const processedNamespaces = {};
   for (const namespace of componentNamespaces) {
     if (processedNamespaces[namespace._namespace]) {
@@ -77,12 +117,17 @@ var hostConfig = ({
     }
     processedNamespaces[namespace._namespace] = namespace;
   }
-  return {
+  const hostTransitionContext = _react2.default.createContext(null);
+  let currentUpdatePriority = _constants.DefaultEventPriority;
+  const config = {
     supportsMutation: true,
     supportsPersistence: false,
     noTimeout: -1,
     isPrimaryRenderer: true,
     supportsHydration: false,
+    supportsMicrotasks: true,
+    NotPendingTransition: null,
+    HostTransitionContext: hostTransitionContext,
     afterActiveInstanceBlur: () => null,
     appendChild: (parentInstance, child) => {
       if (parentInstance instanceof _base.BaseParent) {
@@ -104,14 +149,23 @@ var hostConfig = ({
     beforeActiveInstanceBlur: () => null,
     cancelTimeout: (id) => clearTimeout(id),
     clearContainer: (container) => container.removeAllChildren(),
-    commitMount: () => {
+    commitMount: (_instance, _type, _props) => {
       throw new Error(`Unexpected call to commitMount()`);
     },
-    commitUpdate(instance, updatePayload, _type, _prevProps, _nextProps, _internalHandle) {
-      if (canSetProps(instance)) {
-        instance.setProps(updatePayload);
-      } else {
-        throw new Error(`Unexpected Instance: ${instance}`);
+    commitUpdate(instance, ...args) {
+      if (typeof args[0] === "string") {
+        const nextProps2 = args[2];
+        setInstanceProps(instance, getPropsToSet(nextProps2));
+        return;
+      }
+      const updatePayload = args[0];
+      if (updatePayload) {
+        setInstanceProps(instance, updatePayload);
+        return;
+      }
+      const nextProps = args[3];
+      if (nextProps) {
+        setInstanceProps(instance, getPropsToSet(nextProps));
       }
     },
     commitTextUpdate: (textInstance, _oldText, newText) => textInstance.setText(newText),
@@ -137,6 +191,7 @@ var hostConfig = ({
     detachDeletedInstance: () => null,
     getChildHostContext: (parentHostContext) => parentHostContext,
     getCurrentEventPriority: () => _constants.DefaultEventPriority,
+    getCurrentUpdatePriority: () => currentUpdatePriority,
     getInstanceFromNode: () => {
       throw new Error("Not yet implemented.");
     },
@@ -144,7 +199,7 @@ var hostConfig = ({
       throw new Error("Not yet implemented.");
     },
     getPublicInstance: (instance) => instance,
-    getRootHostContext: () => null,
+    getRootHostContext: () => ROOT_HOST_CONTEXT,
     insertBefore: (parentInstance, child, beforeChild) => {
       if (parentInstance instanceof _base.BaseParent) {
         parentInstance.insertBefore(child, beforeChild);
@@ -154,21 +209,17 @@ var hostConfig = ({
     },
     insertInContainerBefore: (container, child, beforeChild) => container.insertBefore(child, beforeChild),
     finalizeInitialChildren: () => false,
+    maySuspendCommit: () => false,
+    preloadInstance: () => false,
     prepareForCommit: () => null,
     preparePortalMount: () => null,
     prepareScopeUpdate: () => null,
     prepareUpdate: (_instance, _type, _oldProps, newProps, _rootContainer, _hostContext) => {
-      const updates = {};
-      for (const [key, val] of Object.entries(newProps)) {
-        if (key !== "children") {
-          updates[key] = val;
-        }
-      }
-      if (Object.keys(updates).length) {
-        return updates;
-      } else {
-        return null;
-      }
+      const updates = getPropsToSet(newProps);
+      return Object.keys(updates).length ? updates : null;
+    },
+    requestPostPaintCallback: (callback) => {
+      setTimeout(() => callback(Date.now()), 0);
     },
     removeChild(parentInstance, child) {
       if (parentInstance instanceof _base.BaseParent) {
@@ -182,31 +233,36 @@ var hostConfig = ({
     resetTextContent: () => {
       throw new Error(`Unexpected call to resetTextContent()`);
     },
+    resetFormInstance: () => null,
+    resolveEventTimeStamp: () => Date.now(),
+    resolveEventType: () => null,
+    resolveUpdatePriority: () => currentUpdatePriority,
     scheduleTimeout: (fn, delay) => setTimeout(fn, delay),
-    shouldSetTextContent: () => false,
-    // Not-implemented
-    hideInstance: () => {
-      console.log("Not-implemented: hideInstance");
-    },
-    hideTextInstance: () => {
-      console.log("Not-implemented: hideTextInstance");
+    scheduleMicrotask: scheduleMicrotaskCompat,
+    setCurrentUpdatePriority: (newPriority) => {
+      currentUpdatePriority = newPriority;
     },
-    unhideInstance: () => {
-      console.log("Not-implemented: unhideInstance");
-    },
-    unhideTextInstance: () => {
-      console.log("Not-implemented: unhideTextInstance");
-    }
+    shouldAttemptEagerTransition: () => false,
+    shouldSetTextContent: () => false,
+    startSuspendingCommit: () => null,
+    suspendInstance: () => null,
+    trackSchedulerEvent: () => null,
+    waitForCommitToBeReady: () => null,
+    hideInstance: () => null,
+    hideTextInstance: () => null,
+    unhideInstance: () => null,
+    unhideTextInstance: () => null
   };
+  return config;
 };
 var ToolkitRenderer = {
   renderGroup: (component, container, config = {
     componentNamespaces: [CoreComponents]
   }) => {
     const reconciler = _reactreconciler2.default.call(void 0, hostConfig(config));
-    const root = reconciler.createContainer(container, 0, false, null);
+    const root = createContainerCompat(reconciler, container);
     const componentWithContexts = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRT2VSMJLjs.LoggerContext.Provider, { value: container.log, children: component });
-    reconciler.updateContainer(componentWithContexts, root, null);
+    reconciler.updateContainer(componentWithContexts, root, null, void 0);
   },
   render: (component, container, rootGroupProps, config = {
     componentNamespaces: [CoreComponents]

package/dist/{chunk-CAHNLXTY.mjs → chunk-TP2BI3OM.mjs}

@@ -4,6 +4,7 @@ import {
 
 // src/index.tsx
 import Reconciler from "react-reconciler";
+import React2 from "react";
 import { DefaultEventPriority } from "react-reconciler/constants";
 import * as ld from "@arcanejs/toolkit";
 import { Base, BaseParent } from "@arcanejs/toolkit/components/base";
@@ -67,9 +68,48 @@ var CoreComponents = prepareComponents("core", {
 // src/index.tsx
 import { jsx } from "react/jsx-runtime";
 var canSetProps = (instance) => instance instanceof Base;
-var hostConfig = ({
-  componentNamespaces
-}) => {
+var getPropsToSet = (props) => {
+  const updates = {};
+  for (const [key, val] of Object.entries(props)) {
+    if (key !== "children") {
+      updates[key] = val;
+    }
+  }
+  return updates;
+};
+var setInstanceProps = (instance, props) => {
+  if (canSetProps(instance)) {
+    instance.setProps(props);
+  } else {
+    throw new Error(`Unexpected Instance: ${instance}`);
+  }
+};
+var scheduleMicrotaskCompat = typeof queueMicrotask === "function" ? queueMicrotask : (cb) => {
+  Promise.resolve().then(cb);
+};
+var reportRendererError = (error) => {
+  console.error(error);
+};
+var createContainerCompat = (reconciler, container) => {
+  const createContainer = reconciler.createContainer;
+  if (createContainer.length <= 4) {
+    return createContainer(container, 0, false, null);
+  }
+  return createContainer(
+    container,
+    0,
+    null,
+    false,
+    null,
+    "",
+    reportRendererError,
+    reportRendererError,
+    reportRendererError,
+    null
+  );
+};
+var ROOT_HOST_CONTEXT = {};
+var hostConfig = ({ componentNamespaces }) => {
   const processedNamespaces = {};
   for (const namespace of componentNamespaces) {
     if (processedNamespaces[namespace._namespace]) {
@@ -77,12 +117,17 @@ var hostConfig = ({
     }
     processedNamespaces[namespace._namespace] = namespace;
   }
-  return {
+  const hostTransitionContext = React2.createContext(null);
+  let currentUpdatePriority = DefaultEventPriority;
+  const config = {
     supportsMutation: true,
     supportsPersistence: false,
     noTimeout: -1,
     isPrimaryRenderer: true,
     supportsHydration: false,
+    supportsMicrotasks: true,
+    NotPendingTransition: null,
+    HostTransitionContext: hostTransitionContext,
     afterActiveInstanceBlur: () => null,
     appendChild: (parentInstance, child) => {
       if (parentInstance instanceof BaseParent) {
@@ -104,14 +149,23 @@ var hostConfig = ({
     beforeActiveInstanceBlur: () => null,
     cancelTimeout: (id) => clearTimeout(id),
     clearContainer: (container) => container.removeAllChildren(),
-    commitMount: () => {
+    commitMount: (_instance, _type, _props) => {
       throw new Error(`Unexpected call to commitMount()`);
     },
-    commitUpdate(instance, updatePayload, _type, _prevProps, _nextProps, _internalHandle) {
-      if (canSetProps(instance)) {
-        instance.setProps(updatePayload);
-      } else {
-        throw new Error(`Unexpected Instance: ${instance}`);
+    commitUpdate(instance, ...args) {
+      if (typeof args[0] === "string") {
+        const nextProps2 = args[2];
+        setInstanceProps(instance, getPropsToSet(nextProps2));
+        return;
+      }
+      const updatePayload = args[0];
+      if (updatePayload) {
+        setInstanceProps(instance, updatePayload);
+        return;
+      }
+      const nextProps = args[3];
+      if (nextProps) {
+        setInstanceProps(instance, getPropsToSet(nextProps));
       }
     },
     commitTextUpdate: (textInstance, _oldText, newText) => textInstance.setText(newText),
@@ -137,6 +191,7 @@ var hostConfig = ({
     detachDeletedInstance: () => null,
     getChildHostContext: (parentHostContext) => parentHostContext,
     getCurrentEventPriority: () => DefaultEventPriority,
+    getCurrentUpdatePriority: () => currentUpdatePriority,
     getInstanceFromNode: () => {
       throw new Error("Not yet implemented.");
     },
@@ -144,7 +199,7 @@ var hostConfig = ({
       throw new Error("Not yet implemented.");
     },
     getPublicInstance: (instance) => instance,
-    getRootHostContext: () => null,
+    getRootHostContext: () => ROOT_HOST_CONTEXT,
     insertBefore: (parentInstance, child, beforeChild) => {
       if (parentInstance instanceof BaseParent) {
         parentInstance.insertBefore(child, beforeChild);
@@ -154,21 +209,17 @@ var hostConfig = ({
     },
     insertInContainerBefore: (container, child, beforeChild) => container.insertBefore(child, beforeChild),
     finalizeInitialChildren: () => false,
+    maySuspendCommit: () => false,
+    preloadInstance: () => false,
     prepareForCommit: () => null,
     preparePortalMount: () => null,
     prepareScopeUpdate: () => null,
     prepareUpdate: (_instance, _type, _oldProps, newProps, _rootContainer, _hostContext) => {
-      const updates = {};
-      for (const [key, val] of Object.entries(newProps)) {
-        if (key !== "children") {
-          updates[key] = val;
-        }
-      }
-      if (Object.keys(updates).length) {
-        return updates;
-      } else {
-        return null;
-      }
+      const updates = getPropsToSet(newProps);
+      return Object.keys(updates).length ? updates : null;
+    },
+    requestPostPaintCallback: (callback) => {
+      setTimeout(() => callback(Date.now()), 0);
     },
     removeChild(parentInstance, child) {
       if (parentInstance instanceof BaseParent) {
@@ -182,31 +233,36 @@ var hostConfig = ({
     resetTextContent: () => {
       throw new Error(`Unexpected call to resetTextContent()`);
     },
+    resetFormInstance: () => null,
+    resolveEventTimeStamp: () => Date.now(),
+    resolveEventType: () => null,
+    resolveUpdatePriority: () => currentUpdatePriority,
     scheduleTimeout: (fn, delay) => setTimeout(fn, delay),
-    shouldSetTextContent: () => false,
-    // Not-implemented
-    hideInstance: () => {
-      console.log("Not-implemented: hideInstance");
-    },
-    hideTextInstance: () => {
-      console.log("Not-implemented: hideTextInstance");
-    },
-    unhideInstance: () => {
-      console.log("Not-implemented: unhideInstance");
+    scheduleMicrotask: scheduleMicrotaskCompat,
+    setCurrentUpdatePriority: (newPriority) => {
+      currentUpdatePriority = newPriority;
     },
-    unhideTextInstance: () => {
-      console.log("Not-implemented: unhideTextInstance");
-    }
+    shouldAttemptEagerTransition: () => false,
+    shouldSetTextContent: () => false,
+    startSuspendingCommit: () => null,
+    suspendInstance: () => null,
+    trackSchedulerEvent: () => null,
+    waitForCommitToBeReady: () => null,
+    hideInstance: () => null,
+    hideTextInstance: () => null,
+    unhideInstance: () => null,
+    unhideTextInstance: () => null
   };
+  return config;
 };
 var ToolkitRenderer = {
   renderGroup: (component, container, config = {
     componentNamespaces: [CoreComponents]
   }) => {
     const reconciler = Reconciler(hostConfig(config));
-    const root = reconciler.createContainer(container, 0, false, null);
+    const root = createContainerCompat(reconciler, container);
     const componentWithContexts = /* @__PURE__ */ jsx(LoggerContext.Provider, { value: container.log, children: component });
-    reconciler.updateContainer(componentWithContexts, root, null);
+    reconciler.updateContainer(componentWithContexts, root, null, void 0);
   },
   render: (component, container, rootGroupProps, config = {
     componentNamespaces: [CoreComponents]

package/dist/colors.js

@@ -2,7 +2,7 @@
 
 
 
-var _chunkQ54JXYCVjs = require('./chunk-Q54JXYCV.js');
+var _chunkEJVUDIQPjs = require('./chunk-EJVUDIQP.js');
 require('./chunk-RT2VSMJL.js');
 
 // src/colors.tsx
@@ -56,10 +56,10 @@ var HslColorPicker = ({
     },
     [onChange]
   );
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkQ54JXYCVjs.Group, { ...DEFAULT_GROUP_PROPS, ...groupProps, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQ54JXYCVjs.Rect, { color: `hsl(${hue}deg ${saturation}% ${lightness}% / ${alpha})` }),
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkEJVUDIQPjs.Group, { ...DEFAULT_GROUP_PROPS, ...groupProps, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEJVUDIQPjs.Rect, { color: `hsl(${hue}deg ${saturation}% ${lightness}% / ${alpha})` }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkQ54JXYCVjs.SliderButton,
+      _chunkEJVUDIQPjs.SliderButton,
       {
         value: hue,
         onChange: setHue,
@@ -71,7 +71,7 @@ var HslColorPicker = ({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkQ54JXYCVjs.SliderButton,
+      _chunkEJVUDIQPjs.SliderButton,
       {
         value: saturation,
         onChange: setSat,
@@ -87,7 +87,7 @@ var HslColorPicker = ({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkQ54JXYCVjs.SliderButton,
+      _chunkEJVUDIQPjs.SliderButton,
       {
         value: lightness,
         onChange: setLightness,
@@ -103,7 +103,7 @@ var HslColorPicker = ({
       }
     ),
     showAlpha && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkQ54JXYCVjs.SliderButton,
+      _chunkEJVUDIQPjs.SliderButton,
       {
         value: alpha,
         onChange: setAlpha,

package/dist/colors.mjs

@@ -2,7 +2,7 @@ import {
   Group,
   Rect,
   SliderButton
-} from "./chunk-CAHNLXTY.mjs";
+} from "./chunk-TP2BI3OM.mjs";
 import "./chunk-TOGR56FN.mjs";
 
 // src/colors.tsx

package/dist/index.d.mts

@@ -51,8 +51,8 @@ type ReactToolkitConfig = {
     componentNamespaces: Array<PreparedComponents<any>>;
 };
 declare const ToolkitRenderer: {
-    renderGroup: (component: JSX.Element, container: ld.Group, config?: ReactToolkitConfig) => void;
-    render: (component: JSX.Element, container: ld.Toolkit, rootGroupProps?: Props, config?: ReactToolkitConfig) => void;
+    renderGroup: (component: React__default.ReactElement, container: ld.Group, config?: ReactToolkitConfig) => void;
+    render: (component: React__default.ReactElement, container: ld.Toolkit, rootGroupProps?: Props, config?: ReactToolkitConfig) => void;
 };
 
 declare const Button: React__default.ForwardRefExoticComponent<Partial<Partial<_arcanejs_toolkit_components_button.InternalProps>> & React__default.RefAttributes<ld.Button>>;

package/dist/index.d.ts

@@ -51,8 +51,8 @@ type ReactToolkitConfig = {
     componentNamespaces: Array<PreparedComponents<any>>;
 };
 declare const ToolkitRenderer: {
-    renderGroup: (component: JSX.Element, container: ld.Group, config?: ReactToolkitConfig) => void;
-    render: (component: JSX.Element, container: ld.Toolkit, rootGroupProps?: Props, config?: ReactToolkitConfig) => void;
+    renderGroup: (component: React__default.ReactElement, container: ld.Group, config?: ReactToolkitConfig) => void;
+    render: (component: React__default.ReactElement, container: ld.Toolkit, rootGroupProps?: Props, config?: ReactToolkitConfig) => void;
 };
 
 declare const Button: React__default.ForwardRefExoticComponent<Partial<Partial<_arcanejs_toolkit_components_button.InternalProps>> & React__default.RefAttributes<ld.Button>>;

package/dist/index.js

@@ -13,7 +13,7 @@
 
 
 
-var _chunkQ54JXYCVjs = require('./chunk-Q54JXYCV.js');
+var _chunkEJVUDIQPjs = require('./chunk-EJVUDIQP.js');
 require('./chunk-RT2VSMJL.js');
 
 
@@ -30,4 +30,4 @@ require('./chunk-RT2VSMJL.js');
 
 
 
-exports.Button = _chunkQ54JXYCVjs.Button; exports.CoreComponents = _chunkQ54JXYCVjs.CoreComponents; exports.Group = _chunkQ54JXYCVjs.Group; exports.GroupHeader = _chunkQ54JXYCVjs.GroupHeader; exports.Label = _chunkQ54JXYCVjs.Label; exports.Rect = _chunkQ54JXYCVjs.Rect; exports.SliderButton = _chunkQ54JXYCVjs.SliderButton; exports.Switch = _chunkQ54JXYCVjs.Switch; exports.Tab = _chunkQ54JXYCVjs.Tab; exports.Tabs = _chunkQ54JXYCVjs.Tabs; exports.TextInput = _chunkQ54JXYCVjs.TextInput; exports.Timeline = _chunkQ54JXYCVjs.Timeline; exports.ToolkitRenderer = _chunkQ54JXYCVjs.ToolkitRenderer; exports.prepareComponents = _chunkQ54JXYCVjs.prepareComponents;
+exports.Button = _chunkEJVUDIQPjs.Button; exports.CoreComponents = _chunkEJVUDIQPjs.CoreComponents; exports.Group = _chunkEJVUDIQPjs.Group; exports.GroupHeader = _chunkEJVUDIQPjs.GroupHeader; exports.Label = _chunkEJVUDIQPjs.Label; exports.Rect = _chunkEJVUDIQPjs.Rect; exports.SliderButton = _chunkEJVUDIQPjs.SliderButton; exports.Switch = _chunkEJVUDIQPjs.Switch; exports.Tab = _chunkEJVUDIQPjs.Tab; exports.Tabs = _chunkEJVUDIQPjs.Tabs; exports.TextInput = _chunkEJVUDIQPjs.TextInput; exports.Timeline = _chunkEJVUDIQPjs.Timeline; exports.ToolkitRenderer = _chunkEJVUDIQPjs.ToolkitRenderer; exports.prepareComponents = _chunkEJVUDIQPjs.prepareComponents;

package/dist/index.mjs

@@ -13,7 +13,7 @@ import {
   Timeline,
   ToolkitRenderer,
   prepareComponents
-} from "./chunk-CAHNLXTY.mjs";
+} from "./chunk-TP2BI3OM.mjs";
 import "./chunk-TOGR56FN.mjs";
 export {
   Button,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcanejs/react-toolkit",
-  "version": "0.12.5",
+  "version": "0.13.0",
   "private": false,
   "description": "Build web-accessible control interfaces for your long-running Node.js processes",
   "keywords": [
@@ -55,8 +55,8 @@
     "@types/eslint": "^8.56.5",
     "@types/lodash": "^4.17.10",
     "@types/node": "^20.11.24",
-    "@types/react": "^18",
-    "@types/react-reconciler": "^0.28.8",
+    "@types/react": "^19.2.2",
+    "@types/react-reconciler": "^0.32.2",
     "check-export-map": "^1.3.1",
     "eslint": "^8.57.0",
     "tsup": "^8.1.0",
@@ -66,11 +66,11 @@
     "@arcanejs/typescript-config": "^0.0.0"
   },
   "dependencies": {
-    "lodash": "^4.17.21",
-    "react": "^18",
-    "react-reconciler": "0.28.0",
-    "@arcanejs/toolkit": "^6.0.1",
-    "@arcanejs/protocol": "^0.7.0"
+    "lodash": "^4.17.23",
+    "react": "^19.2.0",
+    "react-reconciler": "0.33.0",
+    "@arcanejs/protocol": "^0.8.0",
+    "@arcanejs/toolkit": "^7.0.0"
   },
   "peerDependencies": {
     "zod": "^3.23.8"