@arcanejs/toolkit 0.0.2 → 0.1.0

package/dist/backend/components/text-input.js

@@ -0,0 +1,146 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/backend/components/text-input.ts
+var text_input_exports = {};
+__export(text_input_exports, {
+  TextInput: () => TextInput
+});
+module.exports = __toCommonJS(text_input_exports);
+
+// src/backend/components/base.ts
+var Base = class {
+  /** @hidden */
+  parent = null;
+  /** @hidden */
+  defaultProps;
+  /** @hidden */
+  _props;
+  constructor(defaultProps, props) {
+    this.defaultProps = defaultProps;
+    this._props = Object.freeze({
+      ...defaultProps,
+      ...props
+    });
+  }
+  get props() {
+    return this._props;
+  }
+  set props(props) {
+    this.setProps(props);
+  }
+  setProps = (props) => {
+    this._props = Object.freeze({
+      ...this.defaultProps,
+      ...props
+    });
+    this.updateTree();
+  };
+  updateProps = (updates) => {
+    this._props = Object.freeze({
+      ...this._props,
+      ...updates
+    });
+    this.updateTree();
+  };
+  /** @hidden */
+  setParent(parent) {
+    if (this.parent && this.parent !== parent) {
+      this.parent.removeChild(this);
+    }
+    this.parent = parent;
+  }
+  /** @hidden */
+  updateTree() {
+    if (this.parent) this.parent.updateTree();
+  }
+  /** @hidden */
+  handleMessage(message) {
+    console.log("Component Received Message:", message);
+  }
+  routeMessage(_idMap, _message) {
+  }
+};
+var EventEmitter = class {
+  listeners = /* @__PURE__ */ new Map();
+  addListener = (type, listener) => {
+    let set = this.listeners.get(type);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      this.listeners.set(type, set);
+    }
+    set.add(listener);
+  };
+  removeListener = (type, listener) => {
+    this.listeners.get(type)?.delete(listener);
+  };
+  emit = (type, ...args) => {
+    return Promise.all(
+      [...this.listeners.get(type) || []].map(
+        (l) => new Promise((resolve, reject) => {
+          try {
+            resolve(l(...args));
+          } catch (e) {
+            reject(e);
+          }
+        })
+      )
+    );
+  };
+};
+
+// src/backend/components/text-input.ts
+var DEFAULT_PROPS = {
+  value: null
+};
+var TextInput = class extends Base {
+  /** @hidden */
+  events = new EventEmitter();
+  constructor(props) {
+    super(DEFAULT_PROPS, props);
+  }
+  addListener = this.events.addListener;
+  removeListener = this.events.removeListener;
+  /** @hidden */
+  getProtoInfo = (idMap) => {
+    return {
+      component: "text-input",
+      key: idMap.getId(this),
+      value: this.props.value ?? ""
+    };
+  };
+  /** @hidden */
+  handleMessage = (message) => {
+    if (message.component === "text-input") {
+      if (this.props.value !== message.value) {
+        this.updateProps({ value: message.value });
+        this.events.emit("change", message.value);
+      }
+    }
+  };
+  getValue = () => this.props.value;
+  getValidatedValue = (validator) => this.props.value === "" ? null : validator(this.props.value || "");
+  setValue = (value) => {
+    this.updateProps({ value });
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TextInput
+});

package/dist/backend/components/text-input.mjs

@@ -0,0 +1,7 @@
+import {
+  TextInput
+} from "../../chunk-6LL3X7ZZ.mjs";
+import "../../chunk-HF77PS7J.mjs";
+export {
+  TextInput
+};

package/dist/backend/components/timeline.d.mts

@@ -0,0 +1,17 @@
+import { e as Base, I as IDMap, g as Component, j as TimelineState, k as TimelineComponent } from '../../base-BJAPu0O1.mjs';
+import '@arcanejs/diff';
+
+type InternalProps = {
+    state: TimelineState;
+    title: string | null;
+    subtitles: string[] | null;
+    source: TimelineComponent['source'] | null;
+};
+type Props = Partial<InternalProps>;
+declare class Timeline extends Base<InternalProps> {
+    constructor(props?: Props);
+    /** @hidden */
+    getProtoInfo: (idMap: IDMap) => Component;
+}
+
+export { type Props, Timeline };

package/dist/backend/components/timeline.d.ts

@@ -0,0 +1,17 @@
+import { e as Base, I as IDMap, g as Component, j as TimelineState, k as TimelineComponent } from '../../base-BJAPu0O1.js';
+import '@arcanejs/diff';
+
+type InternalProps = {
+    state: TimelineState;
+    title: string | null;
+    subtitles: string[] | null;
+    source: TimelineComponent['source'] | null;
+};
+type Props = Partial<InternalProps>;
+declare class Timeline extends Base<InternalProps> {
+    constructor(props?: Props);
+    /** @hidden */
+    getProtoInfo: (idMap: IDMap) => Component;
+}
+
+export { type Props, Timeline };

package/dist/backend/components/timeline.js

@@ -0,0 +1,109 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/backend/components/timeline.ts
+var timeline_exports = {};
+__export(timeline_exports, {
+  Timeline: () => Timeline
+});
+module.exports = __toCommonJS(timeline_exports);
+
+// src/backend/components/base.ts
+var Base = class {
+  /** @hidden */
+  parent = null;
+  /** @hidden */
+  defaultProps;
+  /** @hidden */
+  _props;
+  constructor(defaultProps, props) {
+    this.defaultProps = defaultProps;
+    this._props = Object.freeze({
+      ...defaultProps,
+      ...props
+    });
+  }
+  get props() {
+    return this._props;
+  }
+  set props(props) {
+    this.setProps(props);
+  }
+  setProps = (props) => {
+    this._props = Object.freeze({
+      ...this.defaultProps,
+      ...props
+    });
+    this.updateTree();
+  };
+  updateProps = (updates) => {
+    this._props = Object.freeze({
+      ...this._props,
+      ...updates
+    });
+    this.updateTree();
+  };
+  /** @hidden */
+  setParent(parent) {
+    if (this.parent && this.parent !== parent) {
+      this.parent.removeChild(this);
+    }
+    this.parent = parent;
+  }
+  /** @hidden */
+  updateTree() {
+    if (this.parent) this.parent.updateTree();
+  }
+  /** @hidden */
+  handleMessage(message) {
+    console.log("Component Received Message:", message);
+  }
+  routeMessage(_idMap, _message) {
+  }
+};
+
+// src/backend/components/timeline.ts
+var DEFAULT_PROPS = {
+  state: {
+    state: "stopped",
+    totalTimeMillis: 0,
+    currentTimeMillis: 0
+  },
+  title: null,
+  subtitles: null,
+  source: null
+};
+var Timeline = class extends Base {
+  constructor(props) {
+    super(DEFAULT_PROPS, props);
+  }
+  /** @hidden */
+  getProtoInfo = (idMap) => ({
+    component: "timeline",
+    key: idMap.getId(this),
+    state: this.props.state,
+    title: this.props.title ?? void 0,
+    subtitles: this.props.subtitles ?? void 0,
+    source: this.props.source ?? void 0
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Timeline
+});

package/dist/backend/components/timeline.mjs

@@ -0,0 +1,7 @@
+import {
+  Timeline
+} from "../../chunk-DBW4OPGN.mjs";
+import "../../chunk-HF77PS7J.mjs";
+export {
+  Timeline
+};

package/dist/base-BJAPu0O1.d.mts

@@ -0,0 +1,234 @@
+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 };