@contember/react-devbar 1.3.0-alpha.14 → 1.3.0-alpha.16

package/dist/development/DevErrorManager.cjs

@@ -0,0 +1,98 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxDevRuntime = require("react/jsx-dev-runtime");
+const react = require("react");
+const useParsedStacktrace = require("./hooks/useParsedStacktrace.cjs");
+const DevErrorBadge = require("./ui/DevError/DevErrorBadge.cjs");
+const DevErrorList = require("./ui/DevError/DevErrorList.cjs");
+class ErrorBus {
+  constructor() {
+    __publicField(this, "queue", []);
+    __publicField(this, "listener", null);
+  }
+  async handleError(source, error) {
+    const boxedError = { error, source };
+    if (!this.listener) {
+      this.queue.push(boxedError);
+      this.queue.push(boxedError);
+      this.queue.push(boxedError);
+      this.queue.push(boxedError);
+    } else {
+      this.listener(boxedError);
+      this.listener(boxedError);
+      this.listener(boxedError);
+      this.listener(boxedError);
+    }
+  }
+  register(listener) {
+    this.listener = listener;
+    this.queue.forEach(listener);
+    this.queue = [];
+    return () => {
+      this.listener = null;
+    };
+  }
+}
+function DevErrorManager(props) {
+  const [errors, setErrors] = react.useState([]);
+  const [errIndex, setErrorIndex] = react.useState(0);
+  const [open, setOpen] = react.useState(false);
+  react.useEffect(
+    () => {
+      return props.bus.register((err) => {
+        setTimeout(
+          () => {
+            setErrors((errors2) => [err, ...errors2]);
+            setOpen(true);
+          },
+          0
+        );
+      });
+    },
+    [props.bus]
+  );
+  const currentError = errors[errIndex];
+  const processedError = useParsedStacktrace.useProcessedError(currentError?.error);
+  if (!currentError) {
+    return null;
+  }
+  const onPrevious = () => setErrorIndex((it) => Math.max(0, it - 1));
+  const onNext = () => setErrorIndex((it) => Math.min(errors.length - 1, it + 1));
+  const onClose = () => setOpen(false);
+  if (!open) {
+    return /* @__PURE__ */ jsxDevRuntime.jsxDEV(DevErrorBadge.DevErrorBadge, { errorCount: errors.length, onOpen: () => setOpen(true) }, void 0, false, {
+      fileName: "/__w/interface/interface/packages/react-devbar/src/DevErrorManager.tsx",
+      lineNumber: 69,
+      columnNumber: 10
+    }, this);
+  }
+  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(
+    DevErrorList.DevErrorList,
+    {
+      currentError: processedError,
+      currentErrorSource: currentError.source,
+      currentErrorIndex: errIndex,
+      errorCount: errors.length,
+      onPrevious,
+      onNext,
+      onClose
+    },
+    void 0,
+    false,
+    {
+      fileName: "/__w/interface/interface/packages/react-devbar/src/DevErrorManager.tsx",
+      lineNumber: 72,
+      columnNumber: 3
+    },
+    this
+  );
+}
+exports.DevErrorManager = DevErrorManager;
+exports.ErrorBus = ErrorBus;
+//# sourceMappingURL=DevErrorManager.cjs.map

package/dist/development/DevErrorManager.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevErrorManager.cjs","sources":["../../src/DevErrorManager.tsx"],"sourcesContent":["import { DevErrorBadge, DevErrorList, ErrorType } from './ui/DevError'\nimport { useEffect, useState } from 'react'\nimport { useProcessedError } from './hooks/useParsedStacktrace'\n\nexport class ErrorBus {\n\tprivate queue: { error: ErrorType, source: string }[] = []\n\tprivate listener: null | ((error: { error: ErrorType, source: string }) => void) = null\n\n\tasync handleError(source: string, error: ErrorType) {\n\t\tconst boxedError = { error, source }\n\n\t\tif (!this.listener) {\n\t\t\tthis.queue.push(boxedError)\n\t\t\tthis.queue.push(boxedError)\n\t\t\tthis.queue.push(boxedError)\n\t\t\tthis.queue.push(boxedError)\n\n\t\t} else {\n\t\t\tthis.listener(boxedError)\n\t\t\tthis.listener(boxedError)\n\t\t\tthis.listener(boxedError)\n\t\t\tthis.listener(boxedError)\n\t\t}\n\t}\n\n\tregister(listener: (error: { error: ErrorType, source: string }) => void): () => void {\n\t\tthis.listener = listener\n\t\tthis.queue.forEach(listener)\n\t\tthis.queue = []\n\t\treturn () => {\n\t\t\tthis.listener = null\n\t\t}\n\t}\n}\n\nexport interface DevErrorManagerProps {\n\tbus: ErrorBus\n}\n\nexport function DevErrorManager(props: DevErrorManagerProps) {\n\tconst [errors, setErrors] = useState<{ error: ErrorType, source: string }[]>([])\n\tconst [errIndex, setErrorIndex] = useState(0)\n\tconst [open, setOpen] = useState(false)\n\n\tuseEffect(\n\t\t() => {\n\t\t\treturn props.bus.register(err => {\n\t\t\t\tsetTimeout(\n\t\t\t\t\t() => {\n\t\t\t\t\t\tsetErrors(errors => [err, ...errors])\n\t\t\t\t\t\tsetOpen(true)\n\t\t\t\t\t},\n\t\t\t\t\t0,\n\t\t\t\t)\n\t\t\t})\n\t\t},\n\t\t[props.bus],\n\t)\n\n\tconst currentError = errors[errIndex]\n\tconst processedError = useProcessedError(currentError?.error)\n\tif (!currentError) {\n\t\treturn null\n\t}\n\tconst onPrevious = () => setErrorIndex(it => Math.max(0, it - 1))\n\tconst onNext = () => setErrorIndex(it => Math.min(errors.length - 1, it + 1))\n\tconst onClose = () => setOpen(false)\n\tif (!open) {\n\t\treturn <DevErrorBadge errorCount={errors.length} onOpen={() => setOpen(true)} />\n\t}\n\treturn (\n\t\t<DevErrorList\n\t\t\tcurrentError={processedError}\n\t\t\tcurrentErrorSource={currentError.source}\n\t\t\tcurrentErrorIndex={errIndex}\n\t\t\terrorCount={errors.length}\n\t\t\tonPrevious={onPrevious}\n\t\t\tonNext={onNext}\n\t\t\tonClose={onClose}\n\t\t/>\n\t)\n}\n"],"names":["useState","useEffect","errors","useProcessedError","jsxDEV","DevErrorBadge","DevErrorList"],"mappings":";;;;;;;;;;;;;AAIO,MAAM,SAAS;AAAA,EAAf;AACE,iCAAgD,CAAA;AAChD,oCAA2E;AAAA;AAAA,EAEnF,MAAM,YAAY,QAAgB,OAAkB;AAC7C,UAAA,aAAa,EAAE,OAAO;AAExB,QAAA,CAAC,KAAK,UAAU;AACd,WAAA,MAAM,KAAK,UAAU;AACrB,WAAA,MAAM,KAAK,UAAU;AACrB,WAAA,MAAM,KAAK,UAAU;AACrB,WAAA,MAAM,KAAK,UAAU;AAAA,IAAA,OAEpB;AACN,WAAK,SAAS,UAAU;AACxB,WAAK,SAAS,UAAU;AACxB,WAAK,SAAS,UAAU;AACxB,WAAK,SAAS,UAAU;AAAA,IACzB;AAAA,EACD;AAAA,EAEA,SAAS,UAA6E;AACrF,SAAK,WAAW;AACX,SAAA,MAAM,QAAQ,QAAQ;AAC3B,SAAK,QAAQ;AACb,WAAO,MAAM;AACZ,WAAK,WAAW;AAAA,IAAA;AAAA,EAElB;AACD;AAMO,SAAS,gBAAgB,OAA6B;AAC5D,QAAM,CAAC,QAAQ,SAAS,IAAIA,MAAA,SAAiD,CAAE,CAAA;AAC/E,QAAM,CAAC,UAAU,aAAa,IAAIA,eAAS,CAAC;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAIA,eAAS,KAAK;AAEtCC,QAAA;AAAA,IACC,MAAM;AACE,aAAA,MAAM,IAAI,SAAS,CAAO,QAAA;AAChC;AAAA,UACC,MAAM;AACL,sBAAU,CAAAC,YAAU,CAAC,KAAK,GAAGA,OAAM,CAAC;AACpC,oBAAQ,IAAI;AAAA,UACb;AAAA,UACA;AAAA,QAAA;AAAA,MACD,CACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,GAAG;AAAA,EAAA;AAGL,QAAA,eAAe,OAAO,QAAQ;AAC9B,QAAA,iBAAiBC,oBAAAA,kBAAkB,cAAc,KAAK;AAC5D,MAAI,CAAC,cAAc;AACX,WAAA;AAAA,EACR;AACM,QAAA,aAAa,MAAM,cAAc,CAAA,OAAM,KAAK,IAAI,GAAG,KAAK,CAAC,CAAC;AAC1D,QAAA,SAAS,MAAM,cAAc,CAAM,OAAA,KAAK,IAAI,OAAO,SAAS,GAAG,KAAK,CAAC,CAAC;AACtE,QAAA,UAAU,MAAM,QAAQ,KAAK;AACnC,MAAI,CAAC,MAAM;AACH,WAAAC,8BAAA,OAACC,+BAAc,YAAY,OAAO,QAAQ,QAAQ,MAAM,QAAQ,IAAI,EAApE,GAAA,QAAA,OAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAuE,GAAA,IAAA;AAAA,EAC/E;AAEC,SAAAD,8BAAA;AAAA,IAACE,aAAA;AAAA,IAAA;AAAA,MACA,cAAc;AAAA,MACd,oBAAoB,aAAa;AAAA,MACjC,mBAAmB;AAAA,MACnB,YAAY,OAAO;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAPD;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAA;AAAA,EAAA;AAUF;;;"}

package/dist/development/DevErrorManager.js

@@ -0,0 +1,98 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { jsxDEV } from "react/jsx-dev-runtime";
+import { useState, useEffect } from "react";
+import { useProcessedError } from "./hooks/useParsedStacktrace.js";
+import { DevErrorBadge } from "./ui/DevError/DevErrorBadge.js";
+import { DevErrorList } from "./ui/DevError/DevErrorList.js";
+class ErrorBus {
+  constructor() {
+    __publicField(this, "queue", []);
+    __publicField(this, "listener", null);
+  }
+  async handleError(source, error) {
+    const boxedError = { error, source };
+    if (!this.listener) {
+      this.queue.push(boxedError);
+      this.queue.push(boxedError);
+      this.queue.push(boxedError);
+      this.queue.push(boxedError);
+    } else {
+      this.listener(boxedError);
+      this.listener(boxedError);
+      this.listener(boxedError);
+      this.listener(boxedError);
+    }
+  }
+  register(listener) {
+    this.listener = listener;
+    this.queue.forEach(listener);
+    this.queue = [];
+    return () => {
+      this.listener = null;
+    };
+  }
+}
+function DevErrorManager(props) {
+  const [errors, setErrors] = useState([]);
+  const [errIndex, setErrorIndex] = useState(0);
+  const [open, setOpen] = useState(false);
+  useEffect(
+    () => {
+      return props.bus.register((err) => {
+        setTimeout(
+          () => {
+            setErrors((errors2) => [err, ...errors2]);
+            setOpen(true);
+          },
+          0
+        );
+      });
+    },
+    [props.bus]
+  );
+  const currentError = errors[errIndex];
+  const processedError = useProcessedError(currentError?.error);
+  if (!currentError) {
+    return null;
+  }
+  const onPrevious = () => setErrorIndex((it) => Math.max(0, it - 1));
+  const onNext = () => setErrorIndex((it) => Math.min(errors.length - 1, it + 1));
+  const onClose = () => setOpen(false);
+  if (!open) {
+    return /* @__PURE__ */ jsxDEV(DevErrorBadge, { errorCount: errors.length, onOpen: () => setOpen(true) }, void 0, false, {
+      fileName: "/__w/interface/interface/packages/react-devbar/src/DevErrorManager.tsx",
+      lineNumber: 69,
+      columnNumber: 10
+    }, this);
+  }
+  return /* @__PURE__ */ jsxDEV(
+    DevErrorList,
+    {
+      currentError: processedError,
+      currentErrorSource: currentError.source,
+      currentErrorIndex: errIndex,
+      errorCount: errors.length,
+      onPrevious,
+      onNext,
+      onClose
+    },
+    void 0,
+    false,
+    {
+      fileName: "/__w/interface/interface/packages/react-devbar/src/DevErrorManager.tsx",
+      lineNumber: 72,
+      columnNumber: 3
+    },
+    this
+  );
+}
+export {
+  DevErrorManager,
+  ErrorBus
+};
+//# sourceMappingURL=DevErrorManager.js.map

package/dist/development/DevErrorManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevErrorManager.js","sources":["../../src/DevErrorManager.tsx"],"sourcesContent":["import { DevErrorBadge, DevErrorList, ErrorType } from './ui/DevError'\nimport { useEffect, useState } from 'react'\nimport { useProcessedError } from './hooks/useParsedStacktrace'\n\nexport class ErrorBus {\n\tprivate queue: { error: ErrorType, source: string }[] = []\n\tprivate listener: null | ((error: { error: ErrorType, source: string }) => void) = null\n\n\tasync handleError(source: string, error: ErrorType) {\n\t\tconst boxedError = { error, source }\n\n\t\tif (!this.listener) {\n\t\t\tthis.queue.push(boxedError)\n\t\t\tthis.queue.push(boxedError)\n\t\t\tthis.queue.push(boxedError)\n\t\t\tthis.queue.push(boxedError)\n\n\t\t} else {\n\t\t\tthis.listener(boxedError)\n\t\t\tthis.listener(boxedError)\n\t\t\tthis.listener(boxedError)\n\t\t\tthis.listener(boxedError)\n\t\t}\n\t}\n\n\tregister(listener: (error: { error: ErrorType, source: string }) => void): () => void {\n\t\tthis.listener = listener\n\t\tthis.queue.forEach(listener)\n\t\tthis.queue = []\n\t\treturn () => {\n\t\t\tthis.listener = null\n\t\t}\n\t}\n}\n\nexport interface DevErrorManagerProps {\n\tbus: ErrorBus\n}\n\nexport function DevErrorManager(props: DevErrorManagerProps) {\n\tconst [errors, setErrors] = useState<{ error: ErrorType, source: string }[]>([])\n\tconst [errIndex, setErrorIndex] = useState(0)\n\tconst [open, setOpen] = useState(false)\n\n\tuseEffect(\n\t\t() => {\n\t\t\treturn props.bus.register(err => {\n\t\t\t\tsetTimeout(\n\t\t\t\t\t() => {\n\t\t\t\t\t\tsetErrors(errors => [err, ...errors])\n\t\t\t\t\t\tsetOpen(true)\n\t\t\t\t\t},\n\t\t\t\t\t0,\n\t\t\t\t)\n\t\t\t})\n\t\t},\n\t\t[props.bus],\n\t)\n\n\tconst currentError = errors[errIndex]\n\tconst processedError = useProcessedError(currentError?.error)\n\tif (!currentError) {\n\t\treturn null\n\t}\n\tconst onPrevious = () => setErrorIndex(it => Math.max(0, it - 1))\n\tconst onNext = () => setErrorIndex(it => Math.min(errors.length - 1, it + 1))\n\tconst onClose = () => setOpen(false)\n\tif (!open) {\n\t\treturn <DevErrorBadge errorCount={errors.length} onOpen={() => setOpen(true)} />\n\t}\n\treturn (\n\t\t<DevErrorList\n\t\t\tcurrentError={processedError}\n\t\t\tcurrentErrorSource={currentError.source}\n\t\t\tcurrentErrorIndex={errIndex}\n\t\t\terrorCount={errors.length}\n\t\t\tonPrevious={onPrevious}\n\t\t\tonNext={onNext}\n\t\t\tonClose={onClose}\n\t\t/>\n\t)\n}\n"],"names":["errors"],"mappings":";;;;;;;;;;;AAIO,MAAM,SAAS;AAAA,EAAf;AACE,iCAAgD,CAAA;AAChD,oCAA2E;AAAA;AAAA,EAEnF,MAAM,YAAY,QAAgB,OAAkB;AAC7C,UAAA,aAAa,EAAE,OAAO;AAExB,QAAA,CAAC,KAAK,UAAU;AACd,WAAA,MAAM,KAAK,UAAU;AACrB,WAAA,MAAM,KAAK,UAAU;AACrB,WAAA,MAAM,KAAK,UAAU;AACrB,WAAA,MAAM,KAAK,UAAU;AAAA,IAAA,OAEpB;AACN,WAAK,SAAS,UAAU;AACxB,WAAK,SAAS,UAAU;AACxB,WAAK,SAAS,UAAU;AACxB,WAAK,SAAS,UAAU;AAAA,IACzB;AAAA,EACD;AAAA,EAEA,SAAS,UAA6E;AACrF,SAAK,WAAW;AACX,SAAA,MAAM,QAAQ,QAAQ;AAC3B,SAAK,QAAQ;AACb,WAAO,MAAM;AACZ,WAAK,WAAW;AAAA,IAAA;AAAA,EAElB;AACD;AAMO,SAAS,gBAAgB,OAA6B;AAC5D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiD,CAAE,CAAA;AAC/E,QAAM,CAAC,UAAU,aAAa,IAAI,SAAS,CAAC;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC;AAAA,IACC,MAAM;AACE,aAAA,MAAM,IAAI,SAAS,CAAO,QAAA;AAChC;AAAA,UACC,MAAM;AACL,sBAAU,CAAAA,YAAU,CAAC,KAAK,GAAGA,OAAM,CAAC;AACpC,oBAAQ,IAAI;AAAA,UACb;AAAA,UACA;AAAA,QAAA;AAAA,MACD,CACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,GAAG;AAAA,EAAA;AAGL,QAAA,eAAe,OAAO,QAAQ;AAC9B,QAAA,iBAAiB,kBAAkB,cAAc,KAAK;AAC5D,MAAI,CAAC,cAAc;AACX,WAAA;AAAA,EACR;AACM,QAAA,aAAa,MAAM,cAAc,CAAA,OAAM,KAAK,IAAI,GAAG,KAAK,CAAC,CAAC;AAC1D,QAAA,SAAS,MAAM,cAAc,CAAM,OAAA,KAAK,IAAI,OAAO,SAAS,GAAG,KAAK,CAAC,CAAC;AACtE,QAAA,UAAU,MAAM,QAAQ,KAAK;AACnC,MAAI,CAAC,MAAM;AACH,WAAA,uBAAC,iBAAc,YAAY,OAAO,QAAQ,QAAQ,MAAM,QAAQ,IAAI,EAApE,GAAA,QAAA,OAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAuE,GAAA,IAAA;AAAA,EAC/E;AAEC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,cAAc;AAAA,MACd,oBAAoB,aAAa;AAAA,MACjC,mBAAmB;AAAA,MACnB,YAAY,OAAO;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAPD;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAA;AAAA,EAAA;AAUF;"}

package/dist/development/errorHandling.cjs

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
+const jsxDevRuntime = require("react/jsx-dev-runtime");
 const ReactDOM = require("react-dom");
+const buffer = require("buffer");
+const DevErrorManager = require("./DevErrorManager.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -31,27 +33,42 @@ const getErrorContainer = () => {
   }
   return errorContainer;
 };
-const prodErrorHandler = (renderer) => {
-  const renderError = () => {
-    renderer(getErrorContainer(), /* @__PURE__ */ jsxRuntime.jsx("h1", { children: "Fatal error" }), () => {
-    });
+const devErrorHandler = (renderer) => {
+  const errorBus = new DevErrorManager.ErrorBus();
+  window.Buffer = buffer.Buffer;
+  window.addEventListener("error", (e) => {
+    if (e.message.startsWith("ResizeObserver")) {
+      return;
+    }
+    errorBus.handleError("Unhandled error", e.error);
+  });
+  window.addEventListener("unhandledrejection", (e) => errorBus.handleError("Unhandled promise rejection", e.reason));
+  const origOnError = console.error;
+  console.error = (...args) => {
+    origOnError(...args);
+    for (const arg of args) {
+      if (arg instanceof Error) {
+        errorBus.handleError("Logged error", arg);
+      }
+    }
   };
-  window.addEventListener("error", renderError);
-  window.addEventListener("unhandledrejection", renderError);
+  renderer(getErrorContainer(), /* @__PURE__ */ jsxDevRuntime.jsxDEV(DevErrorManager.DevErrorManager, { bus: errorBus }, void 0, false, {
+    fileName: "/__w/interface/interface/packages/react-devbar/src/errorHandling.tsx",
+    lineNumber: 48,
+    columnNumber: 32
+  }, void 0), () => {
+  });
   return async (cb) => {
     try {
-      await cb((e) => {
-        console.warn(e);
-      });
+      await cb((e) => errorBus.handleError("Recoverable React error", e));
     } catch (e) {
-      console.error(e);
-      renderError();
+      errorBus.handleError("Entrypoint crash", e);
     }
   };
 };
 const createErrorHandler = (renderer) => {
   {
-    return prodErrorHandler(renderer);
+    return devErrorHandler(renderer);
   }
 };
 exports.createErrorHandler = createErrorHandler;

package/dist/development/errorHandling.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"errorHandling.cjs","sources":["../../src/errorHandling.tsx"],"sourcesContent":["import * as ReactDOM from 'react-dom'\nimport { Buffer } from 'buffer'\nimport { DevErrorManager, ErrorBus } from './DevErrorManager'\nimport { ReactElement } from 'react'\n\nexport type ErrorReactRenderer = (domElement: Element, reactElement: ReactElement, onRecoverableError: (e: any) => void) => void\n\nconst getErrorContainer = () => {\n\tconst errorElementId = '__contember__dev__error__container__element'\n\tlet errorContainer = document.getElementById(errorElementId)\n\n\tif (errorContainer) {\n\t\t// eslint-disable-next-line react/no-deprecated\n\t\tReactDOM.unmountComponentAtNode(errorContainer)\n\n\t} else {\n\t\terrorContainer = document.createElement('div')\n\t\terrorContainer.id = errorElementId\n\t\tdocument.body.appendChild(errorContainer)\n\t}\n\n\treturn errorContainer\n}\n\nconst devErrorHandler = (renderer: ErrorReactRenderer): TryRun => {\n\tconst errorBus = new ErrorBus()\n\n\t;(window as any).Buffer = Buffer\n\twindow.addEventListener('error', e => {\n\t\tif (e.message.startsWith('ResizeObserver')) {\n\t\t\t// Apparently, this can be ignored: https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded\n\t\t\treturn\n\t\t}\n\t\terrorBus.handleError('Unhandled error', e.error)\n\t})\n\n\twindow.addEventListener('unhandledrejection', e => errorBus.handleError('Unhandled promise rejection', e.reason))\n\n\tconst origOnError = console.error\n\tconsole.error = (...args) => {\n\t\torigOnError(...args)\n\t\tfor (const arg of args) {\n\t\t\tif (arg instanceof Error) {\n\t\t\t\terrorBus.handleError('Logged error', arg)\n\t\t\t}\n\t\t}\n\t}\n\trenderer(getErrorContainer(), <DevErrorManager bus={errorBus} />, () => {})\n\n\treturn async cb => {\n\t\ttry {\n\t\t\tawait cb(e => errorBus.handleError('Recoverable React error', e))\n\t\t} catch (e) {\n\t\t\terrorBus.handleError('Entrypoint crash', e)\n\t\t}\n\t}\n}\n\ntype TryRun = <T>(cb: (onRecoverableError: (e: any) => void) => T | Promise<T>) => void\nconst prodErrorHandler = (renderer: ErrorReactRenderer): TryRun => {\n\tconst renderError = () => {\n\t\trenderer(getErrorContainer(), <h1>Fatal error</h1>, () => {})\n\t}\n\n\twindow.addEventListener('error', renderError)\n\twindow.addEventListener('unhandledrejection', renderError)\n\n\treturn async cb => {\n\t\ttry {\n\t\t\tawait cb(e => {\n\t\t\t\tconsole.warn(e)\n\t\t\t})\n\t\t} catch (e) {\n\t\t\tconsole.error(e)\n\t\t\trenderError()\n\t\t}\n\t}\n}\n\n\nexport const createErrorHandler = (renderer: ErrorReactRenderer) => {\n\tif (import.meta.env.DEV) {\n\t\treturn devErrorHandler(renderer)\n\t} else {\n\t\treturn prodErrorHandler(renderer)\n\t}\n}\n"],"names":["ReactDOM","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,oBAAoB,MAAM;AAC/B,QAAM,iBAAiB;AACnB,MAAA,iBAAiB,SAAS,eAAe,cAAc;AAE3D,MAAI,gBAAgB;AAEnBA,wBAAS,uBAAuB,cAAc;AAAA,EAAA,OAExC;AACW,qBAAA,SAAS,cAAc,KAAK;AAC7C,mBAAe,KAAK;AACX,aAAA,KAAK,YAAY,cAAc;AAAA,EACzC;AAEO,SAAA;AACR;AAqCA,MAAM,mBAAmB,CAAC,aAAyC;AAClE,QAAM,cAAc,MAAM;AAChB,aAAA,qBAAsBC,+BAAA,MAAG,EAAA,UAAA,cAAW,CAAA,GAAO,MAAM;AAAA,IAAA,CAAE;AAAA,EAAA;AAGtD,SAAA,iBAAiB,SAAS,WAAW;AACrC,SAAA,iBAAiB,sBAAsB,WAAW;AAEzD,SAAO,OAAM,OAAM;AACd,QAAA;AACG,YAAA,GAAG,CAAK,MAAA;AACb,gBAAQ,KAAK,CAAC;AAAA,MAAA,CACd;AAAA,aACO,GAAG;AACX,cAAQ,MAAM,CAAC;AACH;IACb;AAAA,EAAA;AAEF;AAGa,MAAA,qBAAqB,CAAC,aAAiC;AAG5D;AACN,WAAO,iBAAiB,QAAQ;AAAA,EACjC;AACD;;"}
+{"version":3,"file":"errorHandling.cjs","sources":["../../src/errorHandling.tsx"],"sourcesContent":["import * as ReactDOM from 'react-dom'\nimport { Buffer } from 'buffer'\nimport { DevErrorManager, ErrorBus } from './DevErrorManager'\nimport { ReactElement } from 'react'\n\nexport type ErrorReactRenderer = (domElement: Element, reactElement: ReactElement, onRecoverableError: (e: any) => void) => void\n\nconst getErrorContainer = () => {\n\tconst errorElementId = '__contember__dev__error__container__element'\n\tlet errorContainer = document.getElementById(errorElementId)\n\n\tif (errorContainer) {\n\t\t// eslint-disable-next-line react/no-deprecated\n\t\tReactDOM.unmountComponentAtNode(errorContainer)\n\n\t} else {\n\t\terrorContainer = document.createElement('div')\n\t\terrorContainer.id = errorElementId\n\t\tdocument.body.appendChild(errorContainer)\n\t}\n\n\treturn errorContainer\n}\n\nconst devErrorHandler = (renderer: ErrorReactRenderer): TryRun => {\n\tconst errorBus = new ErrorBus()\n\n\t;(window as any).Buffer = Buffer\n\twindow.addEventListener('error', e => {\n\t\tif (e.message.startsWith('ResizeObserver')) {\n\t\t\t// Apparently, this can be ignored: https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded\n\t\t\treturn\n\t\t}\n\t\terrorBus.handleError('Unhandled error', e.error)\n\t})\n\n\twindow.addEventListener('unhandledrejection', e => errorBus.handleError('Unhandled promise rejection', e.reason))\n\n\tconst origOnError = console.error\n\tconsole.error = (...args) => {\n\t\torigOnError(...args)\n\t\tfor (const arg of args) {\n\t\t\tif (arg instanceof Error) {\n\t\t\t\terrorBus.handleError('Logged error', arg)\n\t\t\t}\n\t\t}\n\t}\n\trenderer(getErrorContainer(), <DevErrorManager bus={errorBus} />, () => {})\n\n\treturn async cb => {\n\t\ttry {\n\t\t\tawait cb(e => errorBus.handleError('Recoverable React error', e))\n\t\t} catch (e) {\n\t\t\terrorBus.handleError('Entrypoint crash', e)\n\t\t}\n\t}\n}\n\ntype TryRun = <T>(cb: (onRecoverableError: (e: any) => void) => T | Promise<T>) => void\nconst prodErrorHandler = (renderer: ErrorReactRenderer): TryRun => {\n\tconst renderError = () => {\n\t\trenderer(getErrorContainer(), <h1>Fatal error</h1>, () => {})\n\t}\n\n\twindow.addEventListener('error', renderError)\n\twindow.addEventListener('unhandledrejection', renderError)\n\n\treturn async cb => {\n\t\ttry {\n\t\t\tawait cb(e => {\n\t\t\t\tconsole.warn(e)\n\t\t\t})\n\t\t} catch (e) {\n\t\t\tconsole.error(e)\n\t\t\trenderError()\n\t\t}\n\t}\n}\n\n\nexport const createErrorHandler = (renderer: ErrorReactRenderer) => {\n\tif (import.meta.env.DEV) {\n\t\treturn devErrorHandler(renderer)\n\t} else {\n\t\treturn prodErrorHandler(renderer)\n\t}\n}\n"],"names":["ReactDOM","ErrorBus","Buffer","jsxDEV","DevErrorManager"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,oBAAoB,MAAM;AAC/B,QAAM,iBAAiB;AACnB,MAAA,iBAAiB,SAAS,eAAe,cAAc;AAE3D,MAAI,gBAAgB;AAEnBA,wBAAS,uBAAuB,cAAc;AAAA,EAAA,OAExC;AACW,qBAAA,SAAS,cAAc,KAAK;AAC7C,mBAAe,KAAK;AACX,aAAA,KAAK,YAAY,cAAc;AAAA,EACzC;AAEO,SAAA;AACR;AAEA,MAAM,kBAAkB,CAAC,aAAyC;AAC3D,QAAA,WAAW,IAAIC,gBAAAA;AAEnB,SAAe,SAASC;AACnB,SAAA,iBAAiB,SAAS,CAAK,MAAA;AACrC,QAAI,EAAE,QAAQ,WAAW,gBAAgB,GAAG;AAE3C;AAAA,IACD;AACS,aAAA,YAAY,mBAAmB,EAAE,KAAK;AAAA,EAAA,CAC/C;AAEM,SAAA,iBAAiB,sBAAsB,CAAK,MAAA,SAAS,YAAY,+BAA+B,EAAE,MAAM,CAAC;AAEhH,QAAM,cAAc,QAAQ;AACpB,UAAA,QAAQ,IAAI,SAAS;AAC5B,gBAAY,GAAG,IAAI;AACnB,eAAW,OAAO,MAAM;AACvB,UAAI,eAAe,OAAO;AAChB,iBAAA,YAAY,gBAAgB,GAAG;AAAA,MACzC;AAAA,IACD;AAAA,EAAA;AAEQ,WAAA,qBAAsBC,8BAAAA,OAAAC,gBAAA,iBAAA,EAAgB,KAAK,SAAtB,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAA,MAAgC,GAAI,MAAM;AAAA,EAAA,CAAE;AAE1E,SAAO,OAAM,OAAM;AACd,QAAA;AACH,YAAM,GAAG,CAAK,MAAA,SAAS,YAAY,2BAA2B,CAAC,CAAC;AAAA,aACxD,GAAG;AACF,eAAA,YAAY,oBAAoB,CAAC;AAAA,IAC3C;AAAA,EAAA;AAEF;AAwBa,MAAA,qBAAqB,CAAC,aAAiC;AAC1C;AACxB,WAAO,gBAAgB,QAAQ;AAAA,EAGhC;AACD;;"}

package/dist/development/errorHandling.js

@@ -1,5 +1,7 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxDEV } from "react/jsx-dev-runtime";
 import * as ReactDOM from "react-dom";
+import { Buffer } from "buffer";
+import { DevErrorManager, ErrorBus } from "./DevErrorManager.js";
 const getErrorContainer = () => {
   const errorElementId = "__contember__dev__error__container__element";
   let errorContainer = document.getElementById(errorElementId);
@@ -12,27 +14,42 @@ const getErrorContainer = () => {
   }
   return errorContainer;
 };
-const prodErrorHandler = (renderer) => {
-  const renderError = () => {
-    renderer(getErrorContainer(), /* @__PURE__ */ jsx("h1", { children: "Fatal error" }), () => {
-    });
+const devErrorHandler = (renderer) => {
+  const errorBus = new ErrorBus();
+  window.Buffer = Buffer;
+  window.addEventListener("error", (e) => {
+    if (e.message.startsWith("ResizeObserver")) {
+      return;
+    }
+    errorBus.handleError("Unhandled error", e.error);
+  });
+  window.addEventListener("unhandledrejection", (e) => errorBus.handleError("Unhandled promise rejection", e.reason));
+  const origOnError = console.error;
+  console.error = (...args) => {
+    origOnError(...args);
+    for (const arg of args) {
+      if (arg instanceof Error) {
+        errorBus.handleError("Logged error", arg);
+      }
+    }
   };
-  window.addEventListener("error", renderError);
-  window.addEventListener("unhandledrejection", renderError);
+  renderer(getErrorContainer(), /* @__PURE__ */ jsxDEV(DevErrorManager, { bus: errorBus }, void 0, false, {
+    fileName: "/__w/interface/interface/packages/react-devbar/src/errorHandling.tsx",
+    lineNumber: 48,
+    columnNumber: 32
+  }, void 0), () => {
+  });
   return async (cb) => {
     try {
-      await cb((e) => {
-        console.warn(e);
-      });
+      await cb((e) => errorBus.handleError("Recoverable React error", e));
     } catch (e) {
-      console.error(e);
-      renderError();
+      errorBus.handleError("Entrypoint crash", e);
     }
   };
 };
 const createErrorHandler = (renderer) => {
   {
-    return prodErrorHandler(renderer);
+    return devErrorHandler(renderer);
   }
 };
 export {

package/dist/development/errorHandling.js.map

@@ -1 +1 @@
-{"version":3,"file":"errorHandling.js","sources":["../../src/errorHandling.tsx"],"sourcesContent":["import * as ReactDOM from 'react-dom'\nimport { Buffer } from 'buffer'\nimport { DevErrorManager, ErrorBus } from './DevErrorManager'\nimport { ReactElement } from 'react'\n\nexport type ErrorReactRenderer = (domElement: Element, reactElement: ReactElement, onRecoverableError: (e: any) => void) => void\n\nconst getErrorContainer = () => {\n\tconst errorElementId = '__contember__dev__error__container__element'\n\tlet errorContainer = document.getElementById(errorElementId)\n\n\tif (errorContainer) {\n\t\t// eslint-disable-next-line react/no-deprecated\n\t\tReactDOM.unmountComponentAtNode(errorContainer)\n\n\t} else {\n\t\terrorContainer = document.createElement('div')\n\t\terrorContainer.id = errorElementId\n\t\tdocument.body.appendChild(errorContainer)\n\t}\n\n\treturn errorContainer\n}\n\nconst devErrorHandler = (renderer: ErrorReactRenderer): TryRun => {\n\tconst errorBus = new ErrorBus()\n\n\t;(window as any).Buffer = Buffer\n\twindow.addEventListener('error', e => {\n\t\tif (e.message.startsWith('ResizeObserver')) {\n\t\t\t// Apparently, this can be ignored: https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded\n\t\t\treturn\n\t\t}\n\t\terrorBus.handleError('Unhandled error', e.error)\n\t})\n\n\twindow.addEventListener('unhandledrejection', e => errorBus.handleError('Unhandled promise rejection', e.reason))\n\n\tconst origOnError = console.error\n\tconsole.error = (...args) => {\n\t\torigOnError(...args)\n\t\tfor (const arg of args) {\n\t\t\tif (arg instanceof Error) {\n\t\t\t\terrorBus.handleError('Logged error', arg)\n\t\t\t}\n\t\t}\n\t}\n\trenderer(getErrorContainer(), <DevErrorManager bus={errorBus} />, () => {})\n\n\treturn async cb => {\n\t\ttry {\n\t\t\tawait cb(e => errorBus.handleError('Recoverable React error', e))\n\t\t} catch (e) {\n\t\t\terrorBus.handleError('Entrypoint crash', e)\n\t\t}\n\t}\n}\n\ntype TryRun = <T>(cb: (onRecoverableError: (e: any) => void) => T | Promise<T>) => void\nconst prodErrorHandler = (renderer: ErrorReactRenderer): TryRun => {\n\tconst renderError = () => {\n\t\trenderer(getErrorContainer(), <h1>Fatal error</h1>, () => {})\n\t}\n\n\twindow.addEventListener('error', renderError)\n\twindow.addEventListener('unhandledrejection', renderError)\n\n\treturn async cb => {\n\t\ttry {\n\t\t\tawait cb(e => {\n\t\t\t\tconsole.warn(e)\n\t\t\t})\n\t\t} catch (e) {\n\t\t\tconsole.error(e)\n\t\t\trenderError()\n\t\t}\n\t}\n}\n\n\nexport const createErrorHandler = (renderer: ErrorReactRenderer) => {\n\tif (import.meta.env.DEV) {\n\t\treturn devErrorHandler(renderer)\n\t} else {\n\t\treturn prodErrorHandler(renderer)\n\t}\n}\n"],"names":[],"mappings":";;AAOA,MAAM,oBAAoB,MAAM;AAC/B,QAAM,iBAAiB;AACnB,MAAA,iBAAiB,SAAS,eAAe,cAAc;AAE3D,MAAI,gBAAgB;AAEnB,aAAS,uBAAuB,cAAc;AAAA,EAAA,OAExC;AACW,qBAAA,SAAS,cAAc,KAAK;AAC7C,mBAAe,KAAK;AACX,aAAA,KAAK,YAAY,cAAc;AAAA,EACzC;AAEO,SAAA;AACR;AAqCA,MAAM,mBAAmB,CAAC,aAAyC;AAClE,QAAM,cAAc,MAAM;AAChB,aAAA,qBAAsB,oBAAA,MAAG,EAAA,UAAA,cAAW,CAAA,GAAO,MAAM;AAAA,IAAA,CAAE;AAAA,EAAA;AAGtD,SAAA,iBAAiB,SAAS,WAAW;AACrC,SAAA,iBAAiB,sBAAsB,WAAW;AAEzD,SAAO,OAAM,OAAM;AACd,QAAA;AACG,YAAA,GAAG,CAAK,MAAA;AACb,gBAAQ,KAAK,CAAC;AAAA,MAAA,CACd;AAAA,aACO,GAAG;AACX,cAAQ,MAAM,CAAC;AACH;IACb;AAAA,EAAA;AAEF;AAGa,MAAA,qBAAqB,CAAC,aAAiC;AAG5D;AACN,WAAO,iBAAiB,QAAQ;AAAA,EACjC;AACD;"}
+{"version":3,"file":"errorHandling.js","sources":["../../src/errorHandling.tsx"],"sourcesContent":["import * as ReactDOM from 'react-dom'\nimport { Buffer } from 'buffer'\nimport { DevErrorManager, ErrorBus } from './DevErrorManager'\nimport { ReactElement } from 'react'\n\nexport type ErrorReactRenderer = (domElement: Element, reactElement: ReactElement, onRecoverableError: (e: any) => void) => void\n\nconst getErrorContainer = () => {\n\tconst errorElementId = '__contember__dev__error__container__element'\n\tlet errorContainer = document.getElementById(errorElementId)\n\n\tif (errorContainer) {\n\t\t// eslint-disable-next-line react/no-deprecated\n\t\tReactDOM.unmountComponentAtNode(errorContainer)\n\n\t} else {\n\t\terrorContainer = document.createElement('div')\n\t\terrorContainer.id = errorElementId\n\t\tdocument.body.appendChild(errorContainer)\n\t}\n\n\treturn errorContainer\n}\n\nconst devErrorHandler = (renderer: ErrorReactRenderer): TryRun => {\n\tconst errorBus = new ErrorBus()\n\n\t;(window as any).Buffer = Buffer\n\twindow.addEventListener('error', e => {\n\t\tif (e.message.startsWith('ResizeObserver')) {\n\t\t\t// Apparently, this can be ignored: https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded\n\t\t\treturn\n\t\t}\n\t\terrorBus.handleError('Unhandled error', e.error)\n\t})\n\n\twindow.addEventListener('unhandledrejection', e => errorBus.handleError('Unhandled promise rejection', e.reason))\n\n\tconst origOnError = console.error\n\tconsole.error = (...args) => {\n\t\torigOnError(...args)\n\t\tfor (const arg of args) {\n\t\t\tif (arg instanceof Error) {\n\t\t\t\terrorBus.handleError('Logged error', arg)\n\t\t\t}\n\t\t}\n\t}\n\trenderer(getErrorContainer(), <DevErrorManager bus={errorBus} />, () => {})\n\n\treturn async cb => {\n\t\ttry {\n\t\t\tawait cb(e => errorBus.handleError('Recoverable React error', e))\n\t\t} catch (e) {\n\t\t\terrorBus.handleError('Entrypoint crash', e)\n\t\t}\n\t}\n}\n\ntype TryRun = <T>(cb: (onRecoverableError: (e: any) => void) => T | Promise<T>) => void\nconst prodErrorHandler = (renderer: ErrorReactRenderer): TryRun => {\n\tconst renderError = () => {\n\t\trenderer(getErrorContainer(), <h1>Fatal error</h1>, () => {})\n\t}\n\n\twindow.addEventListener('error', renderError)\n\twindow.addEventListener('unhandledrejection', renderError)\n\n\treturn async cb => {\n\t\ttry {\n\t\t\tawait cb(e => {\n\t\t\t\tconsole.warn(e)\n\t\t\t})\n\t\t} catch (e) {\n\t\t\tconsole.error(e)\n\t\t\trenderError()\n\t\t}\n\t}\n}\n\n\nexport const createErrorHandler = (renderer: ErrorReactRenderer) => {\n\tif (import.meta.env.DEV) {\n\t\treturn devErrorHandler(renderer)\n\t} else {\n\t\treturn prodErrorHandler(renderer)\n\t}\n}\n"],"names":[],"mappings":";;;;AAOA,MAAM,oBAAoB,MAAM;AAC/B,QAAM,iBAAiB;AACnB,MAAA,iBAAiB,SAAS,eAAe,cAAc;AAE3D,MAAI,gBAAgB;AAEnB,aAAS,uBAAuB,cAAc;AAAA,EAAA,OAExC;AACW,qBAAA,SAAS,cAAc,KAAK;AAC7C,mBAAe,KAAK;AACX,aAAA,KAAK,YAAY,cAAc;AAAA,EACzC;AAEO,SAAA;AACR;AAEA,MAAM,kBAAkB,CAAC,aAAyC;AAC3D,QAAA,WAAW,IAAI;AAEnB,SAAe,SAAS;AACnB,SAAA,iBAAiB,SAAS,CAAK,MAAA;AACrC,QAAI,EAAE,QAAQ,WAAW,gBAAgB,GAAG;AAE3C;AAAA,IACD;AACS,aAAA,YAAY,mBAAmB,EAAE,KAAK;AAAA,EAAA,CAC/C;AAEM,SAAA,iBAAiB,sBAAsB,CAAK,MAAA,SAAS,YAAY,+BAA+B,EAAE,MAAM,CAAC;AAEhH,QAAM,cAAc,QAAQ;AACpB,UAAA,QAAQ,IAAI,SAAS;AAC5B,gBAAY,GAAG,IAAI;AACnB,eAAW,OAAO,MAAM;AACvB,UAAI,eAAe,OAAO;AAChB,iBAAA,YAAY,gBAAgB,GAAG;AAAA,MACzC;AAAA,IACD;AAAA,EAAA;AAEQ,WAAA,qBAAsB,uBAAA,iBAAA,EAAgB,KAAK,SAAtB,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAA,MAAgC,GAAI,MAAM;AAAA,EAAA,CAAE;AAE1E,SAAO,OAAM,OAAM;AACd,QAAA;AACH,YAAM,GAAG,CAAK,MAAA,SAAS,YAAY,2BAA2B,CAAC,CAAC;AAAA,aACxD,GAAG;AACF,eAAA,YAAY,oBAAoB,CAAC;AAAA,IAC3C;AAAA,EAAA;AAEF;AAwBa,MAAA,qBAAqB,CAAC,aAAiC;AAC1C;AACxB,WAAO,gBAAgB,QAAQ;AAAA,EAGhC;AACD;"}

package/dist/development/ui/DevBar/DevBar.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
+const jsxDevRuntime = require("react/jsx-dev-runtime");
 const reactUtils = require("@contember/react-utils");
 const utilities = require("@contember/utilities");
 const react = require("react");
@@ -44,7 +44,7 @@ const DevBar = ({
     }
   });
   const id = `dev-bar-panel${reactUtils.useId()}`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(
     "section",
     {
       "data-transparent": true,
@@ -64,9 +64,13 @@ const DevBar = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `svg { pointer-events: none }` }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: devBarContentRef, className: className("content"), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxDevRuntime.jsxDEV("style", { children: `svg { pointer-events: none }` }, void 0, false, {
+          fileName: "/__w/interface/interface/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+          lineNumber: 83,
+          columnNumber: 4
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntime.jsxDEV("div", { ref: devBarContentRef, className: className("content"), children: [
+          /* @__PURE__ */ jsxDevRuntime.jsxDEV(
             "div",
             {
               "data-expanded": utilities.dataAttribute(expanded),
@@ -74,12 +78,28 @@ const DevBar = ({
               role: "dialog",
               style: { display: "contents" },
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: className("brand"), children: brand }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: className("panels"), children })
+                /* @__PURE__ */ jsxDevRuntime.jsxDEV("div", { className: className("brand"), children: brand }, void 0, false, {
+                  fileName: "/__w/interface/interface/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+                  lineNumber: 91,
+                  columnNumber: 6
+                }, void 0),
+                /* @__PURE__ */ jsxDevRuntime.jsxDEV("div", { className: className("panels"), children }, void 0, false, {
+                  fileName: "/__w/interface/interface/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+                  lineNumber: 96,
+                  columnNumber: 6
+                }, void 0)
               ]
-            }
+            },
+            void 0,
+            true,
+            {
+              fileName: "/__w/interface/interface/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+              lineNumber: 85,
+              columnNumber: 5
+            },
+            void 0
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxDevRuntime.jsxDEV(
             "button",
             {
               ref: toggleButtonRef,
@@ -91,11 +111,31 @@ const DevBar = ({
               onClick: handleToggle,
               tabIndex: 0,
               children: expanded ? "🗙" : "ᐸ"
-            }
+            },
+            void 0,
+            false,
+            {
+              fileName: "/__w/interface/interface/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+              lineNumber: 102,
+              columnNumber: 5
+            },
+            void 0
           )
-        ] })
+        ] }, void 0, true, {
+          fileName: "/__w/interface/interface/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+          lineNumber: 84,
+          columnNumber: 4
+        }, void 0)
       ]
-    }
+    },
+    void 0,
+    true,
+    {
+      fileName: "/__w/interface/interface/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+      lineNumber: 64,
+      columnNumber: 3
+    },
+    void 0
   );
 };
 const DevPanel = ({ heading, icon, children, preview }) => {
@@ -110,7 +150,7 @@ const DevPanel = ({ heading, icon, children, preview }) => {
       setExpanded(true);
     }
   }));
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(
     "div",
     {
       ref: devPanelRef,
@@ -127,7 +167,7 @@ const DevPanel = ({ heading, icon, children, preview }) => {
         }
       }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxDevRuntime.jsxDEV(
           "button",
           {
             tabIndex: 0,
@@ -145,16 +185,52 @@ const DevPanel = ({ heading, icon, children, preview }) => {
             }),
             children: [
               icon,
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: className("trigger-label-text"), children: preview ?? heading })
+              /* @__PURE__ */ jsxDevRuntime.jsxDEV("span", { className: className("trigger-label-text"), children: preview ?? heading }, void 0, false, {
+                fileName: "/__w/interface/interface/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+                lineNumber: 171,
+                columnNumber: 5
+              }, void 0)
             ]
-          }
+          },
+          void 0,
+          true,
+          {
+            fileName: "/__w/interface/interface/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+            lineNumber: 155,
+            columnNumber: 4
+          },
+          void 0
         ),
-        expanded && /* @__PURE__ */ jsxRuntime.jsx("div", { tabIndex: 0, id, role: "dialog", className: className("panel", "dangerously-remove-native-focus-outline"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("panel-content", "native-focus-outline-handler"), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "h4", children: heading }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: className("panel-body"), children })
-        ] }) })
+        expanded && /* @__PURE__ */ jsxDevRuntime.jsxDEV("div", { tabIndex: 0, id, role: "dialog", className: className("panel", "dangerously-remove-native-focus-outline"), children: /* @__PURE__ */ jsxDevRuntime.jsxDEV("div", { className: className("panel-content", "native-focus-outline-handler"), children: [
+          /* @__PURE__ */ jsxDevRuntime.jsxDEV("h2", { className: "h4", children: heading }, void 0, false, {
+            fileName: "/__w/interface/interface/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+            lineNumber: 176,
+            columnNumber: 7
+          }, void 0),
+          /* @__PURE__ */ jsxDevRuntime.jsxDEV("div", { className: className("panel-body"), children }, void 0, false, {
+            fileName: "/__w/interface/interface/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+            lineNumber: 179,
+            columnNumber: 7
+          }, void 0)
+        ] }, void 0, true, {
+          fileName: "/__w/interface/interface/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+          lineNumber: 175,
+          columnNumber: 6
+        }, void 0) }, void 0, false, {
+          fileName: "/__w/interface/interface/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+          lineNumber: 174,
+          columnNumber: 5
+        }, void 0)
       ]
-    }
+    },
+    void 0,
+    true,
+    {
+      fileName: "/__w/interface/interface/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+      lineNumber: 140,
+      columnNumber: 3
+    },
+    void 0
   );
 };
 exports.DevBar = DevBar;

package/dist/development/ui/DevBar/DevBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DevBar.cjs","sources":["../../../../src/ui/DevBar/DevBar.tsx"],"sourcesContent":["import {\n\tuseClassNameFactory,\n\tuseId,\n\tuseOnElementClickOutsideCallback,\n\tuseOnElementMouseEnterDelayedCallback,\n\tuseReferentiallyStableCallback,\n\tuseWindowSize,\n} from '@contember/react-utils'\nimport { dataAttribute } from '@contember/utilities'\nimport { PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react'\n\nexport const DevBar = ({\n\tbreakpoint = 768,\n\tchildren,\n\tbrand,\n}: PropsWithChildren<{\n\tbrand?: ReactNode;\n\tbreakpoint?: number;\n}>) => {\n\tconst className = useClassNameFactory('devBar')\n\tconst [expanded, setExpanded] = useState(true)\n\tconst isSmallScreen = useWindowSize().width < breakpoint\n\tconst toggleButtonRef = useRef<HTMLButtonElement>(null)\n\n\tconst handleToggle = useReferentiallyStableCallback(() => {\n\t\tsetExpanded(expanded => !expanded)\n\t})\n\n\tuseEffect(() => {\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.code === 'KeyJ' && (event.ctrlKey || event.metaKey)) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\tevent.stopPropagation()\n\n\t\t\t\tif (expanded) {\n\t\t\t\t\tsetExpanded(false)\n\t\t\t\t\ttoggleButtonRef.current?.blur()\n\t\t\t\t} else {\n\t\t\t\t\tif (toggleButtonRef.current !== document.activeElement) {\n\t\t\t\t\t\ttoggleButtonRef.current?.focus()\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttoggleButtonRef.current?.blur()\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleKeyDown)\n\t\treturn () => document.removeEventListener('keydown', handleKeyDown)\n\t}, [expanded, handleToggle])\n\n\tconst devBarContentRef = useRef<HTMLDivElement>(null)\n\n\tuseOnElementClickOutsideCallback(devBarContentRef, () => {\n\t\tif (expanded) {\n\t\t\tsetExpanded(false)\n\t\t\ttoggleButtonRef.current?.blur()\n\t\t}\n\t})\n\n\tconst id = `dev-bar-panel${useId()}`\n\n\treturn (\n\t\t<section\n\t\t\tdata-transparent\n\t\t\tdata-overrides-lucide-icons\n\t\t\tdata-expanded={dataAttribute(expanded)}\n\t\t\tdata-small-screen={dataAttribute(isSmallScreen)}\n\t\t\tclassName={className(null)}\n\t\t\tonKeyDown={event => {\n\t\t\t\tif (event.code === 'Escape') {\n\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\tevent.stopPropagation()\n\n\t\t\t\t\tif (expanded) {\n\t\t\t\t\t\tsetExpanded(false)\n\t\t\t\t\t} else if (document.activeElement && document.activeElement instanceof HTMLElement) {\n\t\t\t\t\t\tdocument.activeElement.blur()\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t<style>{`svg { pointer-events: none }`}</style>\n\t\t\t<div ref={devBarContentRef} className={className('content')}>\n\t\t\t\t<div\n\t\t\t\t\tdata-expanded={dataAttribute(expanded)}\n\t\t\t\t\tid={id}\n\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\tstyle={{ display: 'contents' }}\n\t\t\t\t>\n\t\t\t\t\t<div className={className('brand')}>\n\t\t\t\t\t\t{brand}\n\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className={className('panels')}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\n\t\t\t\t</div>\n\n\t\t\t\t<button\n\t\t\t\t\tref={toggleButtonRef}\n\t\t\t\t\tid=\"dev-bar-toggle-button\"\n\t\t\t\t\taria-label=\"Toggle Contember Developer Toolbar\"\n\t\t\t\t\taria-controls={id}\n\t\t\t\t\taria-expanded={expanded}\n\t\t\t\t\tclassName={className('close')}\n\t\t\t\t\tonClick={handleToggle}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t>\n\t\t\t\t\t{expanded ? '🗙' : 'ᐸ'}\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</section>\n\t)\n}\n\nexport const DevPanel = ({ heading, icon, children, preview }: {\n\ticon: ReactNode;\n\theading: ReactNode,\n\tchildren: ReactNode,\n\tpreview?: ReactNode\n}) => {\n\tconst id = `cui-devBar-panel-${useId()}`\n\tconst className = useClassNameFactory('devBar')\n\tconst [expanded, setExpanded] = useState(false)\n\tconst mouseEnterTimeStampRef = useRef<ReturnType<typeof Date.now> | undefined>(undefined)\n\n\tconst devPanelRef = useRef<HTMLDivElement>(null)\n\n\tuseOnElementMouseEnterDelayedCallback(devPanelRef, useReferentiallyStableCallback(({ type }) => {\n\t\tif (type === 'mouseenter') {\n\t\t\tmouseEnterTimeStampRef.current = Date.now() + 300\n\t\t\tsetExpanded(true)\n\t\t}\n\t}))\n\n\treturn (\n\t\t<div\n\t\t\tref={devPanelRef}\n\t\t\tdata-expanded={dataAttribute(expanded)}\n\t\t\tclassName={className('trigger')}\n\t\t\tonMouseLeave={useReferentiallyStableCallback(() => {\n\t\t\t\tsetExpanded(false)\n\t\t\t})}\n\t\t\tonKeyDown={useReferentiallyStableCallback(event => {\n\t\t\t\tif (expanded && event.code === 'Escape') {\n\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\tsetExpanded(false)\n\t\t\t\t}\n\t\t\t})}\n\t\t>\n\t\t\t<button\n\t\t\t\ttabIndex={0}\n\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\taria-controls={id}\n\t\t\t\taria-expanded={expanded}\n\t\t\t\tclassName={className('trigger-label')}\n\t\t\t\tonClick={useReferentiallyStableCallback(() => {\n\t\t\t\t\tif (mouseEnterTimeStampRef.current && Date.now() < mouseEnterTimeStampRef.current) {\n\t\t\t\t\t\treturn\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetExpanded(expanded => !expanded)\n\t\t\t\t\t\tmouseEnterTimeStampRef.current = undefined\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{icon}\n\t\t\t\t<span className={className('trigger-label-text')}>{preview ?? heading}</span>\n\t\t\t</button>\n\t\t\t{expanded && (\n\t\t\t\t<div tabIndex={0} id={id} role=\"dialog\" className={className('panel', 'dangerously-remove-native-focus-outline')}>\n\t\t\t\t\t<div className={className('panel-content', 'native-focus-outline-handler')}>\n\t\t\t\t\t\t<h2 className=\"h4\">\n\t\t\t\t\t\t\t{heading}\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<div className={className('panel-body')}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n"],"names":["useClassNameFactory","useState","useWindowSize","useRef","useReferentiallyStableCallback","expanded","useEffect","useOnElementClickOutsideCallback","useId","jsxs","dataAttribute","jsx","useOnElementMouseEnterDelayedCallback"],"mappings":"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"}
+{"version":3,"file":"DevBar.cjs","sources":["../../../../src/ui/DevBar/DevBar.tsx"],"sourcesContent":["import {\n\tuseClassNameFactory,\n\tuseId,\n\tuseOnElementClickOutsideCallback,\n\tuseOnElementMouseEnterDelayedCallback,\n\tuseReferentiallyStableCallback,\n\tuseWindowSize,\n} from '@contember/react-utils'\nimport { dataAttribute } from '@contember/utilities'\nimport { PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react'\n\nexport const DevBar = ({\n\tbreakpoint = 768,\n\tchildren,\n\tbrand,\n}: PropsWithChildren<{\n\tbrand?: ReactNode;\n\tbreakpoint?: number;\n}>) => {\n\tconst className = useClassNameFactory('devBar')\n\tconst [expanded, setExpanded] = useState(true)\n\tconst isSmallScreen = useWindowSize().width < breakpoint\n\tconst toggleButtonRef = useRef<HTMLButtonElement>(null)\n\n\tconst handleToggle = useReferentiallyStableCallback(() => {\n\t\tsetExpanded(expanded => !expanded)\n\t})\n\n\tuseEffect(() => {\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.code === 'KeyJ' && (event.ctrlKey || event.metaKey)) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\tevent.stopPropagation()\n\n\t\t\t\tif (expanded) {\n\t\t\t\t\tsetExpanded(false)\n\t\t\t\t\ttoggleButtonRef.current?.blur()\n\t\t\t\t} else {\n\t\t\t\t\tif (toggleButtonRef.current !== document.activeElement) {\n\t\t\t\t\t\ttoggleButtonRef.current?.focus()\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttoggleButtonRef.current?.blur()\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleKeyDown)\n\t\treturn () => document.removeEventListener('keydown', handleKeyDown)\n\t}, [expanded, handleToggle])\n\n\tconst devBarContentRef = useRef<HTMLDivElement>(null)\n\n\tuseOnElementClickOutsideCallback(devBarContentRef, () => {\n\t\tif (expanded) {\n\t\t\tsetExpanded(false)\n\t\t\ttoggleButtonRef.current?.blur()\n\t\t}\n\t})\n\n\tconst id = `dev-bar-panel${useId()}`\n\n\treturn (\n\t\t<section\n\t\t\tdata-transparent\n\t\t\tdata-overrides-lucide-icons\n\t\t\tdata-expanded={dataAttribute(expanded)}\n\t\t\tdata-small-screen={dataAttribute(isSmallScreen)}\n\t\t\tclassName={className(null)}\n\t\t\tonKeyDown={event => {\n\t\t\t\tif (event.code === 'Escape') {\n\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\tevent.stopPropagation()\n\n\t\t\t\t\tif (expanded) {\n\t\t\t\t\t\tsetExpanded(false)\n\t\t\t\t\t} else if (document.activeElement && document.activeElement instanceof HTMLElement) {\n\t\t\t\t\t\tdocument.activeElement.blur()\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t<style>{`svg { pointer-events: none }`}</style>\n\t\t\t<div ref={devBarContentRef} className={className('content')}>\n\t\t\t\t<div\n\t\t\t\t\tdata-expanded={dataAttribute(expanded)}\n\t\t\t\t\tid={id}\n\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\tstyle={{ display: 'contents' }}\n\t\t\t\t>\n\t\t\t\t\t<div className={className('brand')}>\n\t\t\t\t\t\t{brand}\n\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className={className('panels')}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\n\t\t\t\t</div>\n\n\t\t\t\t<button\n\t\t\t\t\tref={toggleButtonRef}\n\t\t\t\t\tid=\"dev-bar-toggle-button\"\n\t\t\t\t\taria-label=\"Toggle Contember Developer Toolbar\"\n\t\t\t\t\taria-controls={id}\n\t\t\t\t\taria-expanded={expanded}\n\t\t\t\t\tclassName={className('close')}\n\t\t\t\t\tonClick={handleToggle}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t>\n\t\t\t\t\t{expanded ? '🗙' : 'ᐸ'}\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</section>\n\t)\n}\n\nexport const DevPanel = ({ heading, icon, children, preview }: {\n\ticon: ReactNode;\n\theading: ReactNode,\n\tchildren: ReactNode,\n\tpreview?: ReactNode\n}) => {\n\tconst id = `cui-devBar-panel-${useId()}`\n\tconst className = useClassNameFactory('devBar')\n\tconst [expanded, setExpanded] = useState(false)\n\tconst mouseEnterTimeStampRef = useRef<ReturnType<typeof Date.now> | undefined>(undefined)\n\n\tconst devPanelRef = useRef<HTMLDivElement>(null)\n\n\tuseOnElementMouseEnterDelayedCallback(devPanelRef, useReferentiallyStableCallback(({ type }) => {\n\t\tif (type === 'mouseenter') {\n\t\t\tmouseEnterTimeStampRef.current = Date.now() + 300\n\t\t\tsetExpanded(true)\n\t\t}\n\t}))\n\n\treturn (\n\t\t<div\n\t\t\tref={devPanelRef}\n\t\t\tdata-expanded={dataAttribute(expanded)}\n\t\t\tclassName={className('trigger')}\n\t\t\tonMouseLeave={useReferentiallyStableCallback(() => {\n\t\t\t\tsetExpanded(false)\n\t\t\t})}\n\t\t\tonKeyDown={useReferentiallyStableCallback(event => {\n\t\t\t\tif (expanded && event.code === 'Escape') {\n\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\tsetExpanded(false)\n\t\t\t\t}\n\t\t\t})}\n\t\t>\n\t\t\t<button\n\t\t\t\ttabIndex={0}\n\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\taria-controls={id}\n\t\t\t\taria-expanded={expanded}\n\t\t\t\tclassName={className('trigger-label')}\n\t\t\t\tonClick={useReferentiallyStableCallback(() => {\n\t\t\t\t\tif (mouseEnterTimeStampRef.current && Date.now() < mouseEnterTimeStampRef.current) {\n\t\t\t\t\t\treturn\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetExpanded(expanded => !expanded)\n\t\t\t\t\t\tmouseEnterTimeStampRef.current = undefined\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{icon}\n\t\t\t\t<span className={className('trigger-label-text')}>{preview ?? heading}</span>\n\t\t\t</button>\n\t\t\t{expanded && (\n\t\t\t\t<div tabIndex={0} id={id} role=\"dialog\" className={className('panel', 'dangerously-remove-native-focus-outline')}>\n\t\t\t\t\t<div className={className('panel-content', 'native-focus-outline-handler')}>\n\t\t\t\t\t\t<h2 className=\"h4\">\n\t\t\t\t\t\t\t{heading}\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<div className={className('panel-body')}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n"],"names":["useClassNameFactory","useState","useWindowSize","useRef","useReferentiallyStableCallback","expanded","useEffect","useOnElementClickOutsideCallback","useId","jsxDEV","dataAttribute","this","useOnElementMouseEnterDelayedCallback"],"mappings":"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"}