@contember/react-devbar 1.3.0-alpha.14

package/dist/development/ui/DevError/StackTrace.cjs

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactUtils = require("@contember/react-utils");
+const StackTrace = ({ stackTrace }) => {
+  const componentClassName = reactUtils.useClassNameFactory("devError");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: componentClassName("stack"), children: stackTrace.map((it, index) => /* @__PURE__ */ jsxRuntime.jsx(StackFrame, { stackFrame: it }, index)) });
+};
+const StackFrame = ({ stackFrame }) => {
+  const componentClassName = reactUtils.useClassNameFactory("devError");
+  const line = stackFrame.line;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: componentClassName("stackFrame"), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: componentClassName("stackFrameHeader"), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: componentClassName("stackFrameSource"), children: [
+        stackFrame.filename,
+        ":",
+        line
+      ] }),
+      stackFrame.callee && /* @__PURE__ */ jsxRuntime.jsx("div", { className: componentClassName("stackFrameCallee"), children: stackFrame.callee })
+    ] }),
+    line !== void 0 && stackFrame.sourceCodeLines && /* @__PURE__ */ jsxRuntime.jsx("div", { className: componentClassName("stackFrameCode"), children: stackFrame.sourceCodeLines.map((it, index) => {
+      const lineNumber = index + 1;
+      if (lineNumber + 5 < line || lineNumber - 3 > line) {
+        return null;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: componentClassName("stackFrameLine", lineNumber === line && "is-active"),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: componentClassName("stackFrameLineNumber"), children: lineNumber }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: componentClassName("stackFrameLineCode"), children: it })
+          ]
+        },
+        lineNumber
+      );
+    }) })
+  ] });
+};
+exports.StackTrace = StackTrace;
+//# sourceMappingURL=StackTrace.cjs.map

package/dist/development/ui/DevError/StackTrace.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackTrace.cjs","sources":["../../../../src/ui/DevError/StackTrace.tsx"],"sourcesContent":["import { useClassNameFactory } from '@contember/react-utils'\nimport { ParsedStackFrame, ParsedStackTrace } from './types'\n\nexport const StackTrace = ({ stackTrace }: { stackTrace: ParsedStackTrace }) => {\n\tconst componentClassName = useClassNameFactory('devError')\n\n\treturn (\n\t\t<div className={componentClassName('stack')}>\n\t\t\t{stackTrace.map((it, index) => (\n\t\t\t\t<StackFrame stackFrame={it} key={index} />\n\t\t\t))}\n\t\t</div>\n\t)\n}\n\nconst StackFrame = ({ stackFrame }: { stackFrame: ParsedStackFrame }) => {\n\tconst componentClassName = useClassNameFactory('devError')\n\tconst line = stackFrame.line\n\n\treturn (\n\t\t<div className={componentClassName('stackFrame')}>\n\t\t\t<div className={componentClassName('stackFrameHeader')}>\n\t\t\t\t<div className={componentClassName('stackFrameSource')}>\n\t\t\t\t\t{stackFrame.filename}:{line}\n\t\t\t\t</div>\n\t\t\t\t{stackFrame.callee && <div className={componentClassName('stackFrameCallee')}>{stackFrame.callee}</div>}\n\t\t\t</div>\n\t\t\t{line !== undefined && stackFrame.sourceCodeLines && (\n\t\t\t\t<div className={componentClassName('stackFrameCode')}>\n\t\t\t\t\t{stackFrame.sourceCodeLines.map((it, index) => {\n\t\t\t\t\t\tconst lineNumber = index + 1\n\t\t\t\t\t\tif (lineNumber + 5 < line || lineNumber - 3 > line) {\n\t\t\t\t\t\t\treturn null\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={componentClassName('stackFrameLine', lineNumber === line && 'is-active')}\n\t\t\t\t\t\t\t\tkey={lineNumber}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className={componentClassName('stackFrameLineNumber')}>{lineNumber}</div>\n\t\t\t\t\t\t\t\t<div className={componentClassName('stackFrameLineCode')}>{it}</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n"],"names":["useClassNameFactory","jsx","jsxs"],"mappings":";;;;AAGO,MAAM,aAAa,CAAC,EAAE,iBAAmD;AACzE,QAAA,qBAAqBA,+BAAoB,UAAU;AAEzD,wCACE,OAAI,EAAA,WAAW,mBAAmB,OAAO,GACxC,UAAW,WAAA,IAAI,CAAC,IAAI,UACnBC,+BAAA,YAAA,EAAW,YAAY,MAAS,KAAO,CACxC,EACF,CAAA;AAEF;AAEA,MAAM,aAAa,CAAC,EAAE,iBAAmD;AAClE,QAAA,qBAAqBD,+BAAoB,UAAU;AACzD,QAAM,OAAO,WAAW;AAExB,SACEE,2BAAAA,KAAA,OAAA,EAAI,WAAW,mBAAmB,YAAY,GAC9C,UAAA;AAAA,IAAAA,2BAAA,KAAC,OAAI,EAAA,WAAW,mBAAmB,kBAAkB,GACpD,UAAA;AAAA,MAAAA,2BAAA,KAAC,OAAI,EAAA,WAAW,mBAAmB,kBAAkB,GACnD,UAAA;AAAA,QAAW,WAAA;AAAA,QAAS;AAAA,QAAE;AAAA,MAAA,GACxB;AAAA,MACC,WAAW,UAAWD,+BAAA,OAAA,EAAI,WAAW,mBAAmB,kBAAkB,GAAI,UAAA,WAAW,OAAO,CAAA;AAAA,IAAA,GAClG;AAAA,IACC,SAAS,UAAa,WAAW,kDAChC,OAAI,EAAA,WAAW,mBAAmB,gBAAgB,GACjD,UAAW,WAAA,gBAAgB,IAAI,CAAC,IAAI,UAAU;AAC9C,YAAM,aAAa,QAAQ;AAC3B,UAAI,aAAa,IAAI,QAAQ,aAAa,IAAI,MAAM;AAC5C,eAAA;AAAA,MACR;AAEC,aAAAC,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,WAAW,mBAAmB,kBAAkB,eAAe,QAAQ,WAAW;AAAA,UAGlF,UAAA;AAAA,YAAAD,+BAAC,OAAI,EAAA,WAAW,mBAAmB,sBAAsB,GAAI,UAAW,YAAA;AAAA,2CACvE,OAAI,EAAA,WAAW,mBAAmB,oBAAoB,GAAI,UAAG,IAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAHzD;AAAA,MAAA;AAAA,IAMP,CAAA,GACF;AAAA,EAEF,EAAA,CAAA;AAEF;;"}

package/dist/development/ui/DevError/StackTrace.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useClassNameFactory } from "@contember/react-utils";
+const StackTrace = ({ stackTrace }) => {
+  const componentClassName = useClassNameFactory("devError");
+  return /* @__PURE__ */ jsx("div", { className: componentClassName("stack"), children: stackTrace.map((it, index) => /* @__PURE__ */ jsx(StackFrame, { stackFrame: it }, index)) });
+};
+const StackFrame = ({ stackFrame }) => {
+  const componentClassName = useClassNameFactory("devError");
+  const line = stackFrame.line;
+  return /* @__PURE__ */ jsxs("div", { className: componentClassName("stackFrame"), children: [
+    /* @__PURE__ */ jsxs("div", { className: componentClassName("stackFrameHeader"), children: [
+      /* @__PURE__ */ jsxs("div", { className: componentClassName("stackFrameSource"), children: [
+        stackFrame.filename,
+        ":",
+        line
+      ] }),
+      stackFrame.callee && /* @__PURE__ */ jsx("div", { className: componentClassName("stackFrameCallee"), children: stackFrame.callee })
+    ] }),
+    line !== void 0 && stackFrame.sourceCodeLines && /* @__PURE__ */ jsx("div", { className: componentClassName("stackFrameCode"), children: stackFrame.sourceCodeLines.map((it, index) => {
+      const lineNumber = index + 1;
+      if (lineNumber + 5 < line || lineNumber - 3 > line) {
+        return null;
+      }
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: componentClassName("stackFrameLine", lineNumber === line && "is-active"),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: componentClassName("stackFrameLineNumber"), children: lineNumber }),
+            /* @__PURE__ */ jsx("div", { className: componentClassName("stackFrameLineCode"), children: it })
+          ]
+        },
+        lineNumber
+      );
+    }) })
+  ] });
+};
+export {
+  StackTrace
+};
+//# sourceMappingURL=StackTrace.js.map

package/dist/development/ui/DevError/StackTrace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackTrace.js","sources":["../../../../src/ui/DevError/StackTrace.tsx"],"sourcesContent":["import { useClassNameFactory } from '@contember/react-utils'\nimport { ParsedStackFrame, ParsedStackTrace } from './types'\n\nexport const StackTrace = ({ stackTrace }: { stackTrace: ParsedStackTrace }) => {\n\tconst componentClassName = useClassNameFactory('devError')\n\n\treturn (\n\t\t<div className={componentClassName('stack')}>\n\t\t\t{stackTrace.map((it, index) => (\n\t\t\t\t<StackFrame stackFrame={it} key={index} />\n\t\t\t))}\n\t\t</div>\n\t)\n}\n\nconst StackFrame = ({ stackFrame }: { stackFrame: ParsedStackFrame }) => {\n\tconst componentClassName = useClassNameFactory('devError')\n\tconst line = stackFrame.line\n\n\treturn (\n\t\t<div className={componentClassName('stackFrame')}>\n\t\t\t<div className={componentClassName('stackFrameHeader')}>\n\t\t\t\t<div className={componentClassName('stackFrameSource')}>\n\t\t\t\t\t{stackFrame.filename}:{line}\n\t\t\t\t</div>\n\t\t\t\t{stackFrame.callee && <div className={componentClassName('stackFrameCallee')}>{stackFrame.callee}</div>}\n\t\t\t</div>\n\t\t\t{line !== undefined && stackFrame.sourceCodeLines && (\n\t\t\t\t<div className={componentClassName('stackFrameCode')}>\n\t\t\t\t\t{stackFrame.sourceCodeLines.map((it, index) => {\n\t\t\t\t\t\tconst lineNumber = index + 1\n\t\t\t\t\t\tif (lineNumber + 5 < line || lineNumber - 3 > line) {\n\t\t\t\t\t\t\treturn null\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={componentClassName('stackFrameLine', lineNumber === line && 'is-active')}\n\t\t\t\t\t\t\t\tkey={lineNumber}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className={componentClassName('stackFrameLineNumber')}>{lineNumber}</div>\n\t\t\t\t\t\t\t\t<div className={componentClassName('stackFrameLineCode')}>{it}</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n"],"names":[],"mappings":";;AAGO,MAAM,aAAa,CAAC,EAAE,iBAAmD;AACzE,QAAA,qBAAqB,oBAAoB,UAAU;AAEzD,6BACE,OAAI,EAAA,WAAW,mBAAmB,OAAO,GACxC,UAAW,WAAA,IAAI,CAAC,IAAI,UACnB,oBAAA,YAAA,EAAW,YAAY,MAAS,KAAO,CACxC,EACF,CAAA;AAEF;AAEA,MAAM,aAAa,CAAC,EAAE,iBAAmD;AAClE,QAAA,qBAAqB,oBAAoB,UAAU;AACzD,QAAM,OAAO,WAAW;AAExB,SACE,qBAAA,OAAA,EAAI,WAAW,mBAAmB,YAAY,GAC9C,UAAA;AAAA,IAAA,qBAAC,OAAI,EAAA,WAAW,mBAAmB,kBAAkB,GACpD,UAAA;AAAA,MAAA,qBAAC,OAAI,EAAA,WAAW,mBAAmB,kBAAkB,GACnD,UAAA;AAAA,QAAW,WAAA;AAAA,QAAS;AAAA,QAAE;AAAA,MAAA,GACxB;AAAA,MACC,WAAW,UAAW,oBAAA,OAAA,EAAI,WAAW,mBAAmB,kBAAkB,GAAI,UAAA,WAAW,OAAO,CAAA;AAAA,IAAA,GAClG;AAAA,IACC,SAAS,UAAa,WAAW,uCAChC,OAAI,EAAA,WAAW,mBAAmB,gBAAgB,GACjD,UAAW,WAAA,gBAAgB,IAAI,CAAC,IAAI,UAAU;AAC9C,YAAM,aAAa,QAAQ;AAC3B,UAAI,aAAa,IAAI,QAAQ,aAAa,IAAI,MAAM;AAC5C,eAAA;AAAA,MACR;AAEC,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,WAAW,mBAAmB,kBAAkB,eAAe,QAAQ,WAAW;AAAA,UAGlF,UAAA;AAAA,YAAA,oBAAC,OAAI,EAAA,WAAW,mBAAmB,sBAAsB,GAAI,UAAW,YAAA;AAAA,gCACvE,OAAI,EAAA,WAAW,mBAAmB,oBAAoB,GAAI,UAAG,IAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAHzD;AAAA,MAAA;AAAA,IAMP,CAAA,GACF;AAAA,EAEF,EAAA,CAAA;AAEF;"}

package/dist/production/errorHandling.cjs

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const ReactDOM = require("react-dom");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const ReactDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactDOM);
+const getErrorContainer = () => {
+  const errorElementId = "__contember__dev__error__container__element";
+  let errorContainer = document.getElementById(errorElementId);
+  if (errorContainer) {
+    ReactDOM__namespace.unmountComponentAtNode(errorContainer);
+  } else {
+    errorContainer = document.createElement("div");
+    errorContainer.id = errorElementId;
+    document.body.appendChild(errorContainer);
+  }
+  return errorContainer;
+};
+const prodErrorHandler = (renderer) => {
+  const renderError = () => {
+    renderer(getErrorContainer(), /* @__PURE__ */ jsxRuntime.jsx("h1", { children: "Fatal error" }), () => {
+    });
+  };
+  window.addEventListener("error", renderError);
+  window.addEventListener("unhandledrejection", renderError);
+  return async (cb) => {
+    try {
+      await cb((e) => {
+        console.warn(e);
+      });
+    } catch (e) {
+      console.error(e);
+      renderError();
+    }
+  };
+};
+const createErrorHandler = (renderer) => {
+  {
+    return prodErrorHandler(renderer);
+  }
+};
+exports.createErrorHandler = createErrorHandler;
+//# sourceMappingURL=errorHandling.cjs.map

package/dist/production/errorHandling.cjs.map

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

package/dist/production/errorHandling.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import * as ReactDOM from "react-dom";
+const getErrorContainer = () => {
+  const errorElementId = "__contember__dev__error__container__element";
+  let errorContainer = document.getElementById(errorElementId);
+  if (errorContainer) {
+    ReactDOM.unmountComponentAtNode(errorContainer);
+  } else {
+    errorContainer = document.createElement("div");
+    errorContainer.id = errorElementId;
+    document.body.appendChild(errorContainer);
+  }
+  return errorContainer;
+};
+const prodErrorHandler = (renderer) => {
+  const renderError = () => {
+    renderer(getErrorContainer(), /* @__PURE__ */ jsx("h1", { children: "Fatal error" }), () => {
+    });
+  };
+  window.addEventListener("error", renderError);
+  window.addEventListener("unhandledrejection", renderError);
+  return async (cb) => {
+    try {
+      await cb((e) => {
+        console.warn(e);
+      });
+    } catch (e) {
+      console.error(e);
+      renderError();
+    }
+  };
+};
+const createErrorHandler = (renderer) => {
+  {
+    return prodErrorHandler(renderer);
+  }
+};
+export {
+  createErrorHandler
+};
+//# sourceMappingURL=errorHandling.js.map

package/dist/production/errorHandling.js.map

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

package/dist/production/hooks/useParsedStacktrace.cjs

@@ -0,0 +1,62 @@
+"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 __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
+));
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const parseStacktrace = async (e) => {
+  const StackTracey = (await import("stacktracey")).default;
+  return (await new StackTracey(e).withSourcesAsync()).items.map((it) => ({
+    filename: it.fileShort,
+    line: it.line,
+    callee: it.callee,
+    thirdParty: it.thirdParty,
+    sourceCodeLines: it.sourceFile?.lines
+  }));
+};
+const createInitialError = (e) => ({
+  error: e,
+  cause: e instanceof Error && "cause" in e && e.cause !== void 0 ? createInitialError(e.cause) : void 0
+});
+const useProcessedError = (e) => {
+  const [error, setError] = react.useState(() => createInitialError(e));
+  react.useEffect(() => {
+    setError(createInitialError(e));
+    if (!(e instanceof Error)) {
+      return;
+    }
+    const createErrorWithStackTrace = async (e2) => {
+      return {
+        error: e2,
+        parsedStackStrace: e2 instanceof Error ? await parseStacktrace(e2) : void 0,
+        cause: e2 instanceof Error && "cause" in e2 && e2.cause !== void 0 ? await createErrorWithStackTrace(e2.cause) : void 0
+      };
+    };
+    (async () => {
+      setError(await createErrorWithStackTrace(e));
+    })();
+  }, [e]);
+  return error;
+};
+exports.parseStacktrace = parseStacktrace;
+exports.useProcessedError = useProcessedError;
+//# sourceMappingURL=useParsedStacktrace.cjs.map

package/dist/production/hooks/useParsedStacktrace.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useParsedStacktrace.cjs","sources":["../../../src/hooks/useParsedStacktrace.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport { ErrorType, ProcessedError } from '../ui/DevError'\n\nexport const parseStacktrace = async (e: Error) => {\n\tconst StackTracey = (await import('stacktracey')).default\n\treturn (await new StackTracey(e).withSourcesAsync()).items.map(it => ({\n\t\tfilename: it.fileShort,\n\t\tline: it.line,\n\t\tcallee: it.callee,\n\t\tthirdParty: it.thirdParty,\n\t\tsourceCodeLines: it.sourceFile?.lines,\n\t}))\n}\n\nconst createInitialError = (e: ErrorType): ProcessedError => ({\n\terror: e,\n\tcause: e instanceof Error && 'cause' in e && (e as any).cause !== undefined ? createInitialError((e as any).cause) : undefined,\n})\n\nexport const useProcessedError = (e: ErrorType): ProcessedError => {\n\tconst [error, setError] = useState<ProcessedError>(() => createInitialError(e))\n\tuseEffect(() => {\n\t\tsetError(createInitialError(e))\n\t\tif (!(e instanceof Error)) {\n\t\t\treturn\n\t\t}\n\t\tconst createErrorWithStackTrace = async (e: ErrorType): Promise<ProcessedError> => {\n\t\t\treturn {\n\t\t\t\terror: e,\n\t\t\t\tparsedStackStrace: e instanceof Error ? await parseStacktrace(e) : undefined,\n\t\t\t\tcause: e instanceof Error && 'cause' in e && (e as any).cause !== undefined ? await createErrorWithStackTrace((e as any).cause) : undefined,\n\t\t\t}\n\t\t}\n\t\t(async () => {\n\t\t\tsetError(await createErrorWithStackTrace(e))\n\t\t})()\n\t}, [e])\n\n\treturn error\n}\n"],"names":["useState","useEffect","e"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAGa,MAAA,kBAAkB,OAAO,MAAa;AAClD,QAAM,eAAe,MAAM,OAAO,aAAa,GAAG;AAC1C,UAAA,MAAM,IAAI,YAAY,CAAC,EAAE,iBAAiB,GAAG,MAAM,IAAI,CAAO,QAAA;AAAA,IACrE,UAAU,GAAG;AAAA,IACb,MAAM,GAAG;AAAA,IACT,QAAQ,GAAG;AAAA,IACX,YAAY,GAAG;AAAA,IACf,iBAAiB,GAAG,YAAY;AAAA,EAC/B,EAAA;AACH;AAEA,MAAM,qBAAqB,CAAC,OAAkC;AAAA,EAC7D,OAAO;AAAA,EACP,OAAO,aAAa,SAAS,WAAW,KAAM,EAAU,UAAU,SAAY,mBAAoB,EAAU,KAAK,IAAI;AACtH;AAEa,MAAA,oBAAoB,CAAC,MAAiC;AAC5D,QAAA,CAAC,OAAO,QAAQ,IAAIA,eAAyB,MAAM,mBAAmB,CAAC,CAAC;AAC9EC,QAAAA,UAAU,MAAM;AACN,aAAA,mBAAmB,CAAC,CAAC;AAC1B,QAAA,EAAE,aAAa,QAAQ;AAC1B;AAAA,IACD;AACM,UAAA,4BAA4B,OAAOC,OAA0C;AAC3E,aAAA;AAAA,QACN,OAAOA;AAAAA,QACP,mBAAmBA,cAAa,QAAQ,MAAM,gBAAgBA,EAAC,IAAI;AAAA,QACnE,OAAOA,cAAa,SAAS,WAAWA,MAAMA,GAAU,UAAU,SAAY,MAAM,0BAA2BA,GAAU,KAAK,IAAI;AAAA,MAAA;AAAA,IACnI;AAED,KAAC,YAAY;AACH,eAAA,MAAM,0BAA0B,CAAC,CAAC;AAAA,IAAA;EACzC,GACD,CAAC,CAAC,CAAC;AAEC,SAAA;AACR;;;"}

package/dist/production/hooks/useParsedStacktrace.js

@@ -0,0 +1,40 @@
+import { useState, useEffect } from "react";
+const parseStacktrace = async (e) => {
+  const StackTracey = (await import("stacktracey")).default;
+  return (await new StackTracey(e).withSourcesAsync()).items.map((it) => ({
+    filename: it.fileShort,
+    line: it.line,
+    callee: it.callee,
+    thirdParty: it.thirdParty,
+    sourceCodeLines: it.sourceFile?.lines
+  }));
+};
+const createInitialError = (e) => ({
+  error: e,
+  cause: e instanceof Error && "cause" in e && e.cause !== void 0 ? createInitialError(e.cause) : void 0
+});
+const useProcessedError = (e) => {
+  const [error, setError] = useState(() => createInitialError(e));
+  useEffect(() => {
+    setError(createInitialError(e));
+    if (!(e instanceof Error)) {
+      return;
+    }
+    const createErrorWithStackTrace = async (e2) => {
+      return {
+        error: e2,
+        parsedStackStrace: e2 instanceof Error ? await parseStacktrace(e2) : void 0,
+        cause: e2 instanceof Error && "cause" in e2 && e2.cause !== void 0 ? await createErrorWithStackTrace(e2.cause) : void 0
+      };
+    };
+    (async () => {
+      setError(await createErrorWithStackTrace(e));
+    })();
+  }, [e]);
+  return error;
+};
+export {
+  parseStacktrace,
+  useProcessedError
+};
+//# sourceMappingURL=useParsedStacktrace.js.map

package/dist/production/hooks/useParsedStacktrace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useParsedStacktrace.js","sources":["../../../src/hooks/useParsedStacktrace.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport { ErrorType, ProcessedError } from '../ui/DevError'\n\nexport const parseStacktrace = async (e: Error) => {\n\tconst StackTracey = (await import('stacktracey')).default\n\treturn (await new StackTracey(e).withSourcesAsync()).items.map(it => ({\n\t\tfilename: it.fileShort,\n\t\tline: it.line,\n\t\tcallee: it.callee,\n\t\tthirdParty: it.thirdParty,\n\t\tsourceCodeLines: it.sourceFile?.lines,\n\t}))\n}\n\nconst createInitialError = (e: ErrorType): ProcessedError => ({\n\terror: e,\n\tcause: e instanceof Error && 'cause' in e && (e as any).cause !== undefined ? createInitialError((e as any).cause) : undefined,\n})\n\nexport const useProcessedError = (e: ErrorType): ProcessedError => {\n\tconst [error, setError] = useState<ProcessedError>(() => createInitialError(e))\n\tuseEffect(() => {\n\t\tsetError(createInitialError(e))\n\t\tif (!(e instanceof Error)) {\n\t\t\treturn\n\t\t}\n\t\tconst createErrorWithStackTrace = async (e: ErrorType): Promise<ProcessedError> => {\n\t\t\treturn {\n\t\t\t\terror: e,\n\t\t\t\tparsedStackStrace: e instanceof Error ? await parseStacktrace(e) : undefined,\n\t\t\t\tcause: e instanceof Error && 'cause' in e && (e as any).cause !== undefined ? await createErrorWithStackTrace((e as any).cause) : undefined,\n\t\t\t}\n\t\t}\n\t\t(async () => {\n\t\t\tsetError(await createErrorWithStackTrace(e))\n\t\t})()\n\t}, [e])\n\n\treturn error\n}\n"],"names":["e"],"mappings":";AAGa,MAAA,kBAAkB,OAAO,MAAa;AAClD,QAAM,eAAe,MAAM,OAAO,aAAa,GAAG;AAC1C,UAAA,MAAM,IAAI,YAAY,CAAC,EAAE,iBAAiB,GAAG,MAAM,IAAI,CAAO,QAAA;AAAA,IACrE,UAAU,GAAG;AAAA,IACb,MAAM,GAAG;AAAA,IACT,QAAQ,GAAG;AAAA,IACX,YAAY,GAAG;AAAA,IACf,iBAAiB,GAAG,YAAY;AAAA,EAC/B,EAAA;AACH;AAEA,MAAM,qBAAqB,CAAC,OAAkC;AAAA,EAC7D,OAAO;AAAA,EACP,OAAO,aAAa,SAAS,WAAW,KAAM,EAAU,UAAU,SAAY,mBAAoB,EAAU,KAAK,IAAI;AACtH;AAEa,MAAA,oBAAoB,CAAC,MAAiC;AAC5D,QAAA,CAAC,OAAO,QAAQ,IAAI,SAAyB,MAAM,mBAAmB,CAAC,CAAC;AAC9E,YAAU,MAAM;AACN,aAAA,mBAAmB,CAAC,CAAC;AAC1B,QAAA,EAAE,aAAa,QAAQ;AAC1B;AAAA,IACD;AACM,UAAA,4BAA4B,OAAOA,OAA0C;AAC3E,aAAA;AAAA,QACN,OAAOA;AAAAA,QACP,mBAAmBA,cAAa,QAAQ,MAAM,gBAAgBA,EAAC,IAAI;AAAA,QACnE,OAAOA,cAAa,SAAS,WAAWA,MAAMA,GAAU,UAAU,SAAY,MAAM,0BAA2BA,GAAU,KAAK,IAAI;AAAA,MAAA;AAAA,IACnI;AAED,KAAC,YAAY;AACH,eAAA,MAAM,0BAA0B,CAAC,CAAC;AAAA,IAAA;EACzC,GACD,CAAC,CAAC,CAAC;AAEC,SAAA;AACR;"}

package/dist/production/index.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const errorHandling = require("./errorHandling.cjs");
+const useParsedStacktrace = require("./hooks/useParsedStacktrace.cjs");
+const DevBar = require("./ui/DevBar/DevBar.cjs");
+const DevError = require("./ui/DevError/DevError.cjs");
+const DevErrorList = require("./ui/DevError/DevErrorList.cjs");
+const DevErrorBadge = require("./ui/DevError/DevErrorBadge.cjs");
+exports.createErrorHandler = errorHandling.createErrorHandler;
+exports.parseStacktrace = useParsedStacktrace.parseStacktrace;
+exports.useProcessedError = useParsedStacktrace.useProcessedError;
+exports.DevBar = DevBar.DevBar;
+exports.DevPanel = DevBar.DevPanel;
+exports.DevError = DevError.DevError;
+exports.DevErrorList = DevErrorList.DevErrorList;
+exports.DevErrorBadge = DevErrorBadge.DevErrorBadge;
+//# sourceMappingURL=index.cjs.map

package/dist/production/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/production/index.js

@@ -0,0 +1,17 @@
+import { createErrorHandler } from "./errorHandling.js";
+import { parseStacktrace, useProcessedError } from "./hooks/useParsedStacktrace.js";
+import { DevBar, DevPanel } from "./ui/DevBar/DevBar.js";
+import { DevError } from "./ui/DevError/DevError.js";
+import { DevErrorList } from "./ui/DevError/DevErrorList.js";
+import { DevErrorBadge } from "./ui/DevError/DevErrorBadge.js";
+export {
+  DevBar,
+  DevError,
+  DevErrorBadge,
+  DevErrorList,
+  DevPanel,
+  createErrorHandler,
+  parseStacktrace,
+  useProcessedError
+};
+//# sourceMappingURL=index.js.map

package/dist/production/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/production/ui/DevBar/DevBar.cjs

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactUtils = require("@contember/react-utils");
+const utilities = require("@contember/utilities");
+const react = require("react");
+const DevBar = ({
+  breakpoint = 768,
+  children,
+  brand
+}) => {
+  const className = reactUtils.useClassNameFactory("devBar");
+  const [expanded, setExpanded] = react.useState(true);
+  const isSmallScreen = reactUtils.useWindowSize().width < breakpoint;
+  const toggleButtonRef = react.useRef(null);
+  const handleToggle = reactUtils.useReferentiallyStableCallback(() => {
+    setExpanded((expanded2) => !expanded2);
+  });
+  react.useEffect(() => {
+    function handleKeyDown(event) {
+      if (event.code === "KeyJ" && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (expanded) {
+          setExpanded(false);
+          toggleButtonRef.current?.blur();
+        } else {
+          if (toggleButtonRef.current !== document.activeElement) {
+            toggleButtonRef.current?.focus();
+          } else {
+            toggleButtonRef.current?.blur();
+          }
+        }
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [expanded, handleToggle]);
+  const devBarContentRef = react.useRef(null);
+  reactUtils.useOnElementClickOutsideCallback(devBarContentRef, () => {
+    if (expanded) {
+      setExpanded(false);
+      toggleButtonRef.current?.blur();
+    }
+  });
+  const id = `dev-bar-panel${reactUtils.useId()}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      "data-transparent": true,
+      "data-overrides-lucide-icons": true,
+      "data-expanded": utilities.dataAttribute(expanded),
+      "data-small-screen": utilities.dataAttribute(isSmallScreen),
+      className: className(null),
+      onKeyDown: (event) => {
+        if (event.code === "Escape") {
+          event.preventDefault();
+          event.stopPropagation();
+          if (expanded) {
+            setExpanded(false);
+          } else if (document.activeElement && document.activeElement instanceof HTMLElement) {
+            document.activeElement.blur();
+          }
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `svg { pointer-events: none }` }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: devBarContentRef, className: className("content"), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              "data-expanded": utilities.dataAttribute(expanded),
+              id,
+              role: "dialog",
+              style: { display: "contents" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: className("brand"), children: brand }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: className("panels"), children })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              ref: toggleButtonRef,
+              id: "dev-bar-toggle-button",
+              "aria-label": "Toggle Contember Developer Toolbar",
+              "aria-controls": id,
+              "aria-expanded": expanded,
+              className: className("close"),
+              onClick: handleToggle,
+              tabIndex: 0,
+              children: expanded ? "🗙" : "ᐸ"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+const DevPanel = ({ heading, icon, children, preview }) => {
+  const id = `cui-devBar-panel-${reactUtils.useId()}`;
+  const className = reactUtils.useClassNameFactory("devBar");
+  const [expanded, setExpanded] = react.useState(false);
+  const mouseEnterTimeStampRef = react.useRef(void 0);
+  const devPanelRef = react.useRef(null);
+  reactUtils.useOnElementMouseEnterDelayedCallback(devPanelRef, reactUtils.useReferentiallyStableCallback(({ type }) => {
+    if (type === "mouseenter") {
+      mouseEnterTimeStampRef.current = Date.now() + 300;
+      setExpanded(true);
+    }
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: devPanelRef,
+      "data-expanded": utilities.dataAttribute(expanded),
+      className: className("trigger"),
+      onMouseLeave: reactUtils.useReferentiallyStableCallback(() => {
+        setExpanded(false);
+      }),
+      onKeyDown: reactUtils.useReferentiallyStableCallback((event) => {
+        if (expanded && event.code === "Escape") {
+          event.preventDefault();
+          event.stopPropagation();
+          setExpanded(false);
+        }
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            tabIndex: 0,
+            "aria-haspopup": "dialog",
+            "aria-controls": id,
+            "aria-expanded": expanded,
+            className: className("trigger-label"),
+            onClick: reactUtils.useReferentiallyStableCallback(() => {
+              if (mouseEnterTimeStampRef.current && Date.now() < mouseEnterTimeStampRef.current) {
+                return;
+              } else {
+                setExpanded((expanded2) => !expanded2);
+                mouseEnterTimeStampRef.current = void 0;
+              }
+            }),
+            children: [
+              icon,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: className("trigger-label-text"), children: preview ?? heading })
+            ]
+          }
+        ),
+        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 })
+        ] }) })
+      ]
+    }
+  );
+};
+exports.DevBar = DevBar;
+exports.DevPanel = DevPanel;
+//# sourceMappingURL=DevBar.cjs.map

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

@@ -0,0 +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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"}