@arcanejs/toolkit 0.1.1 → 0.2.1

package/dist/index.d.mts

@@ -2,9 +2,10 @@ import _ from 'lodash';
 import * as http from 'http';
 import { Application } from 'express';
 import { WebSocket } from 'ws';
-import { C as ClientMessage, S as ServerMessage, a as Component } from './base-BJAPu0O1.mjs';
+import { ClientMessage, ServerMessage } from '@arcanejs/protocol';
 import { Group } from './backend/components/group.mjs';
 export { GroupHeader } from './backend/components/group.mjs';
+import { Component } from './backend/components/base.mjs';
 export { Button } from './backend/components/button.mjs';
 export { Label } from './backend/components/label.mjs';
 export { Rect } from './backend/components/rect.mjs';
@@ -13,7 +14,8 @@ export { Switch } from './backend/components/switch.mjs';
 export { Tab, Tabs } from './backend/components/tabs.mjs';
 export { TextInput } from './backend/components/text-input.mjs';
 export { Timeline } from './backend/components/timeline.mjs';
-import '@arcanejs/diff';
+import '@arcanejs/protocol/styles';
+import './backend/util/index.mjs';
 
 interface Connection {
     sendMessage(msg: ServerMessage): void;

package/dist/index.d.ts

@@ -2,9 +2,10 @@ import _ from 'lodash';
 import * as http from 'http';
 import { Application } from 'express';
 import { WebSocket } from 'ws';
-import { C as ClientMessage, S as ServerMessage, a as Component } from './base-BJAPu0O1.js';
+import { ClientMessage, ServerMessage } from '@arcanejs/protocol';
 import { Group } from './backend/components/group.js';
 export { GroupHeader } from './backend/components/group.js';
+import { Component } from './backend/components/base.js';
 export { Button } from './backend/components/button.js';
 export { Label } from './backend/components/label.js';
 export { Rect } from './backend/components/rect.js';
@@ -13,7 +14,8 @@ export { Switch } from './backend/components/switch.js';
 export { Tab, Tabs } from './backend/components/tabs.js';
 export { TextInput } from './backend/components/text-input.js';
 export { Timeline } from './backend/components/timeline.js';
-import '@arcanejs/diff';
+import '@arcanejs/protocol/styles';
+import './backend/util/index.js';
 
 interface Connection {
     sendMessage(msg: ServerMessage): void;

package/dist/index.js

@@ -503,17 +503,14 @@ var Button = class extends Base {
   };
 };
 
-// src/shared/styles.ts
+// src/backend/components/group.ts
 var GROUP_DEFAULT_STYLE = {
   direction: "horizontal"
 };
-
-// src/backend/components/group.ts
 var DEFAULT_PROPS2 = {
   ...GROUP_DEFAULT_STYLE,
   title: null,
-  labels: null,
-  headerComponents: null
+  labels: null
 };
 var GroupHeader = class extends BaseParent {
   validateChildren = () => {

package/dist/index.mjs

@@ -1,35 +1,39 @@
 import {
   Tab,
   Tabs
-} from "./chunk-3ZBM7Q4A.mjs";
+} from "./chunk-TQ27Y7F4.mjs";
 import {
   TextInput
-} from "./chunk-6LL3X7ZZ.mjs";
+} from "./chunk-IXTM35YM.mjs";
 import {
   Timeline
-} from "./chunk-DBW4OPGN.mjs";
+} from "./chunk-SOC4TF3J.mjs";
+import {
+  IDMap
+} from "./chunk-RGHJEMWG.mjs";
 import {
   Button
-} from "./chunk-DP3QFYSS.mjs";
+} from "./chunk-TAZH4BBH.mjs";
 import {
   Group,
   GroupHeader
-} from "./chunk-S5DQIYC2.mjs";
+} from "./chunk-3O4P67DM.mjs";
 import {
   Label
-} from "./chunk-P6X5GIDT.mjs";
+} from "./chunk-HNEUZVCX.mjs";
 import {
   Rect
-} from "./chunk-GQZA5K4M.mjs";
+} from "./chunk-ZU5H6SVA.mjs";
 import {
   SliderButton
-} from "./chunk-HVFTRNLQ.mjs";
+} from "./chunk-JW4GXS54.mjs";
 import {
   Switch
-} from "./chunk-37VNFO5S.mjs";
+} from "./chunk-APCR3ITH.mjs";
+import "./chunk-ZCHM3JJJ.mjs";
 import {
   __require
-} from "./chunk-HF77PS7J.mjs";
+} from "./chunk-Y6FXYEAI.mjs";
 
 // src/backend/toolkit.ts
 import _ from "lodash";
@@ -151,20 +155,6 @@ var Server = class {
   };
 };
 
-// src/backend/util/id-map.ts
-var IDMap = class {
-  idMap = /* @__PURE__ */ new WeakMap();
-  nextId = 0;
-  getId(object) {
-    let i = this.idMap.get(object);
-    if (i === void 0) {
-      i = this.nextId++;
-      this.idMap.set(object, i);
-    }
-    return i;
-  }
-};
-
 // src/backend/toolkit.ts
 import { WebSocketServer } from "ws";
 import { createServer } from "http";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcanejs/toolkit",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "private": false,
   "description": "Build web-accessible control interfaces for your long-running Node.js processes",
   "keywords": [
@@ -82,6 +82,12 @@
       "import": "./dist/backend/components/timeline.mjs",
       "require": "./dist/backend/components/timeline.js",
       "types": "./dist/backend/components/timeline.d.ts"
+    },
+    "./util": {
+      "@arcanejs/source": "./src/backend/util/index.ts",
+      "import": "./dist/backend/util/index.mjs",
+      "require": "./dist/backend/util/index.js",
+      "types": "./dist/backend/util/index.d.ts"
     }
   },
   "devDependencies": {
@@ -100,14 +106,16 @@
     "tsup": "^8.1.0",
     "typescript": "^5.3.3",
     "@arcanejs/eslint-config": "^0.0.0",
-    "@arcanejs/typescript-config": "^0.0.0"
+    "@arcanejs/typescript-config": "^0.0.0",
+    "@arcanejs/toolkit-frontend": "^0.0.2"
   },
   "dependencies": {
     "express": "^4.21.1",
     "lodash": "^4.17.21",
     "material-symbols": "^0.25.0",
     "ws": "^8.18.0",
-    "@arcanejs/diff": "^0.3.1"
+    "@arcanejs/diff": "^0.3.1",
+    "@arcanejs/protocol": "^0.1.1"
   },
   "files": [
     "dist"

package/dist/base-BJAPu0O1.d.mts

@@ -1,234 +0,0 @@
-import { Diff } from '@arcanejs/diff';
-
-/**
- * Styling options for the [[Group]] component
- *
- * Default Styling: [[GROUP_DEFAULT_STYLE]]
- */
-type GroupComponentStyle = {
-    /**
-     * In which way should child components of this group be organized?
-     */
-    direction: 'horizontal' | 'vertical';
-    /**
-     * 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.
-     */
-    wrap?: boolean;
-    /**
-     * If true, this group will have a border and a different color background
-     * to its parent.
-     *
-     * This allows you to add a distinctive border between components,
-     * without needing to set a header, add header components,
-     * or make it collapsible.
-     */
-    border?: true;
-};
-/**
- * Styling options for the [[Label]] component
- *
- * Default Styling: [[LABEL_DEFAULT_STYLE]]
- */
-type LabelComponentStyle = {
-    /**
-     * If true, make the text of this label bold
-     */
-    bold?: boolean;
-};
-
-type BaseComponent = {
-    key: number;
-};
-type ButtonComponent = BaseComponent & {
-    component: 'button';
-    text: string;
-    icon?: string;
-    state: {
-        state: 'normal' | 'pressed';
-    } | {
-        state: 'error';
-        error: string;
-    };
-};
-type GroupCollapsedState = 'open' | 'closed';
-type DefaultGroupCollapsedState = GroupCollapsedState | 'auto';
-type GroupHeaderComponent = BaseComponent & {
-    component: 'group-header';
-    children: Component$1[];
-};
-type GroupComponent = BaseComponent & GroupComponentStyle & {
-    component: 'group';
-    title?: string;
-    children: Component$1[];
-    headers?: GroupHeaderComponent[];
-    labels?: Array<{
-        text: string;
-    }>;
-    editableTitle: boolean;
-    /**
-     * If set, allows the group to be collapsed,
-     * by default set to the given state
-     */
-    defaultCollapsibleState?: DefaultGroupCollapsedState;
-};
-type LabelComponent = BaseComponent & {
-    component: 'label';
-    bold?: boolean;
-    text: string;
-};
-type RectComponent = BaseComponent & {
-    component: 'rect';
-    color: string;
-};
-type SliderButtonComponent = BaseComponent & {
-    component: 'slider_button';
-    min: number;
-    max: number;
-    step: number;
-    value: number | null;
-};
-type SwitchComponent = BaseComponent & {
-    component: 'switch';
-    state: 'on' | 'off';
-};
-type TabComponent = BaseComponent & {
-    component: 'tab';
-    name: string;
-    child?: Component$1;
-};
-type TabsComponent = BaseComponent & {
-    component: 'tabs';
-    tabs: TabComponent[];
-};
-type TextInputComponent = BaseComponent & {
-    component: 'text-input';
-    value: string;
-};
-type TimelineState = {
-    state: 'playing';
-    totalTimeMillis: number;
-    effectiveStartTime: number;
-    speed: number;
-} | {
-    state: 'stopped';
-    totalTimeMillis: number;
-    currentTimeMillis: number;
-};
-type TimelineComponent = BaseComponent & {
-    component: 'timeline';
-    state: TimelineState;
-    title?: string;
-    subtitles?: string[];
-    source?: {
-        name: string;
-    };
-};
-type Component$1 = ButtonComponent | GroupHeaderComponent | GroupComponent | LabelComponent | RectComponent | SliderButtonComponent | SwitchComponent | TabComponent | TabsComponent | TextInputComponent | TimelineComponent;
-type SendTreeMsg = {
-    type: 'tree-full';
-    root: GroupComponent;
-};
-type UpdateTreeMsg = {
-    type: 'tree-diff';
-    diff: Diff<GroupComponent>;
-};
-type ServerMessage = SendTreeMsg | UpdateTreeMsg;
-type BaseClientComponentMessage = {
-    type: 'component-message';
-    componentKey: number;
-};
-type ButtonPressMessage = BaseClientComponentMessage & {
-    component: 'button';
-};
-type GroupTitleChangeMessage = BaseClientComponentMessage & {
-    component: 'group';
-    title: string;
-};
-type SliderButtonUpdateMessage = BaseClientComponentMessage & {
-    component: 'slider_button';
-    value: number;
-};
-type SwitchToggleMessage = BaseClientComponentMessage & {
-    component: 'switch';
-};
-type TextInputUpdateMessage = BaseClientComponentMessage & {
-    component: 'text-input';
-    value: string;
-};
-type ClientComponentMessage = ButtonPressMessage | GroupTitleChangeMessage | SliderButtonUpdateMessage | SwitchToggleMessage | TextInputUpdateMessage;
-type ClientMessage = ClientComponentMessage;
-
-declare class IDMap {
-    private readonly idMap;
-    private nextId;
-    getId(object: object): number;
-}
-
-interface Component {
-    getProtoInfo(idMap: IDMap): Component$1;
-    handleMessage(message: ClientComponentMessage): void;
-    routeMessage(idMap: IDMap, message: ClientComponentMessage): void;
-    setParent(parent: Parent | null): void;
-}
-declare abstract class Base<Props> implements Component {
-    /** @hidden */
-    private parent;
-    /** @hidden */
-    private readonly defaultProps;
-    /** @hidden */
-    private _props;
-    constructor(defaultProps: Props, props?: Partial<Props>);
-    get props(): Props;
-    set props(props: Partial<Props>);
-    setProps: (props: Partial<Props>) => void;
-    updateProps: (updates: Partial<Props>) => void;
-    /** @hidden */
-    setParent(parent: Parent | null): void;
-    /** @hidden */
-    updateTree(): void;
-    /** @hidden */
-    abstract getProtoInfo(idMap: IDMap): Component$1;
-    /** @hidden */
-    handleMessage(message: ClientComponentMessage): void;
-    routeMessage(_idMap: IDMap, _message: ClientComponentMessage): void;
-}
-/** @hidden */
-interface Parent {
-    updateTree(): void;
-    removeChild(component: Component): void;
-}
-declare abstract class BaseParent<T> extends Base<T> implements Parent {
-    /** @hidden */
-    private children;
-    abstract validateChildren(children: Component[]): void;
-    appendChildren: <CS extends Component[]>(...children: CS) => CS;
-    appendChild: <C extends Component>(child: C) => C;
-    removeChild: (component: Component) => void;
-    removeAllChildren: () => void;
-    /**
-     * Return all children components that messages need to be routed to
-     */
-    getChildren: () => readonly Component[];
-    /**
-     * TODO: we can do this better, right now it broadcasts the message to all
-     * components of the tree
-     *
-     * @hidden
-     */
-    routeMessage(idMap: IDMap, message: ClientComponentMessage): void;
-    insertBefore(child: Component, beforeChild: Component): void;
-}
-interface Listenable<Map extends Record<string, (...args: any[]) => void>> {
-    addListener<T extends keyof Map>(type: T, listener: Map[T]): void;
-    removeListener<T extends keyof Map>(type: T, listener: Map[T]): void;
-}
-declare class EventEmitter<Map extends Record<string, (...args: any[]) => void>> implements Listenable<Map> {
-    private readonly listeners;
-    addListener: <T extends keyof Map>(type: T, listener: Map[T]) => void;
-    removeListener: <T extends keyof Map>(type: T, listener: Map[T]) => void;
-    emit: <T extends keyof Map>(type: T, ...args: Parameters<Map[T]>) => Promise<unknown>;
-}
-
-export { BaseParent as B, type ClientMessage as C, EventEmitter as E, type GroupComponentStyle as G, IDMap as I, type Listenable as L, type Parent as P, type ServerMessage as S, type TabComponent as T, type Component as a, type GroupHeaderComponent as b, type GroupComponent as c, type ClientComponentMessage as d, Base as e, type ButtonComponent as f, type Component$1 as g, type LabelComponentStyle as h, type TabsComponent as i, type TimelineState as j, type TimelineComponent as k };

package/dist/base-BJAPu0O1.d.ts

@@ -1,234 +0,0 @@
-import { Diff } from '@arcanejs/diff';
-
-/**
- * Styling options for the [[Group]] component
- *
- * Default Styling: [[GROUP_DEFAULT_STYLE]]
- */
-type GroupComponentStyle = {
-    /**
-     * In which way should child components of this group be organized?
-     */
-    direction: 'horizontal' | 'vertical';
-    /**
-     * 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.
-     */
-    wrap?: boolean;
-    /**
-     * If true, this group will have a border and a different color background
-     * to its parent.
-     *
-     * This allows you to add a distinctive border between components,
-     * without needing to set a header, add header components,
-     * or make it collapsible.
-     */
-    border?: true;
-};
-/**
- * Styling options for the [[Label]] component
- *
- * Default Styling: [[LABEL_DEFAULT_STYLE]]
- */
-type LabelComponentStyle = {
-    /**
-     * If true, make the text of this label bold
-     */
-    bold?: boolean;
-};
-
-type BaseComponent = {
-    key: number;
-};
-type ButtonComponent = BaseComponent & {
-    component: 'button';
-    text: string;
-    icon?: string;
-    state: {
-        state: 'normal' | 'pressed';
-    } | {
-        state: 'error';
-        error: string;
-    };
-};
-type GroupCollapsedState = 'open' | 'closed';
-type DefaultGroupCollapsedState = GroupCollapsedState | 'auto';
-type GroupHeaderComponent = BaseComponent & {
-    component: 'group-header';
-    children: Component$1[];
-};
-type GroupComponent = BaseComponent & GroupComponentStyle & {
-    component: 'group';
-    title?: string;
-    children: Component$1[];
-    headers?: GroupHeaderComponent[];
-    labels?: Array<{
-        text: string;
-    }>;
-    editableTitle: boolean;
-    /**
-     * If set, allows the group to be collapsed,
-     * by default set to the given state
-     */
-    defaultCollapsibleState?: DefaultGroupCollapsedState;
-};
-type LabelComponent = BaseComponent & {
-    component: 'label';
-    bold?: boolean;
-    text: string;
-};
-type RectComponent = BaseComponent & {
-    component: 'rect';
-    color: string;
-};
-type SliderButtonComponent = BaseComponent & {
-    component: 'slider_button';
-    min: number;
-    max: number;
-    step: number;
-    value: number | null;
-};
-type SwitchComponent = BaseComponent & {
-    component: 'switch';
-    state: 'on' | 'off';
-};
-type TabComponent = BaseComponent & {
-    component: 'tab';
-    name: string;
-    child?: Component$1;
-};
-type TabsComponent = BaseComponent & {
-    component: 'tabs';
-    tabs: TabComponent[];
-};
-type TextInputComponent = BaseComponent & {
-    component: 'text-input';
-    value: string;
-};
-type TimelineState = {
-    state: 'playing';
-    totalTimeMillis: number;
-    effectiveStartTime: number;
-    speed: number;
-} | {
-    state: 'stopped';
-    totalTimeMillis: number;
-    currentTimeMillis: number;
-};
-type TimelineComponent = BaseComponent & {
-    component: 'timeline';
-    state: TimelineState;
-    title?: string;
-    subtitles?: string[];
-    source?: {
-        name: string;
-    };
-};
-type Component$1 = ButtonComponent | GroupHeaderComponent | GroupComponent | LabelComponent | RectComponent | SliderButtonComponent | SwitchComponent | TabComponent | TabsComponent | TextInputComponent | TimelineComponent;
-type SendTreeMsg = {
-    type: 'tree-full';
-    root: GroupComponent;
-};
-type UpdateTreeMsg = {
-    type: 'tree-diff';
-    diff: Diff<GroupComponent>;
-};
-type ServerMessage = SendTreeMsg | UpdateTreeMsg;
-type BaseClientComponentMessage = {
-    type: 'component-message';
-    componentKey: number;
-};
-type ButtonPressMessage = BaseClientComponentMessage & {
-    component: 'button';
-};
-type GroupTitleChangeMessage = BaseClientComponentMessage & {
-    component: 'group';
-    title: string;
-};
-type SliderButtonUpdateMessage = BaseClientComponentMessage & {
-    component: 'slider_button';
-    value: number;
-};
-type SwitchToggleMessage = BaseClientComponentMessage & {
-    component: 'switch';
-};
-type TextInputUpdateMessage = BaseClientComponentMessage & {
-    component: 'text-input';
-    value: string;
-};
-type ClientComponentMessage = ButtonPressMessage | GroupTitleChangeMessage | SliderButtonUpdateMessage | SwitchToggleMessage | TextInputUpdateMessage;
-type ClientMessage = ClientComponentMessage;
-
-declare class IDMap {
-    private readonly idMap;
-    private nextId;
-    getId(object: object): number;
-}
-
-interface Component {
-    getProtoInfo(idMap: IDMap): Component$1;
-    handleMessage(message: ClientComponentMessage): void;
-    routeMessage(idMap: IDMap, message: ClientComponentMessage): void;
-    setParent(parent: Parent | null): void;
-}
-declare abstract class Base<Props> implements Component {
-    /** @hidden */
-    private parent;
-    /** @hidden */
-    private readonly defaultProps;
-    /** @hidden */
-    private _props;
-    constructor(defaultProps: Props, props?: Partial<Props>);
-    get props(): Props;
-    set props(props: Partial<Props>);
-    setProps: (props: Partial<Props>) => void;
-    updateProps: (updates: Partial<Props>) => void;
-    /** @hidden */
-    setParent(parent: Parent | null): void;
-    /** @hidden */
-    updateTree(): void;
-    /** @hidden */
-    abstract getProtoInfo(idMap: IDMap): Component$1;
-    /** @hidden */
-    handleMessage(message: ClientComponentMessage): void;
-    routeMessage(_idMap: IDMap, _message: ClientComponentMessage): void;
-}
-/** @hidden */
-interface Parent {
-    updateTree(): void;
-    removeChild(component: Component): void;
-}
-declare abstract class BaseParent<T> extends Base<T> implements Parent {
-    /** @hidden */
-    private children;
-    abstract validateChildren(children: Component[]): void;
-    appendChildren: <CS extends Component[]>(...children: CS) => CS;
-    appendChild: <C extends Component>(child: C) => C;
-    removeChild: (component: Component) => void;
-    removeAllChildren: () => void;
-    /**
-     * Return all children components that messages need to be routed to
-     */
-    getChildren: () => readonly Component[];
-    /**
-     * TODO: we can do this better, right now it broadcasts the message to all
-     * components of the tree
-     *
-     * @hidden
-     */
-    routeMessage(idMap: IDMap, message: ClientComponentMessage): void;
-    insertBefore(child: Component, beforeChild: Component): void;
-}
-interface Listenable<Map extends Record<string, (...args: any[]) => void>> {
-    addListener<T extends keyof Map>(type: T, listener: Map[T]): void;
-    removeListener<T extends keyof Map>(type: T, listener: Map[T]): void;
-}
-declare class EventEmitter<Map extends Record<string, (...args: any[]) => void>> implements Listenable<Map> {
-    private readonly listeners;
-    addListener: <T extends keyof Map>(type: T, listener: Map[T]) => void;
-    removeListener: <T extends keyof Map>(type: T, listener: Map[T]) => void;
-    emit: <T extends keyof Map>(type: T, ...args: Parameters<Map[T]>) => Promise<unknown>;
-}
-
-export { BaseParent as B, type ClientMessage as C, EventEmitter as E, type GroupComponentStyle as G, IDMap as I, type Listenable as L, type Parent as P, type ServerMessage as S, type TabComponent as T, type Component as a, type GroupHeaderComponent as b, type GroupComponent as c, type ClientComponentMessage as d, Base as e, type ButtonComponent as f, type Component$1 as g, type LabelComponentStyle as h, type TabsComponent as i, type TimelineState as j, type TimelineComponent as k };