@arcanejs/react-toolkit 0.4.0 → 0.5.0

package/README.md

@@ -90,7 +90,7 @@ const ControlPanel = () => {
       <Group>
         {`Switch State: ${switchState}`}
         <Switch
-            state={switchState}
+            value={switchState}
             onChange={setSwitchState}
           />
       </Group>
@@ -289,6 +289,12 @@ For a comprehensive list of examples,
 please see the example directory in the arcane monorepo:
 <https://github.com/arcanejs/arcanejs/tree/main/examples/react>
 
+### [Example Philips Hue App](https://github.com/arcanejs/hue-example)
+
+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.
+
 ## Status / Suitability / Security Disclaimer
 
 This project is **experimental**,

package/dist/index.d.mts

@@ -0,0 +1,86 @@
+import * as ld from '@arcanejs/toolkit';
+import { Props as Props$1, Events as Events$1, Group as Group$1, GroupHeader as GroupHeader$1 } from '@arcanejs/toolkit/components/group';
+import { Props, Events, Button as Button$1 } from '@arcanejs/toolkit/components/button';
+import { Props as Props$2, Label as Label$1 } from '@arcanejs/toolkit/components/label';
+import { Props as Props$3, Rect as Rect$1 } from '@arcanejs/toolkit/components/rect';
+import { Props as Props$4, Events as Events$2, SliderButton as SliderButton$1 } from '@arcanejs/toolkit/components/slider-button';
+import { Props as Props$5, Events as Events$3, Switch as Switch$1 } from '@arcanejs/toolkit/components/switch';
+import { TabProps, Tab as Tab$1, TabsProps, Tabs as Tabs$1 } from '@arcanejs/toolkit/components/tabs';
+import { Props as Props$6, Events as Events$4, TextInput as TextInput$1 } from '@arcanejs/toolkit/components/text-input';
+import { Props as Props$7, Timeline as Timeline$1 } from '@arcanejs/toolkit/components/timeline';
+import * as React from 'react';
+import { Ref } from 'react';
+
+type Child = JSX.Element | string | null | undefined | boolean;
+type Children = Child | Child[];
+interface LightDeskIntrinsicElements {
+    button: Props & {
+        children?: never;
+        onClick?: Events['click'];
+        ref?: Ref<Button$1>;
+    };
+    group: Props$1 & {
+        children?: Children;
+        onTitleChanged?: Events$1['title-changed'];
+        ref?: Ref<Group$1>;
+    };
+    'group-header': {
+        children?: Children;
+        ref?: Ref<GroupHeader$1>;
+    };
+    label: Props$2 & {
+        children?: never;
+        ref?: Ref<Label$1>;
+    };
+    rect: Props$3 & {
+        children?: never;
+        ref?: Ref<Rect$1>;
+    };
+    'slider-button': Props$4 & {
+        children?: never;
+        onChange?: Events$2['change'];
+        ref?: Ref<SliderButton$1>;
+    };
+    switch: Props$5 & {
+        children?: never;
+        onChange?: Events$3['change'];
+        ref?: Ref<Switch$1>;
+    };
+    tab: TabProps & {
+        children?: JSX.Element | string;
+        ref?: Ref<Tab$1>;
+    };
+    tabs: TabsProps & {
+        children?: JSX.Element | JSX.Element[];
+        ref?: Ref<Tabs$1>;
+    };
+    'text-input': Props$6 & {
+        children?: JSX.Element | JSX.Element[];
+        onChange?: Events$4['change'];
+        ref?: Ref<TextInput$1>;
+    };
+    timeline: Props$7 & {
+        children?: never;
+        ref?: Ref<Timeline$1>;
+    };
+}
+
+type ComponentWithRef<T, P> = React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+declare const Button: ComponentWithRef<Button$1, LightDeskIntrinsicElements['button']>;
+declare const Group: ComponentWithRef<Group$1, LightDeskIntrinsicElements['group']>;
+declare const GroupHeader: ComponentWithRef<GroupHeader$1, LightDeskIntrinsicElements['group-header']>;
+declare const Label: ComponentWithRef<Label$1, LightDeskIntrinsicElements['label']>;
+declare const Rect: ComponentWithRef<Rect$1, LightDeskIntrinsicElements['rect']>;
+declare const SliderButton: ComponentWithRef<SliderButton$1, LightDeskIntrinsicElements['slider-button']>;
+declare const Switch: ComponentWithRef<Switch$1, LightDeskIntrinsicElements['switch']>;
+declare const Tab: ComponentWithRef<Tab$1, LightDeskIntrinsicElements['tab']>;
+declare const Tabs: ComponentWithRef<Tabs$1, LightDeskIntrinsicElements['tabs']>;
+declare const TextInput: ComponentWithRef<TextInput$1, LightDeskIntrinsicElements['text-input']>;
+declare const Timeline: ComponentWithRef<Timeline$1, LightDeskIntrinsicElements['timeline']>;
+
+declare const ToolkitRenderer: {
+    renderGroup: (component: JSX.Element, container: ld.Group) => void;
+    render: (component: JSX.Element, container: ld.Toolkit, rootGroupProps?: Props$1) => void;
+};
+
+export { Button, Group, GroupHeader, Label, type LightDeskIntrinsicElements, Rect, SliderButton, Switch, Tab, Tabs, TextInput, Timeline, ToolkitRenderer };

package/dist/index.d.ts

@@ -0,0 +1,86 @@
+import * as ld from '@arcanejs/toolkit';
+import { Props as Props$1, Events as Events$1, Group as Group$1, GroupHeader as GroupHeader$1 } from '@arcanejs/toolkit/components/group';
+import { Props, Events, Button as Button$1 } from '@arcanejs/toolkit/components/button';
+import { Props as Props$2, Label as Label$1 } from '@arcanejs/toolkit/components/label';
+import { Props as Props$3, Rect as Rect$1 } from '@arcanejs/toolkit/components/rect';
+import { Props as Props$4, Events as Events$2, SliderButton as SliderButton$1 } from '@arcanejs/toolkit/components/slider-button';
+import { Props as Props$5, Events as Events$3, Switch as Switch$1 } from '@arcanejs/toolkit/components/switch';
+import { TabProps, Tab as Tab$1, TabsProps, Tabs as Tabs$1 } from '@arcanejs/toolkit/components/tabs';
+import { Props as Props$6, Events as Events$4, TextInput as TextInput$1 } from '@arcanejs/toolkit/components/text-input';
+import { Props as Props$7, Timeline as Timeline$1 } from '@arcanejs/toolkit/components/timeline';
+import * as React from 'react';
+import { Ref } from 'react';
+
+type Child = JSX.Element | string | null | undefined | boolean;
+type Children = Child | Child[];
+interface LightDeskIntrinsicElements {
+    button: Props & {
+        children?: never;
+        onClick?: Events['click'];
+        ref?: Ref<Button$1>;
+    };
+    group: Props$1 & {
+        children?: Children;
+        onTitleChanged?: Events$1['title-changed'];
+        ref?: Ref<Group$1>;
+    };
+    'group-header': {
+        children?: Children;
+        ref?: Ref<GroupHeader$1>;
+    };
+    label: Props$2 & {
+        children?: never;
+        ref?: Ref<Label$1>;
+    };
+    rect: Props$3 & {
+        children?: never;
+        ref?: Ref<Rect$1>;
+    };
+    'slider-button': Props$4 & {
+        children?: never;
+        onChange?: Events$2['change'];
+        ref?: Ref<SliderButton$1>;
+    };
+    switch: Props$5 & {
+        children?: never;
+        onChange?: Events$3['change'];
+        ref?: Ref<Switch$1>;
+    };
+    tab: TabProps & {
+        children?: JSX.Element | string;
+        ref?: Ref<Tab$1>;
+    };
+    tabs: TabsProps & {
+        children?: JSX.Element | JSX.Element[];
+        ref?: Ref<Tabs$1>;
+    };
+    'text-input': Props$6 & {
+        children?: JSX.Element | JSX.Element[];
+        onChange?: Events$4['change'];
+        ref?: Ref<TextInput$1>;
+    };
+    timeline: Props$7 & {
+        children?: never;
+        ref?: Ref<Timeline$1>;
+    };
+}
+
+type ComponentWithRef<T, P> = React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+declare const Button: ComponentWithRef<Button$1, LightDeskIntrinsicElements['button']>;
+declare const Group: ComponentWithRef<Group$1, LightDeskIntrinsicElements['group']>;
+declare const GroupHeader: ComponentWithRef<GroupHeader$1, LightDeskIntrinsicElements['group-header']>;
+declare const Label: ComponentWithRef<Label$1, LightDeskIntrinsicElements['label']>;
+declare const Rect: ComponentWithRef<Rect$1, LightDeskIntrinsicElements['rect']>;
+declare const SliderButton: ComponentWithRef<SliderButton$1, LightDeskIntrinsicElements['slider-button']>;
+declare const Switch: ComponentWithRef<Switch$1, LightDeskIntrinsicElements['switch']>;
+declare const Tab: ComponentWithRef<Tab$1, LightDeskIntrinsicElements['tab']>;
+declare const Tabs: ComponentWithRef<Tabs$1, LightDeskIntrinsicElements['tabs']>;
+declare const TextInput: ComponentWithRef<TextInput$1, LightDeskIntrinsicElements['text-input']>;
+declare const Timeline: ComponentWithRef<Timeline$1, LightDeskIntrinsicElements['timeline']>;
+
+declare const ToolkitRenderer: {
+    renderGroup: (component: JSX.Element, container: ld.Group) => void;
+    render: (component: JSX.Element, container: ld.Toolkit, rootGroupProps?: Props$1) => void;
+};
+
+export { Button, Group, GroupHeader, Label, type LightDeskIntrinsicElements, Rect, SliderButton, Switch, Tab, Tabs, TextInput, Timeline, ToolkitRenderer };

package/dist/index.js

@@ -0,0 +1,250 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkRT2VSMJLjs = require('./chunk-RT2VSMJL.js');
+
+// src/index.tsx
+var _reactreconciler = require('react-reconciler'); var _reactreconciler2 = _interopRequireDefault(_reactreconciler);
+var _constants = require('react-reconciler/constants');
+var _toolkit = require('@arcanejs/toolkit'); var ld = _interopRequireWildcard(_toolkit);
+var _base = require('@arcanejs/toolkit/components/base');
+
+// src/components.ts
+var _react = require('react'); var React = _interopRequireWildcard(_react);
+var Button = React.forwardRef(
+  (props, ref) => React.createElement("button", { ...props, ref }, props.children)
+);
+var Group = React.forwardRef(
+  (props, ref) => React.createElement("group", { ...props, ref }, props.children)
+);
+var GroupHeader = React.forwardRef(
+  (props, ref) => React.createElement("group-header", { ...props, ref }, props.children)
+);
+var Label = React.forwardRef(
+  (props, ref) => React.createElement("label", { ...props, ref }, props.children)
+);
+var Rect = React.forwardRef(
+  (props, ref) => React.createElement("rect", { ...props, ref }, props.children)
+);
+var SliderButton = React.forwardRef(
+  (props, ref) => React.createElement("slider-button", { ...props, ref }, props.children)
+);
+var Switch = React.forwardRef(
+  (props, ref) => React.createElement("switch", { ...props, ref }, props.children)
+);
+var Tab = React.forwardRef(
+  (props, ref) => React.createElement("tab", { ...props, ref }, props.children)
+);
+var Tabs = React.forwardRef(
+  (props, ref) => React.createElement("tabs", { ...props, ref }, props.children)
+);
+var TextInput = React.forwardRef(
+  (props, ref) => React.createElement("text-input", { ...props, ref }, props.children)
+);
+var Timeline = React.forwardRef(
+  (props, ref) => React.createElement("timeline", { ...props, ref }, props.children)
+);
+
+// src/index.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var isType = (targetType, type, _props) => targetType === type;
+var canSetProps = (instance) => instance instanceof _base.Base;
+var updateListener = (eventName, property, instance, prevProps, nextProps) => {
+  const prev = prevProps[property];
+  const next = nextProps[property];
+  if (prev !== next) {
+    prev && instance.removeListener(eventName, prev);
+    next && instance.addListener(eventName, next);
+  }
+};
+var updateListeners = (type, instance, prevProps, nextProps) => {
+  if (isType("button", type, prevProps) && isType("button", type, nextProps)) {
+    if (instance instanceof ld.Button) {
+      updateListener("click", "onClick", instance, prevProps, nextProps);
+    }
+  } else if (isType("group", type, prevProps) && isType("group", type, nextProps)) {
+    if (instance instanceof ld.Group) {
+      updateListener(
+        "title-changed",
+        "onTitleChanged",
+        instance,
+        prevProps,
+        nextProps
+      );
+    }
+  } else if (isType("slider-button", type, prevProps) && isType("slider-button", type, nextProps)) {
+    if (instance instanceof ld.SliderButton) {
+      updateListener("change", "onChange", instance, prevProps, nextProps);
+    }
+  } else if (isType("switch", type, prevProps) && isType("switch", type, nextProps)) {
+    if (instance instanceof ld.Switch) {
+      updateListener("change", "onChange", instance, prevProps, nextProps);
+    }
+  } else if (isType("text-input", type, prevProps) && isType("text-input", type, nextProps)) {
+    if (instance instanceof ld.TextInput) {
+      updateListener("change", "onChange", instance, prevProps, nextProps);
+    }
+  }
+};
+var hostConfig = {
+  supportsMutation: true,
+  supportsPersistence: false,
+  noTimeout: -1,
+  isPrimaryRenderer: true,
+  supportsHydration: false,
+  afterActiveInstanceBlur: () => null,
+  appendChild: (parentInstance, child) => {
+    if (parentInstance instanceof _base.BaseParent) {
+      parentInstance.appendChild(child);
+    } else {
+      throw new Error(`Unexpected Parent: ${parentInstance}`);
+    }
+  },
+  appendInitialChild: (parentInstance, child) => {
+    if (parentInstance instanceof _base.BaseParent) {
+      parentInstance.appendChild(child);
+    } else {
+      throw new Error(`Unexpected Parent: ${parentInstance}`);
+    }
+  },
+  appendChildToContainer(container, child) {
+    container.appendChild(child);
+  },
+  beforeActiveInstanceBlur: () => null,
+  cancelTimeout: (id) => clearTimeout(id),
+  clearContainer: (container) => container.removeAllChildren(),
+  commitMount: () => {
+    throw new Error(`Unexpected call to commitMount()`);
+  },
+  commitUpdate(instance, updatePayload, type, prevProps, nextProps, _internalHandle) {
+    if (canSetProps(instance)) {
+      instance.setProps(updatePayload);
+      updateListeners(type, instance, prevProps, nextProps);
+    } else {
+      throw new Error(`Unexpected Instance: ${instance}`);
+    }
+  },
+  commitTextUpdate: (textInstance, _oldText, newText) => textInstance.setText(newText),
+  createInstance: (type, props) => {
+    let instance = null;
+    if (isType("button", type, props)) {
+      instance = new ld.Button(props);
+    } else if (isType("group", type, props)) {
+      instance = new ld.Group(props);
+    } else if (isType("group-header", type, props)) {
+      instance = new ld.GroupHeader(props);
+    } else if (isType("label", type, props)) {
+      instance = new ld.Label(props);
+    } else if (isType("rect", type, props)) {
+      instance = new ld.Rect(props);
+    } else if (isType("slider-button", type, props)) {
+      instance = new ld.SliderButton(props);
+    } else if (isType("switch", type, props)) {
+      instance = new ld.Switch(props);
+    } else if (isType("tab", type, props)) {
+      instance = new ld.Tab(props);
+    } else if (isType("tabs", type, props)) {
+      instance = new ld.Tabs(props);
+    } else if (isType("text-input", type, props)) {
+      instance = new ld.TextInput(props);
+    } else if (isType("timeline", type, props)) {
+      instance = new ld.Timeline(props);
+    }
+    if (instance) {
+      updateListeners(type, instance, {}, props);
+      return instance;
+    } else {
+      throw new Error(`Not implemented type: ${type}`);
+    }
+  },
+  createTextInstance: (text) => new ld.Label({ text }),
+  detachDeletedInstance: () => null,
+  getChildHostContext: (parentHostContext) => parentHostContext,
+  getCurrentEventPriority: () => _constants.DefaultEventPriority,
+  getInstanceFromNode: () => {
+    throw new Error("Not yet implemented.");
+  },
+  getInstanceFromScope: () => {
+    throw new Error("Not yet implemented.");
+  },
+  getPublicInstance: (instance) => instance,
+  getRootHostContext: () => null,
+  insertBefore: (parentInstance, child, beforeChild) => {
+    if (parentInstance instanceof _base.BaseParent) {
+      parentInstance.insertBefore(child, beforeChild);
+    } else {
+      throw new Error(`Unexpected Parent: ${parentInstance}`);
+    }
+  },
+  insertInContainerBefore: (container, child, beforeChild) => container.insertBefore(child, beforeChild),
+  finalizeInitialChildren: () => 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;
+    }
+  },
+  removeChild(parentInstance, child) {
+    if (parentInstance instanceof _base.BaseParent) {
+      parentInstance.removeChild(child);
+    } else {
+      throw new Error(`Unexpected Parent: ${parentInstance}`);
+    }
+  },
+  removeChildFromContainer: (container, child) => container.removeChild(child),
+  resetAfterCommit: () => null,
+  resetTextContent: () => {
+    throw new Error(`Unexpected call to resetTextContent()`);
+  },
+  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");
+  },
+  unhideTextInstance: () => {
+    console.log("Not-implemented: unhideTextInstance");
+  }
+};
+var reconciler = _reactreconciler2.default.call(void 0, hostConfig);
+var ToolkitRenderer = {
+  renderGroup: (component, container) => {
+    const root = reconciler.createContainer(container, 0, false, null);
+    const componentWithContexts = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRT2VSMJLjs.LoggerContext.Provider, { value: container.log, children: component });
+    reconciler.updateContainer(componentWithContexts, root, null);
+  },
+  render: (component, container, rootGroupProps) => {
+    const group = new ld.Group({ direction: "vertical", ...rootGroupProps });
+    container.setRoot(group);
+    ToolkitRenderer.renderGroup(component, group);
+  }
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.Button = Button; exports.Group = Group; exports.GroupHeader = GroupHeader; exports.Label = Label; exports.Rect = Rect; exports.SliderButton = SliderButton; exports.Switch = Switch; exports.Tab = Tab; exports.Tabs = Tabs; exports.TextInput = TextInput; exports.Timeline = Timeline; exports.ToolkitRenderer = ToolkitRenderer;

package/dist/index.mjs

@@ -0,0 +1,250 @@
+import {
+  LoggerContext
+} from "./chunk-TOGR56FN.mjs";
+
+// src/index.tsx
+import Reconciler from "react-reconciler";
+import { DefaultEventPriority } from "react-reconciler/constants";
+import * as ld from "@arcanejs/toolkit";
+import { Base, BaseParent } from "@arcanejs/toolkit/components/base";
+
+// src/components.ts
+import * as React from "react";
+var Button = React.forwardRef(
+  (props, ref) => React.createElement("button", { ...props, ref }, props.children)
+);
+var Group = React.forwardRef(
+  (props, ref) => React.createElement("group", { ...props, ref }, props.children)
+);
+var GroupHeader = React.forwardRef(
+  (props, ref) => React.createElement("group-header", { ...props, ref }, props.children)
+);
+var Label = React.forwardRef(
+  (props, ref) => React.createElement("label", { ...props, ref }, props.children)
+);
+var Rect = React.forwardRef(
+  (props, ref) => React.createElement("rect", { ...props, ref }, props.children)
+);
+var SliderButton = React.forwardRef(
+  (props, ref) => React.createElement("slider-button", { ...props, ref }, props.children)
+);
+var Switch = React.forwardRef(
+  (props, ref) => React.createElement("switch", { ...props, ref }, props.children)
+);
+var Tab = React.forwardRef(
+  (props, ref) => React.createElement("tab", { ...props, ref }, props.children)
+);
+var Tabs = React.forwardRef(
+  (props, ref) => React.createElement("tabs", { ...props, ref }, props.children)
+);
+var TextInput = React.forwardRef(
+  (props, ref) => React.createElement("text-input", { ...props, ref }, props.children)
+);
+var Timeline = React.forwardRef(
+  (props, ref) => React.createElement("timeline", { ...props, ref }, props.children)
+);
+
+// src/index.tsx
+import { jsx } from "react/jsx-runtime";
+var isType = (targetType, type, _props) => targetType === type;
+var canSetProps = (instance) => instance instanceof Base;
+var updateListener = (eventName, property, instance, prevProps, nextProps) => {
+  const prev = prevProps[property];
+  const next = nextProps[property];
+  if (prev !== next) {
+    prev && instance.removeListener(eventName, prev);
+    next && instance.addListener(eventName, next);
+  }
+};
+var updateListeners = (type, instance, prevProps, nextProps) => {
+  if (isType("button", type, prevProps) && isType("button", type, nextProps)) {
+    if (instance instanceof ld.Button) {
+      updateListener("click", "onClick", instance, prevProps, nextProps);
+    }
+  } else if (isType("group", type, prevProps) && isType("group", type, nextProps)) {
+    if (instance instanceof ld.Group) {
+      updateListener(
+        "title-changed",
+        "onTitleChanged",
+        instance,
+        prevProps,
+        nextProps
+      );
+    }
+  } else if (isType("slider-button", type, prevProps) && isType("slider-button", type, nextProps)) {
+    if (instance instanceof ld.SliderButton) {
+      updateListener("change", "onChange", instance, prevProps, nextProps);
+    }
+  } else if (isType("switch", type, prevProps) && isType("switch", type, nextProps)) {
+    if (instance instanceof ld.Switch) {
+      updateListener("change", "onChange", instance, prevProps, nextProps);
+    }
+  } else if (isType("text-input", type, prevProps) && isType("text-input", type, nextProps)) {
+    if (instance instanceof ld.TextInput) {
+      updateListener("change", "onChange", instance, prevProps, nextProps);
+    }
+  }
+};
+var hostConfig = {
+  supportsMutation: true,
+  supportsPersistence: false,
+  noTimeout: -1,
+  isPrimaryRenderer: true,
+  supportsHydration: false,
+  afterActiveInstanceBlur: () => null,
+  appendChild: (parentInstance, child) => {
+    if (parentInstance instanceof BaseParent) {
+      parentInstance.appendChild(child);
+    } else {
+      throw new Error(`Unexpected Parent: ${parentInstance}`);
+    }
+  },
+  appendInitialChild: (parentInstance, child) => {
+    if (parentInstance instanceof BaseParent) {
+      parentInstance.appendChild(child);
+    } else {
+      throw new Error(`Unexpected Parent: ${parentInstance}`);
+    }
+  },
+  appendChildToContainer(container, child) {
+    container.appendChild(child);
+  },
+  beforeActiveInstanceBlur: () => null,
+  cancelTimeout: (id) => clearTimeout(id),
+  clearContainer: (container) => container.removeAllChildren(),
+  commitMount: () => {
+    throw new Error(`Unexpected call to commitMount()`);
+  },
+  commitUpdate(instance, updatePayload, type, prevProps, nextProps, _internalHandle) {
+    if (canSetProps(instance)) {
+      instance.setProps(updatePayload);
+      updateListeners(type, instance, prevProps, nextProps);
+    } else {
+      throw new Error(`Unexpected Instance: ${instance}`);
+    }
+  },
+  commitTextUpdate: (textInstance, _oldText, newText) => textInstance.setText(newText),
+  createInstance: (type, props) => {
+    let instance = null;
+    if (isType("button", type, props)) {
+      instance = new ld.Button(props);
+    } else if (isType("group", type, props)) {
+      instance = new ld.Group(props);
+    } else if (isType("group-header", type, props)) {
+      instance = new ld.GroupHeader(props);
+    } else if (isType("label", type, props)) {
+      instance = new ld.Label(props);
+    } else if (isType("rect", type, props)) {
+      instance = new ld.Rect(props);
+    } else if (isType("slider-button", type, props)) {
+      instance = new ld.SliderButton(props);
+    } else if (isType("switch", type, props)) {
+      instance = new ld.Switch(props);
+    } else if (isType("tab", type, props)) {
+      instance = new ld.Tab(props);
+    } else if (isType("tabs", type, props)) {
+      instance = new ld.Tabs(props);
+    } else if (isType("text-input", type, props)) {
+      instance = new ld.TextInput(props);
+    } else if (isType("timeline", type, props)) {
+      instance = new ld.Timeline(props);
+    }
+    if (instance) {
+      updateListeners(type, instance, {}, props);
+      return instance;
+    } else {
+      throw new Error(`Not implemented type: ${type}`);
+    }
+  },
+  createTextInstance: (text) => new ld.Label({ text }),
+  detachDeletedInstance: () => null,
+  getChildHostContext: (parentHostContext) => parentHostContext,
+  getCurrentEventPriority: () => DefaultEventPriority,
+  getInstanceFromNode: () => {
+    throw new Error("Not yet implemented.");
+  },
+  getInstanceFromScope: () => {
+    throw new Error("Not yet implemented.");
+  },
+  getPublicInstance: (instance) => instance,
+  getRootHostContext: () => null,
+  insertBefore: (parentInstance, child, beforeChild) => {
+    if (parentInstance instanceof BaseParent) {
+      parentInstance.insertBefore(child, beforeChild);
+    } else {
+      throw new Error(`Unexpected Parent: ${parentInstance}`);
+    }
+  },
+  insertInContainerBefore: (container, child, beforeChild) => container.insertBefore(child, beforeChild),
+  finalizeInitialChildren: () => 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;
+    }
+  },
+  removeChild(parentInstance, child) {
+    if (parentInstance instanceof BaseParent) {
+      parentInstance.removeChild(child);
+    } else {
+      throw new Error(`Unexpected Parent: ${parentInstance}`);
+    }
+  },
+  removeChildFromContainer: (container, child) => container.removeChild(child),
+  resetAfterCommit: () => null,
+  resetTextContent: () => {
+    throw new Error(`Unexpected call to resetTextContent()`);
+  },
+  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");
+  },
+  unhideTextInstance: () => {
+    console.log("Not-implemented: unhideTextInstance");
+  }
+};
+var reconciler = Reconciler(hostConfig);
+var ToolkitRenderer = {
+  renderGroup: (component, container) => {
+    const root = reconciler.createContainer(container, 0, false, null);
+    const componentWithContexts = /* @__PURE__ */ jsx(LoggerContext.Provider, { value: container.log, children: component });
+    reconciler.updateContainer(componentWithContexts, root, null);
+  },
+  render: (component, container, rootGroupProps) => {
+    const group = new ld.Group({ direction: "vertical", ...rootGroupProps });
+    container.setRoot(group);
+    ToolkitRenderer.renderGroup(component, group);
+  }
+};
+export {
+  Button,
+  Group,
+  GroupHeader,
+  Label,
+  Rect,
+  SliderButton,
+  Switch,
+  Tab,
+  Tabs,
+  TextInput,
+  Timeline,
+  ToolkitRenderer
+};

package/dist/logging.d.mts

@@ -1,7 +1,7 @@
-import * as react from 'react';
+import * as React from 'react';
 import { Logger } from '@arcanejs/protocol/logging';
 
-declare const LoggerContext: react.Context<() => Logger | null>;
+declare const LoggerContext: React.Context<() => Logger | null>;
 declare const useLogger: () => Logger | null;
 
 export { LoggerContext, useLogger };

package/dist/logging.d.ts

@@ -1,7 +1,7 @@
-import * as react from 'react';
+import * as React from 'react';
 import { Logger } from '@arcanejs/protocol/logging';
 
-declare const LoggerContext: react.Context<() => Logger | null>;
+declare const LoggerContext: React.Context<() => Logger | null>;
 declare const useLogger: () => Logger | null;
 
 export { LoggerContext, useLogger };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcanejs/react-toolkit",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": false,
   "description": "Build web-accessible control interfaces for your long-running Node.js processes",
   "keywords": [
@@ -36,7 +36,8 @@
       "import": "./dist/logging.mjs",
       "require": "./dist/logging.js",
       "types": "./dist/logging.d.ts"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "devDependencies": {
     "@types/eslint": "^8.56.5",
@@ -44,6 +45,7 @@
     "@types/node": "^20.11.24",
     "@types/react": "^18",
     "@types/react-reconciler": "^0.28.8",
+    "check-export-map": "^1.3.1",
     "eslint": "^8.57.0",
     "tsup": "^8.1.0",
     "typescript": "^5.3.3",
@@ -56,7 +58,7 @@
     "react": "^18",
     "react-reconciler": "0.28.0",
     "@arcanejs/protocol": "^0.2.0",
-    "@arcanejs/toolkit": "^0.3.0"
+    "@arcanejs/toolkit": "^0.4.0"
   },
   "peerDependencies": {
     "zod": "^3.23.8"
@@ -74,7 +76,7 @@
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",
-    "build": "tsup",
+    "build": "rm -rf dist && tsup && check-export-map",
     "dev": "tsup --watch"
   }
 }