@arcanejs/toolkit 6.0.0 → 7.0.0

package/dist/index.js

@@ -1,35 +1,35 @@
-"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 }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2;
+"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 }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } async function _asyncNullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return await rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2;
 
 
-var _chunkU6FSQBQ3js = require('./chunk-U6FSQBQ3.js');
+var _chunkA3RWE7HZjs = require('./chunk-A3RWE7HZ.js');
 
 
-var _chunkHTCWMJUAjs = require('./chunk-HTCWMJUA.js');
+var _chunkIV3AE3CWjs = require('./chunk-IV3AE3CW.js');
 
 
-var _chunk6QWYIJLMjs = require('./chunk-6QWYIJLM.js');
+var _chunkUHEZQR2Qjs = require('./chunk-UHEZQR2Q.js');
 
 
 var _chunkEABM5X65js = require('./chunk-EABM5X65.js');
 
 
-var _chunk4OCRZD4Fjs = require('./chunk-4OCRZD4F.js');
+var _chunk4AGKM5NTjs = require('./chunk-4AGKM5NT.js');
 
 
 
-var _chunk7JIC2XBCjs = require('./chunk-7JIC2XBC.js');
+var _chunkXSKWLJOQjs = require('./chunk-XSKWLJOQ.js');
 
 
-var _chunk3GTEUTFTjs = require('./chunk-3GTEUTFT.js');
+var _chunkTF7N4O5Gjs = require('./chunk-TF7N4O5G.js');
 
 
-var _chunkQAH2OSHRjs = require('./chunk-QAH2OSHR.js');
+var _chunk5B65Q7RLjs = require('./chunk-5B65Q7RL.js');
 
 
-var _chunkNL3W4M7Jjs = require('./chunk-NL3W4M7J.js');
+var _chunkCVY55KARjs = require('./chunk-CVY55KAR.js');
 
 
-var _chunk53EOA4UEjs = require('./chunk-53EOA4UE.js');
+var _chunk2K4UT5QBjs = require('./chunk-2K4UT5QB.js');
 
 
 var _chunkWN3GXVUEjs = require('./chunk-WN3GXVUE.js');
@@ -43,7 +43,8 @@ var _diff = require('@arcanejs/diff/diff');
 
 // src/backend/options.ts
 var DEFAULT_LIGHT_DESK_OPTIONS = {
-  path: "/"
+  path: "/",
+  clockSync: false
 };
 
 // src/backend/server.ts
@@ -69,106 +70,251 @@ var distDir = () => {
   }
 };
 var Server = (_class = class {
-  constructor(options, onNewConnection, onClosedConnection, onMessage, log) {;_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);
+  constructor(options, onNewConnection, onClosedConnection, onMessage, log) {;_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);_class.prototype.__init4.call(this);_class.prototype.__init5.call(this);_class.prototype.__init6.call(this);_class.prototype.__init7.call(this);_class.prototype.__init8.call(this);_class.prototype.__init9.call(this);_class.prototype.__init10.call(this);_class.prototype.__init11.call(this);_class.prototype.__init12.call(this);
     this.options = options;
     this.onNewConnection = onNewConnection;
     this.onClosedConnection = onClosedConnection;
     this.onMessage = onMessage;
     this.log = log;
+    this.title = _nullishCoalesce(options.title, () => ( "@arcanejs"));
+  }
+  __init() {this.staticFiles = null}
+  __init2() {this.htmlContext = null}
+  __init3() {this.staticFilesInitPromise = null}
+  
+  __init4() {this.getEntrypointPaths = () => {
     const entrypoint = _nullishCoalesce(this.options.entrypointJsFile, () => ( path.join(distDir(), "frontend", "entrypoint.js")));
     if (!entrypoint.endsWith(".js")) {
       throw new Error("Entrypoint file must be a .js file");
     }
     const entrypointMap = entrypoint + ".map";
-    this.entrypointFilename = path.basename(entrypoint);
-    this.title = _escapehtml2.default.call(void 0, _nullishCoalesce(options.title, () => ( "@arcanejs")));
-    this.staticFiles = {
-      [`/${FONTS.materialSymbolsOutlined}`]: {
-        path: _nullishCoalesce(this.options.materialIconsFontFile, () => ( _chunk3RG5ZIWIjs.__require.resolve("material-symbols/material-symbols-outlined.woff2"))),
-        contentType: "font/woff2"
-      },
-      [`/${this.entrypointFilename}`]: {
-        path: entrypoint,
-        contentType: "text/javascript"
-      },
-      [`/${path.basename(entrypointMap)}`]: {
-        path: entrypointMap,
-        contentType: "text/plain"
-      }
+    const entrypointCss = entrypoint.replace(/\.js$/, ".css");
+    const entrypointCssMap = entrypointCss + ".map";
+    return {
+      entrypoint,
+      entrypointMap,
+      entrypointCss,
+      entrypointCssMap,
+      entrypointFilename: path.basename(entrypoint),
+      entrypointMapFilename: path.basename(entrypointMap),
+      entrypointCssFilename: path.basename(entrypointCss),
+      entrypointCssMapFilename: path.basename(entrypointCssMap)
     };
-    _optionalChain([log, 'optionalAccess', _14 => _14.debug, 'call', _15 => _15("Static Assets: %o", this.staticFiles)]);
-  }
-  
-  
-  
-  __init() {this.handleHttpRequest = async (req, res) => {
-    _optionalChain([this, 'access', _16 => _16.log, 'optionalAccess', _17 => _17.debug, 'call', _18 => _18("handleHttpRequest %s", req.url)]);
-    if (req.url === this.options.path) {
-      const content = `
+  }}
+  __init5() {this.fileExists = async (filePath) => {
+    try {
+      await fs.promises.access(filePath, fs.constants.F_OK);
+      return true;
+    } catch (e3) {
+      return false;
+    }
+  }}
+  __init6() {this.ensureStaticFilesInitialized = async () => {
+    if (this.staticFiles && this.htmlContext) return;
+    if (this.staticFilesInitPromise) return this.staticFilesInitPromise;
+    this.staticFilesInitPromise = (async () => {
+      const {
+        entrypoint,
+        entrypointMap,
+        entrypointCss,
+        entrypointCssMap,
+        entrypointFilename,
+        entrypointMapFilename,
+        entrypointCssFilename,
+        entrypointCssMapFilename
+      } = this.getEntrypointPaths();
+      const [hasEntrypointMap, hasEntrypointCss, hasEntrypointCssMap] = await Promise.all([
+        this.fileExists(entrypointMap),
+        this.fileExists(entrypointCss),
+        this.fileExists(entrypointCssMap)
+      ]);
+      const staticFilePaths = {
+        materialSymbolsOutlined: FONTS.materialSymbolsOutlined,
+        entrypointJs: entrypointFilename,
+        ...hasEntrypointMap ? { entrypointJsMap: entrypointMapFilename } : {},
+        ...hasEntrypointCss ? { entrypointCss: entrypointCssFilename } : {},
+        ...hasEntrypointCssMap ? { entrypointCssMap: entrypointCssMapFilename } : {}
+      };
+      const additionalFiles = _nullishCoalesce(this.options.additionalFiles, () => ( {}));
+      const additionalFileEntries = Object.entries(additionalFiles).map(
+        ([relativePath, loader]) => [
+          this.toRoutePath(relativePath),
+          async () => {
+            const asset = await loader();
+            if (!Buffer.isBuffer(asset.content)) {
+              throw new Error(
+                `Additional file "${relativePath}" did not return a Buffer in content`
+              );
+            }
+            return asset;
+          }
+        ]
+      );
+      this.staticFiles = {
+        [this.toRoutePath(staticFilePaths.materialSymbolsOutlined)]: async () => ({
+          content: await fs.promises.readFile(
+            _nullishCoalesce(this.options.materialIconsFontFile, () => ( _chunk3RG5ZIWIjs.__require.resolve(
+              "material-symbols/material-symbols-outlined.woff2"
+            )))
+          ),
+          contentType: "font/woff2"
+        }),
+        [this.toRoutePath(staticFilePaths.entrypointJs)]: async () => ({
+          content: await fs.promises.readFile(entrypoint),
+          contentType: "text/javascript"
+        }),
+        ...hasEntrypointMap ? {
+          [this.toRoutePath(entrypointMapFilename)]: async () => ({
+            content: await fs.promises.readFile(entrypointMap),
+            contentType: "text/plain"
+          })
+        } : {},
+        ...hasEntrypointCss ? {
+          [this.toRoutePath(entrypointCssFilename)]: async () => ({
+            content: await fs.promises.readFile(entrypointCss),
+            contentType: "text/css"
+          })
+        } : {},
+        ...hasEntrypointCssMap ? {
+          [this.toRoutePath(entrypointCssMapFilename)]: async () => ({
+            content: await fs.promises.readFile(entrypointCssMap),
+            contentType: "text/plain"
+          })
+        } : {},
+        ...Object.fromEntries(additionalFileEntries)
+      };
+      this.htmlContext = {
+        title: this.title,
+        path: this.options.path,
+        coreAssets: {
+          materialSymbolsOutlined: this.toSiteRelativeUrl(
+            staticFilePaths.materialSymbolsOutlined
+          ),
+          entrypointJs: this.toSiteRelativeUrl(staticFilePaths.entrypointJs),
+          entrypointJsMap: hasEntrypointMap ? this.toSiteRelativeUrl(entrypointMapFilename) : null,
+          entrypointCss: hasEntrypointCss ? this.toSiteRelativeUrl(entrypointCssFilename) : null,
+          entrypointCssMap: hasEntrypointCssMap ? this.toSiteRelativeUrl(entrypointCssMapFilename) : null
+        },
+        assetUrls: this.createAssetUrls(this.staticFiles)
+      };
+      _optionalChain([this, 'access', _26 => _26.log, 'optionalAccess', _27 => _27.debug, 'call', _28 => _28("Static Assets: %o", this.staticFiles)]);
+    })();
+    this.staticFilesInitPromise.catch(() => {
+      this.staticFilesInitPromise = null;
+      this.staticFiles = null;
+      this.htmlContext = null;
+    });
+    return this.staticFilesInitPromise;
+  }}
+  __init7() {this.handleHttpRequest = async (req, res) => {
+    try {
+      await this.ensureStaticFilesInitialized();
+    } catch (err) {
+      if (err instanceof Error) {
+        _optionalChain([this, 'access', _29 => _29.log, 'optionalAccess', _30 => _30.error, 'call', _31 => _31(err)]);
+      } else {
+        _optionalChain([this, 'access', _32 => _32.log, 'optionalAccess', _33 => _33.error, 'call', _34 => _34("Error preparing static files: %o", err)]);
+      }
+      res.writeHead(500, { "Content-Type": "text/plain" });
+      res.end("Unable to prepare static files", "utf-8");
+      return;
+    }
+    const htmlContext = this.htmlContext;
+    const staticFiles = this.staticFiles;
+    if (!htmlContext || !staticFiles) {
+      throw new Error("Static assets were not initialized");
+    }
+    const requestUrl = _nullishCoalesce(req.originalUrl, () => ( req.url));
+    _optionalChain([this, 'access', _35 => _35.log, 'optionalAccess', _36 => _36.debug, 'call', _37 => _37("handleHttpRequest %s", requestUrl)]);
+    const pathname = this.parsePathname(requestUrl);
+    if (pathname === this.options.path) {
+      const content = await _asyncNullishCoalesce(await _optionalChain([this, 'access', _38 => _38.options, 'access', _39 => _39.htmlPage, 'optionalCall', _40 => _40(htmlContext)]), async () => ( `
           <html>
             <head>
-              <title>${this.title}</title>
+              <title>${_escapehtml2.default.call(void 0, htmlContext.title)}</title>
               <meta charset="utf-8">
               <meta name="viewport" content="width=device-width, initial-scale=1">
               <style type="text/css">
                 @font-face {
                   font-family: 'Material Symbols Outlined';
                   font-style: normal;
-                  src: url(${FONTS.materialSymbolsOutlined}) format('woff');
+                  src: url(${htmlContext.coreAssets.materialSymbolsOutlined}) format('woff');
                 }
               </style>
+              ${htmlContext.coreAssets.entrypointCss ? `<link rel="stylesheet" href="${htmlContext.coreAssets.entrypointCss}" />` : ""}
             </head>
             <body>
               <div id="root"></div>
-              <script type="text/javascript" src="${this.options.path}${this.entrypointFilename}"></script>
+              <script type="text/javascript" src="${htmlContext.coreAssets.entrypointJs}"></script>
             </body>
-          </html>`;
+          </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 = this.staticFiles[relativePath];
+    if (pathname && pathname.startsWith(this.options.path)) {
+      const relativePath = pathname.substr(this.options.path.length - 1);
+      const f = staticFiles[relativePath];
       if (f) {
-        return fs.promises.stat(f.path).then(
-          () => {
-            this.sendStaticFile(f.path, res, f.contentType);
-          },
-          (err) => {
-            _optionalChain([this, 'access', _19 => _19.log, 'optionalAccess', _20 => _20.error, 'call', _21 => _21(err)]);
-            res.writeHead(500, { "Content-Type": "text/plain" });
-            res.end("Expected static file not found", "utf-8");
+        try {
+          const response = await f();
+          res.writeHead(200, { "Content-Type": response.contentType });
+          res.end(response.content);
+          return;
+        } catch (err) {
+          if (err instanceof Error) {
+            _optionalChain([this, 'access', _41 => _41.log, 'optionalAccess', _42 => _42.error, 'call', _43 => _43(err)]);
+          } else {
+            _optionalChain([this, 'access', _44 => _44.log, 'optionalAccess', _45 => _45.error, 'call', _46 => _46("Error loading static file: %o", err)]);
           }
-        );
+          res.writeHead(500, { "Content-Type": "text/plain" });
+          res.end("Expected static file not found", "utf-8");
+          return;
+        }
       }
     }
     res.writeHead(404, { "Content-Type": "text/plain" });
     res.end("not found", "utf-8");
   }}
-  __init2() {this.sendStaticFile = (file, response, contentType) => {
-    fs.readFile(file, (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");
-          _optionalChain([this, 'access', _22 => _22.log, 'optionalAccess', _23 => _23.error, 'call', _24 => _24(`Error reading static file: %s`, error)]);
-        }
-      } else {
-        response.writeHead(200, { "Content-Type": contentType });
-        response.end(content, "utf-8");
-      }
-    });
+  __init8() {this.parsePathname = (url) => {
+    if (!url) return "";
+    try {
+      return new URL(url, "http://127.0.0.1").pathname;
+    } catch (e4) {
+      return url;
+    }
+  }}
+  __init9() {this.toRoutePath = (relativePath) => {
+    if (!relativePath) {
+      throw new Error("Static file path must be non-empty");
+    }
+    if (relativePath.startsWith("/")) {
+      throw new Error(
+        `Static file path "${relativePath}" must be relative and not start with "/"`
+      );
+    }
+    return `/${relativePath}`;
+  }}
+  __init10() {this.toSiteRelativeUrl = (relativePath) => {
+    const normalizedPath = relativePath.replace(/^\/+/, "");
+    return `${this.options.path}${normalizedPath}`;
+  }}
+  __init11() {this.createAssetUrls = (staticFiles) => {
+    const urls = {};
+    for (const routePath of Object.keys(staticFiles)) {
+      const relativePath = routePath.replace(/^\/+/, "");
+      urls[relativePath] = this.toSiteRelativeUrl(
+        relativePath
+      );
+    }
+    return urls;
   }}
-  __init3() {this.handleWsConnection = (ws) => {
+  __init12() {this.handleWsConnection = (ws) => {
     const connection = {
       sendMessage: (msg) => ws.send(JSON.stringify(msg))
     };
     this.onNewConnection(connection);
-    _optionalChain([this, 'access', _25 => _25.log, 'optionalAccess', _26 => _26.debug, 'call', _27 => _27("new connection")]);
+    _optionalChain([this, 'access', _47 => _47.log, 'optionalAccess', _48 => _48.debug, 'call', _49 => _49("new connection")]);
     ws.on(
       "message",
       (msg) => this.onMessage(connection, JSON.parse(msg.toString()))
@@ -181,22 +327,38 @@ var Server = (_class = class {
 var _ws = require('ws');
 var _http = require('http');
 var _uuid = require('uuid');
+var normalizeClockSyncOptions = (clockSync) => {
+  if (!clockSync) {
+    return null;
+  }
+  const { pingIntervalMs } = clockSync;
+  if (!Number.isFinite(pingIntervalMs) || pingIntervalMs <= 0) {
+    throw new Error(
+      `clockSync.pingIntervalMs must be a positive number, got: ${pingIntervalMs}`
+    );
+  }
+  return {
+    pingIntervalMs
+  };
+};
 var Toolkit = (_class2 = class {
   
+  
   /**
    * Mapping from components to unique IDs that identify them
    */
-  __init4() {this.componentIDMap = new (0, _chunkEABM5X65js.IDMap)()}
-  __init5() {this.connections = /* @__PURE__ */ new Map()}
-  __init6() {this.rootGroup = null}
+  __init13() {this.componentIDMap = new (0, _chunkEABM5X65js.IDMap)()}
+  __init14() {this.connections = /* @__PURE__ */ new Map()}
+  __init15() {this.rootGroup = null}
   /** @hidden */
-  __init7() {this.events = new (0, _chunkWN3GXVUEjs.EventEmitter)()}
+  __init16() {this.events = new (0, _chunkWN3GXVUEjs.EventEmitter)()}
   
-  constructor(options = {}) {;_class2.prototype.__init4.call(this);_class2.prototype.__init5.call(this);_class2.prototype.__init6.call(this);_class2.prototype.__init7.call(this);_class2.prototype.__init8.call(this);_class2.prototype.__init9.call(this);_class2.prototype.__init10.call(this);_class2.prototype.__init11.call(this);_class2.prototype.__init12.call(this);_class2.prototype.__init13.call(this);_class2.prototype.__init14.call(this);_class2.prototype.__init15.call(this);_class2.prototype.__init16.call(this);_class2.prototype.__init17.call(this);_class2.prototype.__init18.call(this);_class2.prototype.__init19.call(this);
+  constructor(options = {}) {;_class2.prototype.__init13.call(this);_class2.prototype.__init14.call(this);_class2.prototype.__init15.call(this);_class2.prototype.__init16.call(this);_class2.prototype.__init17.call(this);_class2.prototype.__init18.call(this);_class2.prototype.__init19.call(this);_class2.prototype.__init20.call(this);_class2.prototype.__init21.call(this);_class2.prototype.__init22.call(this);_class2.prototype.__init23.call(this);_class2.prototype.__init24.call(this);_class2.prototype.__init25.call(this);_class2.prototype.__init26.call(this);_class2.prototype.__init27.call(this);_class2.prototype.__init28.call(this);
     this.options = {
       ...DEFAULT_LIGHT_DESK_OPTIONS,
       ...options
     };
+    this.clockSync = normalizeClockSyncOptions(this.options.clockSync);
     if (!this.options.path.endsWith("/") || !this.options.path.startsWith("/")) {
       throw new Error(
         `path must start and end with "/", set to: ${this.options.path}`
@@ -210,14 +372,14 @@ var Toolkit = (_class2 = class {
       this.options.log
     );
   }
-  __init8() {this.addListener = this.events.addListener}
-  __init9() {this.removeListener = this.events.removeListener}
-  __init10() {this.start = (opts) => {
+  __init17() {this.addListener = this.events.addListener}
+  __init18() {this.removeListener = this.events.removeListener}
+  __init19() {this.start = (opts) => {
     if (opts.mode === "automatic") {
       this.listen({ port: opts.port }).then(() => {
         const url = `http://localhost:${opts.port}${this.options.path}`;
-        _optionalChain([opts, 'access', _49 => _49.onReady, 'optionalCall', _50 => _50(url)]);
-        _optionalChain([this, 'access', _51 => _51.options, 'access', _52 => _52.log, 'optionalAccess', _53 => _53.info, 'call', _54 => _54(`Light Desk Started: ${url}`)]);
+        _optionalChain([opts, 'access', _71 => _71.onReady, 'optionalCall', _72 => _72(url)]);
+        _optionalChain([this, 'access', _73 => _73.options, 'access', _74 => _74.log, 'optionalAccess', _75 => _75.info, 'call', _76 => _76(`Light Desk Started: ${url}`)]);
       });
     } else if (opts.mode === "express") {
       const wss = new (0, _ws.WebSocketServer)({
@@ -231,7 +393,7 @@ var Toolkit = (_class2 = class {
       throw new Error(`Unsupported mode`);
     }
   }}
-  __init11() {this.listen = ({
+  __init20() {this.listen = ({
     port,
     host
   }) => {
@@ -266,7 +428,7 @@ var Toolkit = (_class2 = class {
       }
     });
   }}
-  __init12() {this.setRoot = (group) => {
+  __init21() {this.setRoot = (group) => {
     if (this.rootGroup) {
       throw new Error("Can only set root group once");
     }
@@ -276,18 +438,22 @@ var Toolkit = (_class2 = class {
   log() {
     return _nullishCoalesce(this.options.log, () => ( null));
   }
-  __init13() {this.getConnections = () => {
+  __init22() {this.getConnections = () => {
     return [...this.connections.values()].map((c) => c.publicConnection);
   }}
-  __init14() {this.updateTree = _lodash2.default.throttle(
+  __init23() {this.updateTree = _lodash2.default.throttle(
     () => {
       setImmediate(() => {
         if (!this.rootGroup) return;
-        const root = this.rootGroup.getProtoInfo(this.componentIDMap);
         for (const [connection, meta] of this.connections.entries()) {
+          const root = this.rootGroup.getProtoInfo(this.componentIDMap, {
+            connection: meta.publicConnection
+          });
+          const diff = _diff.diffJson.call(void 0, meta.lastTreeSent, root);
+          if (diff.type === "match") continue;
           connection.sendMessage({
             type: "tree-diff",
-            diff: _diff.diffJson.call(void 0, meta.lastTreeSent, root)
+            diff
           });
           meta.lastTreeSent = root;
         }
@@ -296,25 +462,33 @@ var Toolkit = (_class2 = class {
     10,
     { leading: true, trailing: true }
   )}
-  __init15() {this.removeChild = (component) => {
+  __init24() {this.removeChild = (component) => {
     if (this.rootGroup === component) {
       this.rootGroup = null;
       component.setParent(null);
     }
   }}
-  __init16() {this.onNewConnection = (connection) => {
-    const lastTreeSent = _nullishCoalesce(_optionalChain([this, 'access', _55 => _55.rootGroup, 'optionalAccess', _56 => _56.getProtoInfo, 'call', _57 => _57(this.componentIDMap)]), () => ( void 0));
+  __init25() {this.onNewConnection = (connection) => {
     const uuid = _uuid.v4.call(void 0, );
     const publicConnection = {
       get uuid() {
         return uuid;
       }
     };
-    this.connections.set(connection, { publicConnection, lastTreeSent });
+    const lastTreeSent = _nullishCoalesce(_optionalChain([this, 'access', _77 => _77.rootGroup, 'optionalAccess', _78 => _78.getProtoInfo, 'call', _79 => _79(this.componentIDMap, {
+      connection: publicConnection
+    })]), () => ( void 0));
+    this.connections.set(connection, {
+      publicConnection,
+      lastTreeSent
+    });
     this.events.emit("new-connection", publicConnection);
     connection.sendMessage({
       type: "metadata",
-      connectionUuid: uuid
+      connectionUuid: uuid,
+      clockSync: this.clockSync ? {
+        pingIntervalMs: this.clockSync.pingIntervalMs
+      } : null
     });
     if (lastTreeSent) {
       connection.sendMessage({
@@ -323,15 +497,15 @@ var Toolkit = (_class2 = class {
       });
     }
   }}
-  __init17() {this.onClosedConnection = (connection) => {
-    _optionalChain([this, 'access', _58 => _58.log, 'call', _59 => _59(), 'optionalAccess', _60 => _60.debug, 'call', _61 => _61("removing connection")]);
+  __init26() {this.onClosedConnection = (connection) => {
+    _optionalChain([this, 'access', _80 => _80.log, 'call', _81 => _81(), 'optionalAccess', _82 => _82.debug, 'call', _83 => _83("removing connection")]);
     const con = this.connections.get(connection);
     this.connections.delete(connection);
     if (con) {
       this.events.emit("closed-connection", con.publicConnection);
     }
   }}
-  __init18() {this.handleCall = async (connection, publicConnection, call) => {
+  __init27() {this.handleCall = async (connection, publicConnection, call) => {
     try {
       const rg = this.rootGroup;
       if (rg) {
@@ -361,14 +535,14 @@ var Toolkit = (_class2 = class {
       });
     }
   }}
-  __init19() {this.onMessage = (connection, message) => {
+  __init28() {this.onMessage = (connection, message) => {
     const con = this.connections.get(connection);
     if (!con) {
-      _optionalChain([this, 'access', _62 => _62.log, 'call', _63 => _63(), 'optionalAccess', _64 => _64.warn, 'call', _65 => _65(`got message from unknown connection`)]);
+      _optionalChain([this, 'access', _84 => _84.log, 'call', _85 => _85(), 'optionalAccess', _86 => _86.warn, 'call', _87 => _87(`got message from unknown connection`)]);
       return;
     }
     const { publicConnection } = con;
-    _optionalChain([this, 'access', _66 => _66.log, 'call', _67 => _67(), 'optionalAccess', _68 => _68.debug, 'call', _69 => _69(
+    _optionalChain([this, 'access', _88 => _88.log, 'call', _89 => _89(), 'optionalAccess', _90 => _90.debug, 'call', _91 => _91(
       "got message: %o from %s",
       message,
       publicConnection.uuid
@@ -385,6 +559,14 @@ var Toolkit = (_class2 = class {
       case "component-call":
         this.handleCall(connection, publicConnection, message);
         break;
+      case "ping": {
+        connection.sendMessage({
+          type: "pong",
+          pingId: message.pingId,
+          serverTimeMillis: Date.now()
+        });
+        break;
+      }
     }
   }}
 }, _class2);
@@ -401,4 +583,4 @@ var Toolkit = (_class2 = class {
 
 
 
-exports.Button = _chunk4OCRZD4Fjs.Button; exports.Group = _chunk7JIC2XBCjs.Group; exports.GroupHeader = _chunk7JIC2XBCjs.GroupHeader; exports.Label = _chunk3GTEUTFTjs.Label; exports.Rect = _chunkQAH2OSHRjs.Rect; exports.SliderButton = _chunkNL3W4M7Jjs.SliderButton; exports.Switch = _chunk53EOA4UEjs.Switch; exports.Tab = _chunkU6FSQBQ3js.Tab; exports.Tabs = _chunkU6FSQBQ3js.Tabs; exports.TextInput = _chunkHTCWMJUAjs.TextInput; exports.Timeline = _chunk6QWYIJLMjs.Timeline; exports.Toolkit = Toolkit;
+exports.Button = _chunk4AGKM5NTjs.Button; exports.Group = _chunkXSKWLJOQjs.Group; exports.GroupHeader = _chunkXSKWLJOQjs.GroupHeader; exports.Label = _chunkTF7N4O5Gjs.Label; exports.Rect = _chunk5B65Q7RLjs.Rect; exports.SliderButton = _chunkCVY55KARjs.SliderButton; exports.Switch = _chunk2K4UT5QBjs.Switch; exports.Tab = _chunkA3RWE7HZjs.Tab; exports.Tabs = _chunkA3RWE7HZjs.Tabs; exports.TextInput = _chunkIV3AE3CWjs.TextInput; exports.Timeline = _chunkUHEZQR2Qjs.Timeline; exports.Toolkit = Toolkit;