npm - @arcanejs/toolkit - Versions diffs - 0.0.2 → 0.1.0 - Mend

@arcanejs/toolkit 0.0.2 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

package/dist/backend/components/base.d.mts +2 -0
package/dist/backend/components/base.d.ts +2 -0
package/dist/backend/components/base.js +189 -0
package/dist/backend/components/base.mjs +10 -0
package/dist/backend/components/button.d.mts +30 -0
package/dist/backend/components/button.d.ts +30 -0
package/dist/backend/components/button.js +168 -0
package/dist/backend/components/button.mjs +7 -0
package/dist/backend/components/group.d.mts +51 -0
package/dist/backend/components/group.d.ts +51 -0
package/dist/backend/components/group.js +287 -0
package/dist/backend/components/group.mjs +9 -0
package/dist/backend/components/label.d.mts +21 -0
package/dist/backend/components/label.d.ts +21 -0
package/dist/backend/components/label.js +105 -0
package/dist/backend/components/label.mjs +7 -0
package/dist/backend/components/rect.d.mts +20 -0
package/dist/backend/components/rect.d.ts +20 -0
package/dist/backend/components/rect.js +105 -0
package/dist/backend/components/rect.mjs +7 -0
package/dist/backend/components/slider-button.d.mts +31 -0
package/dist/backend/components/slider-button.d.ts +31 -0
package/dist/backend/components/slider-button.js +161 -0
package/dist/backend/components/slider-button.mjs +7 -0
package/dist/backend/components/switch.d.mts +24 -0
package/dist/backend/components/switch.d.ts +24 -0
package/dist/backend/components/switch.js +144 -0
package/dist/backend/components/switch.mjs +7 -0
package/dist/backend/components/tabs.d.mts +28 -0
package/dist/backend/components/tabs.d.ts +28 -0
package/dist/backend/components/tabs.js +209 -0
package/dist/backend/components/tabs.mjs +9 -0
package/dist/backend/components/text-input.d.mts +26 -0
package/dist/backend/components/text-input.d.ts +26 -0
package/dist/backend/components/text-input.js +146 -0
package/dist/backend/components/text-input.mjs +7 -0
package/dist/backend/components/timeline.d.mts +17 -0
package/dist/backend/components/timeline.d.ts +17 -0
package/dist/backend/components/timeline.js +109 -0
package/dist/backend/components/timeline.mjs +7 -0
package/dist/base-BJAPu0O1.d.mts +234 -0
package/dist/base-BJAPu0O1.d.ts +234 -0
package/dist/chunk-37VNFO5S.mjs +42 -0
package/dist/chunk-3ZBM7Q4A.mjs +55 -0
package/dist/chunk-6LL3X7ZZ.mjs +44 -0
package/dist/chunk-DBW4OPGN.mjs +33 -0
package/dist/chunk-DP3QFYSS.mjs +66 -0
package/dist/chunk-GQZA5K4M.mjs +29 -0
package/dist/chunk-HF77PS7J.mjs +171 -0
package/dist/chunk-HVFTRNLQ.mjs +59 -0
package/dist/chunk-P6X5GIDT.mjs +29 -0
package/dist/chunk-S5DQIYC2.mjs +107 -0
package/dist/frontend.js +26321 -0
package/dist/frontend.js.map +7 -0
package/dist/index.d.mts +75 -1
package/dist/index.d.ts +75 -1
package/dist/index.js +852 -1
package/dist/index.mjs +288 -2
package/package.json +86 -6

package/dist/index.js CHANGED Viewed

@@ -1,4 +1,855 @@
 "use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 // src/index.ts
-console.log("hello world");
+var src_exports = {};
+__export(src_exports, {
+  Button: () => Button,
+  Group: () => Group,
+  GroupHeader: () => GroupHeader,
+  Label: () => Label,
+  Rect: () => Rect,
+  SliderButton: () => SliderButton,
+  Switch: () => Switch,
+  Tab: () => Tab,
+  Tabs: () => Tabs,
+  TextInput: () => TextInput,
+  Timeline: () => Timeline,
+  Toolkit: () => Toolkit
+});
+module.exports = __toCommonJS(src_exports);
+// src/backend/toolkit.ts
+var import_lodash = __toESM(require("lodash"));
+var import_diff = require("@arcanejs/diff/diff");
+// src/backend/options.ts
+var DEFAULT_LIGHT_DESK_OPTIONS = {
+  path: "/"
+};
+// src/backend/server.ts
+var fs = __toESM(require("fs"));
+var path = __toESM(require("path"));
+// src/shared/static.ts
+var FONTS = {
+  materialSymbolsOutlined: "material-symbols-outlined.woff2"
+};
+// src/backend/server.ts
+var parentDir = path.basename(__dirname);
+var DIST_DIR = (() => {
+  switch (parentDir) {
+    case "backend":
+      return path.resolve(__dirname, "../../dist");
+    case "dist":
+      return __dirname;
+    default:
+      throw new Error(`Server running from unknown location: ${__dirname}`);
+  }
+})();
+var STATIC_FILES = {
+  "/frontend.js": {
+    path: path.join(DIST_DIR, "frontend.js"),
+    contentType: "text/javascript"
+  },
+  "/frontend.js.map": {
+    path: path.join(DIST_DIR, "frontend.js.map"),
+    contentType: "text/plain"
+  },
+  [`/${FONTS.materialSymbolsOutlined}`]: {
+    path: require.resolve("material-symbols/material-symbols-outlined.woff2"),
+    contentType: "font/woff2"
+  }
+};
+console.log("STATIC_FILES", STATIC_FILES);
+var Server = class {
+  constructor(options, onNewConnection, onClosedConnection, onMessage) {
+    this.options = options;
+    this.onNewConnection = onNewConnection;
+    this.onClosedConnection = onClosedConnection;
+    this.onMessage = onMessage;
+  }
+  handleHttpRequest = async (req, res) => {
+    console.log("handleHttpRequest", req.url);
+    if (req.url === this.options.path) {
+      const content = `
+          <html>
+            <head>
+              <title>Light Desk</title>
+              <meta name="viewport" content="width=device-width, initial-scale=1">
+            </head>
+            <body>
+              <div id="root"></div>
+              <script type="text/javascript" src="${this.options.path}frontend.js"></script>
+            </body>
+          </html>`;
+      res.writeHead(200, { "Content-Type": "text/html" });
+      res.end(content, "utf-8");
+      return;
+    }
+    if (req.url && req.url.startsWith(this.options.path)) {
+      const relativePath = req.url.substr(this.options.path.length - 1);
+      const f = STATIC_FILES[relativePath];
+      if (f) {
+        return fs.promises.stat(f.path).then(
+          () => {
+            this.sendStaticFile(f.path, res, f.contentType);
+          },
+          (err) => {
+            console.error(err);
+            res.writeHead(500, { "Content-Type": "text/plain" });
+            res.end("Expected static file not found", "utf-8");
+          }
+        );
+      }
+    }
+    res.writeHead(404, { "Content-Type": "text/plain" });
+    res.end("not found", "utf-8");
+  };
+  sendStaticFile = (file, response, contentType) => {
+    fs.readFile(file, function(error, content) {
+      if (error) {
+        if (error.code === "ENOENT") {
+          response.writeHead(404, { "Content-Type": "text/plain" });
+          response.end("file not found", "utf-8");
+        } else {
+          response.writeHead(500, { "Content-Type": "text/plain" });
+          response.end("Error", "utf-8");
+          console.error(error);
+        }
+      } else {
+        response.writeHead(200, { "Content-Type": contentType });
+        response.end(content, "utf-8");
+      }
+    });
+  };
+  handleWsConnection = (ws) => {
+    const connection = {
+      sendMessage: (msg) => ws.send(JSON.stringify(msg))
+    };
+    this.onNewConnection(connection);
+    console.log("new connection");
+    ws.on(
+      "message",
+      (msg) => this.onMessage(connection, JSON.parse(msg.toString()))
+    );
+    ws.on("close", () => this.onClosedConnection(connection));
+  };
+};
+// 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
+var import_ws = require("ws");
+var import_http = require("http");
+console.log(import_diff.diffJson);
+var Toolkit = class {
+  options;
+  /**
+   * Mapping from components to unique IDs that identify them
+   */
+  componentIDMap = new IDMap();
+  connections = /* @__PURE__ */ new Map();
+  rootGroup = null;
+  constructor(options = {}) {
+    this.options = {
+      ...DEFAULT_LIGHT_DESK_OPTIONS,
+      ...options
+    };
+    if (!this.options.path.endsWith("/") || !this.options.path.startsWith("/")) {
+      throw new Error(
+        `path must start and end with "/", set to: ${this.options.path}`
+      );
+    }
+  }
+  start = (opts) => {
+    const server = new Server(
+      this.options,
+      this.onNewConnection,
+      this.onClosedConnection,
+      this.onMessage
+    );
+    if (opts.mode === "automatic") {
+      const httpServer = (0, import_http.createServer)(server.handleHttpRequest);
+      const wss = new import_ws.WebSocketServer({
+        server: httpServer
+      });
+      wss.on("connection", server.handleWsConnection);
+      httpServer.listen(opts.port, () => {
+        console.log(
+          `Light Desk Started: http://localhost:${opts.port}${this.options.path}`
+        );
+      });
+    } else if (opts.mode === "express") {
+      const wss = new import_ws.WebSocketServer({
+        server: opts.server
+      });
+      wss.on("connection", server.handleWsConnection);
+      opts.express.get(`${this.options.path}*`, server.handleHttpRequest);
+    } else if (opts.mode === "manual") {
+      opts.setup(server);
+    } else {
+      throw new Error(`Unsupported mode`);
+    }
+  };
+  setRoot = (group) => {
+    if (this.rootGroup) {
+      throw new Error("Can only set root group once");
+    }
+    this.rootGroup = group;
+    this.rootGroup.setParent(this);
+  };
+  updateTree = import_lodash.default.throttle(
+    () => {
+      setImmediate(() => {
+        if (!this.rootGroup) return;
+        const root = this.rootGroup.getProtoInfo(this.componentIDMap);
+        for (const [connection, meta] of this.connections.entries()) {
+          connection.sendMessage({
+            type: "tree-diff",
+            diff: (0, import_diff.diffJson)(meta.lastTreeSent, root)
+          });
+          meta.lastTreeSent = root;
+        }
+      });
+    },
+    10,
+    { leading: true, trailing: true }
+  );
+  removeChild = (component) => {
+    if (this.rootGroup === component) {
+      this.rootGroup = null;
+      component.setParent(null);
+    }
+  };
+  onNewConnection = (connection) => {
+    const lastTreeSent = this.rootGroup?.getProtoInfo(this.componentIDMap) ?? void 0;
+    this.connections.set(connection, { lastTreeSent });
+    if (lastTreeSent) {
+      connection.sendMessage({
+        type: "tree-full",
+        root: lastTreeSent
+      });
+    }
+  };
+  onClosedConnection = (connection) => {
+    console.log("removing connection");
+    this.connections.delete(connection);
+  };
+  onMessage = (_connection, message) => {
+    console.log("got message", message);
+    switch (message.type) {
+      case "component-message":
+        if (this.rootGroup)
+          this.rootGroup.routeMessage(this.componentIDMap, message);
+        break;
+    }
+  };
+};
+// 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 BaseParent = class extends Base {
+  /** @hidden */
+  children = [];
+  appendChildren = (...children) => {
+    for (const c of children) {
+      const newChildren = [...this.children.filter((ch) => ch !== c), c];
+      this.validateChildren(newChildren);
+      this.children = Object.freeze(newChildren);
+      c.setParent(this);
+    }
+    this.updateTree();
+    return children;
+  };
+  appendChild = (child) => {
+    this.appendChildren(child);
+    return child;
+  };
+  removeChild = (component) => {
+    const match = this.children.findIndex((c) => c === component);
+    if (match >= 0) {
+      const removingChild = this.children[match];
+      const newChildren = [
+        ...this.children.slice(0, match),
+        ...this.children.slice(match + 1)
+      ];
+      this.validateChildren(newChildren);
+      this.children = Object.freeze(newChildren);
+      removingChild?.setParent(null);
+      this.updateTree();
+    }
+  };
+  removeAllChildren = () => {
+    this.children.map((c) => c.setParent(null));
+    this.children = Object.freeze([]);
+    this.updateTree();
+  };
+  /**
+   * Return all children components that messages need to be routed to
+   */
+  getChildren = () => this.children;
+  /**
+   * TODO: we can do this better, right now it broadcasts the message to all
+   * components of the tree
+   *
+   * @hidden
+   */
+  routeMessage(idMap, message) {
+    if (idMap.getId(this) === message.componentKey) {
+      this.handleMessage(message);
+    } else {
+      for (const c of this.children) {
+        if (idMap.getId(c) === message.componentKey) {
+          c.handleMessage(message);
+        } else {
+          c.routeMessage(idMap, message);
+        }
+      }
+    }
+  }
+  insertBefore(child, beforeChild) {
+    const filteredChildren = this.children.filter((c) => c !== child);
+    let match = filteredChildren.findIndex((c) => c === beforeChild);
+    console.log("match", match);
+    if (match === -1) {
+      match = filteredChildren.length;
+    }
+    const newChildren = [
+      ...filteredChildren.slice(0, match),
+      child,
+      ...filteredChildren.slice(match)
+    ];
+    this.validateChildren(newChildren);
+    this.children = Object.freeze(newChildren);
+    child.setParent(this);
+    this.updateTree();
+  }
+};
+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((resolve2, reject) => {
+          try {
+            resolve2(l(...args));
+          } catch (e) {
+            reject(e);
+          }
+        })
+      )
+    );
+  };
+};
+// src/backend/components/button.ts
+var DEFAULT_PROPS = {
+  text: null,
+  icon: null,
+  mode: "normal",
+  error: null
+};
+var Button = class extends Base {
+  /** @hidden */
+  events = new EventEmitter();
+  constructor(props) {
+    super(DEFAULT_PROPS, props);
+  }
+  addListener = this.events.addListener;
+  removeListener = this.events.removeListener;
+  setText = (text) => {
+    this.updateProps({ text });
+    return this;
+  };
+  setIcon = (icon) => {
+    this.updateProps({ icon: icon ?? null });
+    return this;
+  };
+  setMode = (mode) => {
+    this.updateProps({
+      mode,
+      error: null
+    });
+    return this;
+  };
+  /** @hidden */
+  getProtoInfo = (idMap) => {
+    return {
+      component: "button",
+      key: idMap.getId(this),
+      text: this.props.text || "",
+      state: this.props.error ? { state: "error", error: this.props.error } : { state: this.props.mode },
+      icon: this.props.icon ?? void 0
+    };
+  };
+  /** @hidden */
+  handleMessage = (message) => {
+    if (message.component === "button") {
+      this.events.emit("click").then(() => {
+        if (this.props.error) {
+          this.updateProps({
+            error: null
+          });
+        }
+      }).catch((e) => {
+        this.updateProps({
+          error: `${e}`
+        });
+      });
+    }
+  };
+};
+// src/shared/styles.ts
+var GROUP_DEFAULT_STYLE = {
+  direction: "horizontal"
+};
+// src/backend/components/group.ts
+var DEFAULT_PROPS2 = {
+  ...GROUP_DEFAULT_STYLE,
+  title: null,
+  labels: null,
+  headerComponents: null
+};
+var GroupHeader = class extends BaseParent {
+  validateChildren = () => {
+  };
+  /** @hidden */
+  getProtoInfo = (idMap) => ({
+    component: "group-header",
+    key: idMap.getId(this),
+    children: this.getChildren().map((c) => c.getProtoInfo(idMap))
+  });
+};
+var Group = class extends BaseParent {
+  /** @hidden */
+  events = new EventEmitter();
+  constructor(props) {
+    super(DEFAULT_PROPS2, props);
+  }
+  addListener = this.events.addListener;
+  removeListener = this.events.removeListener;
+  validateChildren = () => {
+  };
+  setOptions = (options) => {
+    this.updateProps(options);
+  };
+  setTitle = (title) => {
+    this.updateProps({ title });
+  };
+  addLabel = (label) => {
+    this.updateProps({ labels: [...this.props.labels || [], label] });
+  };
+  setLabels = (labels) => {
+    this.updateProps({ labels });
+  };
+  addHeaderChild = (child) => {
+    const header = new GroupHeader({});
+    header.appendChild(child);
+    this.appendChild(header);
+    return child;
+  };
+  removeHeaderChild = (child) => {
+    for (const c of this.getChildren()) {
+      if (c instanceof GroupHeader) {
+        c.removeChild(child);
+      }
+    }
+  };
+  removeAllHeaderChildren = () => {
+    for (const child of this.getChildren()) {
+      if (child instanceof GroupHeader) {
+        child.removeAllChildren();
+      }
+    }
+  };
+  /** @hidden */
+  getProtoInfo = (idMap) => {
+    const children = [];
+    const headers = [];
+    for (const c of this.getChildren()) {
+      const childProto = c.getProtoInfo(idMap);
+      if (childProto.component === "group-header") {
+        headers.push(childProto);
+      } else {
+        children.push(childProto);
+      }
+    }
+    return {
+      component: "group",
+      key: idMap.getId(this),
+      title: this.props.title ?? void 0,
+      direction: this.props.direction,
+      border: this.props.border,
+      wrap: this.props.wrap,
+      children,
+      headers: headers.length > 0 ? headers : void 0,
+      labels: this.props.labels ?? void 0,
+      editableTitle: this.props.editableTitle || false,
+      defaultCollapsibleState: this.props.defaultCollapsibleState
+    };
+  };
+  /** @hidden */
+  handleMessage = (message) => {
+    if (message.component === "group") {
+      this.events.emit("title-changed", message.title);
+    }
+  };
+};
+// src/backend/components/label.ts
+var Label = class extends Base {
+  constructor(props) {
+    super({ text: null }, props);
+  }
+  /** @hidden */
+  getProtoInfo(idMap) {
+    return {
+      component: "label",
+      key: idMap.getId(this),
+      bold: this.props.bold,
+      text: this.props.text ?? ""
+    };
+  }
+  setText(text) {
+    this.updateProps({
+      text
+    });
+    return this;
+  }
+};
+// src/backend/components/rect.ts
+var DEFAULT_PROPS3 = {
+  color: "rgba(0, 0, 0, 0)"
+};
+var Rect = class extends Base {
+  constructor(props) {
+    super(DEFAULT_PROPS3, props);
+  }
+  /** @hidden */
+  getProtoInfo(idMap) {
+    return {
+      component: "rect",
+      key: idMap.getId(this),
+      color: this.props.color
+    };
+  }
+  setColor(color) {
+    this.updateProps({ color });
+    return this;
+  }
+};
+// src/backend/components/slider-button.ts
+var DEFAULT_PROPS4 = {
+  value: null,
+  min: 0,
+  max: 255,
+  step: 5,
+  mode: "writeBack"
+};
+var SliderButton = class extends Base {
+  /** @hidden */
+  events = new EventEmitter();
+  constructor(props) {
+    super(DEFAULT_PROPS4, props);
+  }
+  addListener = this.events.addListener;
+  removeListener = this.events.removeListener;
+  /** @hidden */
+  getProtoInfo(idMap) {
+    return {
+      component: "slider_button",
+      key: idMap.getId(this),
+      min: this.props.min,
+      max: this.props.max,
+      step: this.props.step,
+      value: this.props.value
+    };
+  }
+  /** @hidden */
+  handleMessage(message) {
+    if (message.component !== "slider_button") return;
+    const newValue = this.sanitizeNumber(message.value);
+    if (this.props.value === newValue) return;
+    if (this.props.mode === "writeBack") {
+      this.updateProps({ value: newValue });
+    }
+    this.events.emit("change", newValue);
+  }
+  setValue(value) {
+    const newValue = this.sanitizeNumber(value);
+    if (newValue === this.props.value) return;
+    this.updateProps({ value });
+    this.updateTree();
+  }
+  sanitizeNumber(value) {
+    const i = Math.round((value - this.props.min) / this.props.step);
+    const v = i * this.props.step + this.props.min;
+    const clampedValue = Math.max(this.props.min, Math.min(this.props.max, v));
+    return clampedValue;
+  }
+};
+// src/backend/components/switch.ts
+var DEFAULT_PROPS5 = {
+  state: "off"
+};
+var Switch = class extends Base {
+  /** @hidden */
+  events = new EventEmitter();
+  constructor(props) {
+    super(DEFAULT_PROPS5, props);
+  }
+  addListener = this.events.addListener;
+  removeListener = this.events.removeListener;
+  /** @hidden */
+  getProtoInfo(idMap) {
+    return {
+      component: "switch",
+      key: idMap.getId(this),
+      state: this.props.state
+    };
+  }
+  /** @hidden */
+  handleMessage(message) {
+    if (message.component === "switch") {
+      const state = this.props.state === "on" ? "off" : "on";
+      this.updateProps({ state });
+      this.events.emit("change", state);
+    }
+  }
+  setValue(state) {
+    if (state === this.props.state) return;
+    this.updateProps({ state });
+  }
+};
+// src/backend/components/tabs.ts
+var Tab = class extends BaseParent {
+  validateChildren = (children) => {
+    if (children.length > 1) {
+      throw new Error("Tab can only have one child");
+    }
+  };
+  /** @hidden */
+  getProtoInfo = (idMap) => ({
+    component: "tab",
+    key: idMap.getId(this),
+    name: this.props.name,
+    child: this.getChildren().slice(0, 1).map((c) => c.getProtoInfo(idMap))[0]
+  });
+};
+var Tabs = class extends BaseParent {
+  validateChildren = (children) => {
+    for (const child of children) {
+      if (!(child instanceof Tab)) {
+        throw new Error("Tabs can only have Tab children");
+      }
+    }
+  };
+  constructor(props) {
+    super({}, { ...props });
+  }
+  addTabs(...tabs) {
+    for (const t of tabs) {
+      const tab = new Tab({ name: t.name });
+      tab.appendChildren(t.component);
+      this.appendChild(tab);
+    }
+  }
+  addTab(name, component) {
+    this.addTabs({ name, component });
+    return component;
+  }
+  /** @hidden */
+  getProtoInfo(idMap) {
+    return {
+      component: "tabs",
+      key: idMap.getId(this),
+      tabs: this.getChildren().map((c) => c.getProtoInfo(idMap))
+    };
+  }
+};
+// src/backend/components/text-input.ts
+var DEFAULT_PROPS6 = {
+  value: null
+};
+var TextInput = class extends Base {
+  /** @hidden */
+  events = new EventEmitter();
+  constructor(props) {
+    super(DEFAULT_PROPS6, 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 });
+  };
+};
+// src/backend/components/timeline.ts
+var DEFAULT_PROPS7 = {
+  state: {
+    state: "stopped",
+    totalTimeMillis: 0,
+    currentTimeMillis: 0
+  },
+  title: null,
+  subtitles: null,
+  source: null
+};
+var Timeline = class extends Base {
+  constructor(props) {
+    super(DEFAULT_PROPS7, 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 = {
+  Button,
+  Group,
+  GroupHeader,
+  Label,
+  Rect,
+  SliderButton,
+  Switch,
+  Tab,
+  Tabs,
+  TextInput,
+  Timeline,
+  Toolkit
+});