@contember/react-devbar 2.0.0-alpha.4 → 2.0.0-alpha.40

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

@@ -0,0 +1,123 @@
+"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 className = (cls) => cls ? `cui-devBar-${cls}` : "cui-devBar";
+const DevBar = ({
+  breakpoint = 768,
+  children
+}) => {
+  const [expanded, setExpanded] = React.useState(false);
+  const isSmallScreen = reactUtils.useWindowSize().width < breakpoint;
+  const handleToggle = reactUtils.useReferentiallyStableCallback(() => {
+    setExpanded((expanded2) => !expanded2);
+  });
+  React.useEffect(() => {
+    function handleKeyDown(event) {
+      if (event.code === "KeyJ" && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        event.stopPropagation();
+        handleToggle();
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [expanded, handleToggle]);
+  const devBarContentRef = React.useRef(null);
+  reactUtils.useOnElementClickOutsideCallback(devBarContentRef, () => {
+    if (expanded) {
+      setExpanded(false);
+    }
+  });
+  const id = `dev-bar-panel${reactUtils.useId()}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      "data-transparent": "true",
+      "data-overrides-lucide-icons": "true",
+      "data-expanded": utilities.dataAttribute(expanded),
+      "data-small-screen": utilities.dataAttribute(isSmallScreen),
+      className: className(null),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: devBarContentRef, className: className("content"), children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-expanded": true,
+          id,
+          role: "dialog",
+          style: { display: "contents" },
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: className("panels"), children })
+        }
+      ) })
+    }
+  );
+};
+const DevPanel = ({ heading, icon, children, preview }) => {
+  const id = `cui-devBar-panel-${reactUtils.useId()}`;
+  const dialogRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const handleOpen = React.useCallback(() => {
+    dialogRef.current?.showModal();
+  }, []);
+  const handleClose = React.useCallback(() => {
+    dialogRef.current?.close();
+  }, []);
+  React.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const handleClickOutside = (event) => {
+      const rect = dialog.getBoundingClientRect();
+      const isInDialog = rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
+      if (!isInDialog) {
+        dialog.close();
+      }
+    };
+    dialog.addEventListener("click", handleClickOutside);
+    return () => dialog.removeEventListener("click", handleClickOutside);
+  }, []);
+  React.useEffect(() => {
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        handleClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [handleClose]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("trigger"), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        tabIndex: 0,
+        "aria-haspopup": "dialog",
+        "aria-controls": id,
+        className: className("trigger-label"),
+        onClick: handleOpen,
+        children: [
+          icon,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: className("trigger-label-text"), children: preview ?? heading })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("dialog", { ref: dialogRef, id, className: className("panel"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("panel-content"), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("panel-header"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "h4", children: heading }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleClose,
+            className: className("close-button"),
+            "aria-label": "Close",
+            children: "✕"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: className("panel-body"), children })
+    ] }) })
+  ] });
+};
+exports.DevBar = DevBar;
+exports.DevPanel = DevPanel;
+//# sourceMappingURL=DevBar.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DevBar.cjs","sources":["../../../../../../packages/react-devbar/src/ui/DevBar/DevBar.tsx"],"sourcesContent":["import {\n\tuseId,\n\tuseOnElementClickOutsideCallback,\n\tuseReferentiallyStableCallback,\n\tuseWindowSize,\n} from '@contember/react-utils'\nimport { dataAttribute } from '@contember/utilities'\nimport { PropsWithChildren, ReactNode, useCallback, useEffect, useRef, useState } from 'react'\n\nconst className = (cls: string | null) => cls ? `cui-devBar-${cls}` : 'cui-devBar'\n\nexport const DevBar = ({\n\tbreakpoint = 768,\n\tchildren,\n}: PropsWithChildren<{\n\tbreakpoint?: number\n}>) => {\n\tconst [expanded, setExpanded] = useState(false)\n\tconst isSmallScreen = useWindowSize().width < breakpoint\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\thandleToggle()\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}\n\t})\n\n\tconst id = `dev-bar-panel${useId()}`\n\n\treturn (\n\t\t<section\n\t\t\tdata-transparent=\"true\"\n\t\t\tdata-overrides-lucide-icons=\"true\"\n\t\t\tdata-expanded={dataAttribute(expanded)}\n\t\t\tdata-small-screen={dataAttribute(isSmallScreen)}\n\t\t\tclassName={className(null)}\n\t\t>\n\t\t\t<div ref={devBarContentRef} className={className('content')}>\n\t\t\t\t<div\n\t\t\t\t\tdata-expanded={true}\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('panels')}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t)\n}\n\ninterface DevPanelProps {\n\ticon: ReactNode\n\theading: ReactNode\n\tchildren: ReactNode\n\tpreview?: ReactNode\n}\n\nexport const DevPanel = ({ heading, icon, children, preview }: DevPanelProps) => {\n\tconst id = `cui-devBar-panel-${useId()}`\n\tconst dialogRef = useRef<HTMLDialogElement>(null)\n\tconst triggerRef = useRef<HTMLButtonElement>(null)\n\n\tconst handleOpen = useCallback(() => {\n\t\tdialogRef.current?.showModal()\n\t}, [])\n\n\tconst handleClose = useCallback(() => {\n\t\tdialogRef.current?.close()\n\t}, [])\n\n\tuseEffect(() => {\n\t\tconst dialog = dialogRef.current\n\t\tif (!dialog) return\n\n\t\tconst handleClickOutside = (event: MouseEvent) => {\n\t\t\tconst rect = dialog.getBoundingClientRect()\n\t\t\tconst isInDialog = (\n\t\t\t\trect.top <= event.clientY &&\n\t\t\t\tevent.clientY <= rect.top + rect.height &&\n\t\t\t\trect.left <= event.clientX &&\n\t\t\t\tevent.clientX <= rect.left + rect.width\n\t\t\t)\n\n\t\t\tif (!isInDialog) {\n\t\t\t\tdialog.close()\n\t\t\t}\n\t\t}\n\n\t\tdialog.addEventListener('click', handleClickOutside)\n\t\treturn () => dialog.removeEventListener('click', handleClickOutside)\n\t}, [])\n\n\tuseEffect(() => {\n\t\tconst handleEscape = (event: KeyboardEvent) => {\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\thandleClose()\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleEscape)\n\t\treturn () => document.removeEventListener('keydown', handleEscape)\n\t}, [handleClose])\n\n\treturn (\n\t\t<div className={className('trigger')}>\n\t\t\t<button\n\t\t\t\tref={triggerRef}\n\t\t\t\ttabIndex={0}\n\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\taria-controls={id}\n\t\t\t\tclassName={className('trigger-label')}\n\t\t\t\tonClick={handleOpen}\n\t\t\t>\n\t\t\t\t{icon}\n\t\t\t\t<span className={className('trigger-label-text')}>\n\t\t\t\t\t{preview ?? heading}\n\t\t\t\t</span>\n\t\t\t</button>\n\n\t\t\t<dialog ref={dialogRef} id={id} className={className('panel')}>\n\t\t\t\t<div className={className('panel-content')}>\n\t\t\t\t\t<div className={className('panel-header')}>\n\t\t\t\t\t\t<h2 className=\"h4\">{heading}</h2>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\t\t\tclassName={className('close-button')}\n\t\t\t\t\t\t\taria-label=\"Close\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t✕\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={className('panel-body')}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</dialog>\n\t\t</div>\n\t)\n}\n"],"names":["useState","useWindowSize","useReferentiallyStableCallback","expanded","useEffect","useRef","useOnElementClickOutsideCallback","useId","jsx","dataAttribute","useCallback","jsxs"],"mappings":"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"}

package/dist/production/src/ui/DevBar/DevBar.js

@@ -0,0 +1,123 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useWindowSize, useReferentiallyStableCallback, useOnElementClickOutsideCallback, useId } from "@contember/react-utils";
+import { dataAttribute } from "@contember/utilities";
+import { useState, useEffect, useRef, useCallback } from "react";
+const className = (cls) => cls ? `cui-devBar-${cls}` : "cui-devBar";
+const DevBar = ({
+  breakpoint = 768,
+  children
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const isSmallScreen = useWindowSize().width < breakpoint;
+  const handleToggle = useReferentiallyStableCallback(() => {
+    setExpanded((expanded2) => !expanded2);
+  });
+  useEffect(() => {
+    function handleKeyDown(event) {
+      if (event.code === "KeyJ" && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        event.stopPropagation();
+        handleToggle();
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [expanded, handleToggle]);
+  const devBarContentRef = useRef(null);
+  useOnElementClickOutsideCallback(devBarContentRef, () => {
+    if (expanded) {
+      setExpanded(false);
+    }
+  });
+  const id = `dev-bar-panel${useId()}`;
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "data-transparent": "true",
+      "data-overrides-lucide-icons": "true",
+      "data-expanded": dataAttribute(expanded),
+      "data-small-screen": dataAttribute(isSmallScreen),
+      className: className(null),
+      children: /* @__PURE__ */ jsx("div", { ref: devBarContentRef, className: className("content"), children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-expanded": true,
+          id,
+          role: "dialog",
+          style: { display: "contents" },
+          children: /* @__PURE__ */ jsx("div", { className: className("panels"), children })
+        }
+      ) })
+    }
+  );
+};
+const DevPanel = ({ heading, icon, children, preview }) => {
+  const id = `cui-devBar-panel-${useId()}`;
+  const dialogRef = useRef(null);
+  const triggerRef = useRef(null);
+  const handleOpen = useCallback(() => {
+    dialogRef.current?.showModal();
+  }, []);
+  const handleClose = useCallback(() => {
+    dialogRef.current?.close();
+  }, []);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const handleClickOutside = (event) => {
+      const rect = dialog.getBoundingClientRect();
+      const isInDialog = rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
+      if (!isInDialog) {
+        dialog.close();
+      }
+    };
+    dialog.addEventListener("click", handleClickOutside);
+    return () => dialog.removeEventListener("click", handleClickOutside);
+  }, []);
+  useEffect(() => {
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        handleClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [handleClose]);
+  return /* @__PURE__ */ jsxs("div", { className: className("trigger"), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        tabIndex: 0,
+        "aria-haspopup": "dialog",
+        "aria-controls": id,
+        className: className("trigger-label"),
+        onClick: handleOpen,
+        children: [
+          icon,
+          /* @__PURE__ */ jsx("span", { className: className("trigger-label-text"), children: preview ?? heading })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("dialog", { ref: dialogRef, id, className: className("panel"), children: /* @__PURE__ */ jsxs("div", { className: className("panel-content"), children: [
+      /* @__PURE__ */ jsxs("div", { className: className("panel-header"), children: [
+        /* @__PURE__ */ jsx("h2", { className: "h4", children: heading }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleClose,
+            className: className("close-button"),
+            "aria-label": "Close",
+            children: "✕"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: className("panel-body"), children })
+    ] }) })
+  ] });
+};
+export {
+  DevBar,
+  DevPanel
+};
+//# sourceMappingURL=DevBar.js.map

package/dist/production/src/ui/DevBar/DevBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevBar.js","sources":["../../../../../../packages/react-devbar/src/ui/DevBar/DevBar.tsx"],"sourcesContent":["import {\n\tuseId,\n\tuseOnElementClickOutsideCallback,\n\tuseReferentiallyStableCallback,\n\tuseWindowSize,\n} from '@contember/react-utils'\nimport { dataAttribute } from '@contember/utilities'\nimport { PropsWithChildren, ReactNode, useCallback, useEffect, useRef, useState } from 'react'\n\nconst className = (cls: string | null) => cls ? `cui-devBar-${cls}` : 'cui-devBar'\n\nexport const DevBar = ({\n\tbreakpoint = 768,\n\tchildren,\n}: PropsWithChildren<{\n\tbreakpoint?: number\n}>) => {\n\tconst [expanded, setExpanded] = useState(false)\n\tconst isSmallScreen = useWindowSize().width < breakpoint\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\thandleToggle()\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}\n\t})\n\n\tconst id = `dev-bar-panel${useId()}`\n\n\treturn (\n\t\t<section\n\t\t\tdata-transparent=\"true\"\n\t\t\tdata-overrides-lucide-icons=\"true\"\n\t\t\tdata-expanded={dataAttribute(expanded)}\n\t\t\tdata-small-screen={dataAttribute(isSmallScreen)}\n\t\t\tclassName={className(null)}\n\t\t>\n\t\t\t<div ref={devBarContentRef} className={className('content')}>\n\t\t\t\t<div\n\t\t\t\t\tdata-expanded={true}\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('panels')}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t)\n}\n\ninterface DevPanelProps {\n\ticon: ReactNode\n\theading: ReactNode\n\tchildren: ReactNode\n\tpreview?: ReactNode\n}\n\nexport const DevPanel = ({ heading, icon, children, preview }: DevPanelProps) => {\n\tconst id = `cui-devBar-panel-${useId()}`\n\tconst dialogRef = useRef<HTMLDialogElement>(null)\n\tconst triggerRef = useRef<HTMLButtonElement>(null)\n\n\tconst handleOpen = useCallback(() => {\n\t\tdialogRef.current?.showModal()\n\t}, [])\n\n\tconst handleClose = useCallback(() => {\n\t\tdialogRef.current?.close()\n\t}, [])\n\n\tuseEffect(() => {\n\t\tconst dialog = dialogRef.current\n\t\tif (!dialog) return\n\n\t\tconst handleClickOutside = (event: MouseEvent) => {\n\t\t\tconst rect = dialog.getBoundingClientRect()\n\t\t\tconst isInDialog = (\n\t\t\t\trect.top <= event.clientY &&\n\t\t\t\tevent.clientY <= rect.top + rect.height &&\n\t\t\t\trect.left <= event.clientX &&\n\t\t\t\tevent.clientX <= rect.left + rect.width\n\t\t\t)\n\n\t\t\tif (!isInDialog) {\n\t\t\t\tdialog.close()\n\t\t\t}\n\t\t}\n\n\t\tdialog.addEventListener('click', handleClickOutside)\n\t\treturn () => dialog.removeEventListener('click', handleClickOutside)\n\t}, [])\n\n\tuseEffect(() => {\n\t\tconst handleEscape = (event: KeyboardEvent) => {\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\thandleClose()\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleEscape)\n\t\treturn () => document.removeEventListener('keydown', handleEscape)\n\t}, [handleClose])\n\n\treturn (\n\t\t<div className={className('trigger')}>\n\t\t\t<button\n\t\t\t\tref={triggerRef}\n\t\t\t\ttabIndex={0}\n\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\taria-controls={id}\n\t\t\t\tclassName={className('trigger-label')}\n\t\t\t\tonClick={handleOpen}\n\t\t\t>\n\t\t\t\t{icon}\n\t\t\t\t<span className={className('trigger-label-text')}>\n\t\t\t\t\t{preview ?? heading}\n\t\t\t\t</span>\n\t\t\t</button>\n\n\t\t\t<dialog ref={dialogRef} id={id} className={className('panel')}>\n\t\t\t\t<div className={className('panel-content')}>\n\t\t\t\t\t<div className={className('panel-header')}>\n\t\t\t\t\t\t<h2 className=\"h4\">{heading}</h2>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\t\t\tclassName={className('close-button')}\n\t\t\t\t\t\t\taria-label=\"Close\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t✕\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={className('panel-body')}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</dialog>\n\t\t</div>\n\t)\n}\n"],"names":["expanded"],"mappings":"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"}

package/dist/production/src/ui/DevError/DevError.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevError.cjs","sources":["../../../../../../packages/react-devbar/src/ui/DevError/DevError.tsx"],"sourcesContent":["import { DevErrorInner, DevErrorInnerProps } from './DevErrorInner'\n\nexport interface DevErrorProps extends DevErrorInnerProps {\n\tsource: string\n}\n\nconst className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'\n\nexport function DevError(props: DevErrorProps) {\n\treturn (\n\t\t<div className={className()}>\n\t\t\t<div className={className('in')}>\n\t\t\t\t<div className={className('bar')}>\n\t\t\t\t\t<div className={className('errorSource')}>{props.source}</div>\n\t\t\t\t</div>\n\t\t\t\t<DevErrorInner error={props.error} />\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],"names":["jsx","DevErrorInner"],"mappings":";;;;AAMA,MAAM,YAAY,CAAC,QAAwB,MAAM,gBAAgB,GAAG,KAAK;AAElE,SAAS,SAAS,OAAsB;AAE7C,SAAAA,2BAAA,IAAC,OAAI,EAAA,WAAW,UAAU,GACzB,0CAAC,OAAI,EAAA,WAAW,UAAU,IAAI,GAC7B,UAAA;AAAA,IAAAA,2BAAA,IAAC,OAAI,EAAA,WAAW,UAAU,KAAK,GAC9B,UAAAA,+BAAC,OAAI,EAAA,WAAW,UAAU,aAAa,GAAI,UAAA,MAAM,OAAO,CAAA,GACzD;AAAA,IACCA,2BAAAA,IAAAC,cAAAA,eAAA,EAAc,OAAO,MAAM,MAAO,CAAA;AAAA,EAAA,EAAA,CACpC,EACD,CAAA;AAEF;;"}

package/dist/production/src/ui/DevError/DevError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevError.js","sources":["../../../../../../packages/react-devbar/src/ui/DevError/DevError.tsx"],"sourcesContent":["import { DevErrorInner, DevErrorInnerProps } from './DevErrorInner'\n\nexport interface DevErrorProps extends DevErrorInnerProps {\n\tsource: string\n}\n\nconst className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'\n\nexport function DevError(props: DevErrorProps) {\n\treturn (\n\t\t<div className={className()}>\n\t\t\t<div className={className('in')}>\n\t\t\t\t<div className={className('bar')}>\n\t\t\t\t\t<div className={className('errorSource')}>{props.source}</div>\n\t\t\t\t</div>\n\t\t\t\t<DevErrorInner error={props.error} />\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],"names":[],"mappings":";;AAMA,MAAM,YAAY,CAAC,QAAwB,MAAM,gBAAgB,GAAG,KAAK;AAElE,SAAS,SAAS,OAAsB;AAE7C,SAAA,oBAAC,OAAI,EAAA,WAAW,UAAU,GACzB,+BAAC,OAAI,EAAA,WAAW,UAAU,IAAI,GAC7B,UAAA;AAAA,IAAA,oBAAC,OAAI,EAAA,WAAW,UAAU,KAAK,GAC9B,UAAA,oBAAC,OAAI,EAAA,WAAW,UAAU,aAAa,GAAI,UAAA,MAAM,OAAO,CAAA,GACzD;AAAA,IACC,oBAAA,eAAA,EAAc,OAAO,MAAM,MAAO,CAAA;AAAA,EAAA,EAAA,CACpC,EACD,CAAA;AAEF;"}

package/dist/production/src/ui/DevError/DevErrorBadge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevErrorBadge.cjs","sources":["../../../../../../packages/react-devbar/src/ui/DevError/DevErrorBadge.tsx"],"sourcesContent":["export interface DevErrorBadgeProps {\n\tonOpen: () => void\n\terrorCount: number\n}\n\n\nconst className = (cls?: string | null) => cls ? `cui-devErrorBadge-${cls}` : 'cui-devErrorBadge'\n\nexport function DevErrorBadge({ errorCount, onOpen }: DevErrorBadgeProps) {\n\treturn (\n\t\t<div className={className()}>\n\t\t\t<a className={className('button')} onClick={onOpen}>\n\t\t\t\t{errorCount} {errorCount > 1 ? 'errors' : 'error'}\n\t\t\t</a>\n\t\t</div>\n\t)\n}\n"],"names":["jsx","jsxs"],"mappings":";;;AAMA,MAAM,YAAY,CAAC,QAAwB,MAAM,qBAAqB,GAAG,KAAK;AAEvE,SAAS,cAAc,EAAE,YAAY,UAA8B;AACzE,SACEA,2BAAAA,IAAA,OAAA,EAAI,WAAW,UAAA,GACf,UAAAC,2BAAA,KAAC,KAAE,EAAA,WAAW,UAAU,QAAQ,GAAG,SAAS,QAC1C,UAAA;AAAA,IAAA;AAAA,IAAW;AAAA,IAAE,aAAa,IAAI,WAAW;AAAA,EAAA,EAAA,CAC3C,EACD,CAAA;AAEF;;"}

package/dist/production/src/ui/DevError/DevErrorBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevErrorBadge.js","sources":["../../../../../../packages/react-devbar/src/ui/DevError/DevErrorBadge.tsx"],"sourcesContent":["export interface DevErrorBadgeProps {\n\tonOpen: () => void\n\terrorCount: number\n}\n\n\nconst className = (cls?: string | null) => cls ? `cui-devErrorBadge-${cls}` : 'cui-devErrorBadge'\n\nexport function DevErrorBadge({ errorCount, onOpen }: DevErrorBadgeProps) {\n\treturn (\n\t\t<div className={className()}>\n\t\t\t<a className={className('button')} onClick={onOpen}>\n\t\t\t\t{errorCount} {errorCount > 1 ? 'errors' : 'error'}\n\t\t\t</a>\n\t\t</div>\n\t)\n}\n"],"names":[],"mappings":";AAMA,MAAM,YAAY,CAAC,QAAwB,MAAM,qBAAqB,GAAG,KAAK;AAEvE,SAAS,cAAc,EAAE,YAAY,UAA8B;AACzE,SACE,oBAAA,OAAA,EAAI,WAAW,UAAA,GACf,UAAA,qBAAC,KAAE,EAAA,WAAW,UAAU,QAAQ,GAAG,SAAS,QAC1C,UAAA;AAAA,IAAA;AAAA,IAAW;AAAA,IAAE,aAAa,IAAI,WAAW;AAAA,EAAA,EAAA,CAC3C,EACD,CAAA;AAEF;"}

package/dist/production/{ui → src/ui}/DevError/DevErrorInner.cjs

@@ -10,7 +10,7 @@ function DevErrorInner({ error, level = 1 }) {
       /* @__PURE__ */ jsxRuntime.jsx("h1", { className: className("errorName"), children: errorObject.name }),
       error.cause && /* @__PURE__ */ jsxRuntime.jsx("a", { href: `#error-${level}`, className: className("causeLink"), children: "caused by >" }),
       errorObject.message && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: className("errorMessage"), children: errorObject.message }),
-      "details" in errorObject && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: className("errorDetails"), children: errorObject.details })
+      "details" in errorObject && /* @__PURE__ */ jsxRuntime.jsx("div", { className: className("errorDetails"), children: errorObject.details })
     ] }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: className("errorName"), children: "Unknown error" }) }),
     error.parsedStackStrace ? /* @__PURE__ */ jsxRuntime.jsx(StackTrace.StackTrace, { stackTrace: error.parsedStackStrace }) : errorObject?.stack ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: className("stack"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: className("stack-dump"), children: errorObject.stack }) }) : null,
     error.cause ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [

package/dist/production/src/ui/DevError/DevErrorInner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevErrorInner.cjs","sources":["../../../../../../packages/react-devbar/src/ui/DevError/DevErrorInner.tsx"],"sourcesContent":["import { StackTrace } from './StackTrace'\nimport type { ProcessedError } from './types'\n\nexport interface DevErrorInnerProps {\n\terror: ProcessedError\n\tlevel?: number\n}\n\n\nconst className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'\n\nexport function DevErrorInner({ error, level = 1 }: DevErrorInnerProps) {\n\n\tlet errorObject: Error | undefined = error.error instanceof Error ? error.error : undefined\n\n\treturn (\n\t\t<>\n\t\t\t<div className={className('header')}>\n\t\t\t\t{errorObject ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<h1 className={className('errorName')}>{errorObject.name}</h1>\n\t\t\t\t\t\t{error.cause && <a href={`#error-${level}`} className={className('causeLink')}>caused by &gt;</a>}\n\t\t\t\t\t\t{errorObject.message && <h2 className={className('errorMessage')}>{errorObject.message}</h2>}\n\t\t\t\t\t\t{'details' in errorObject && <div className={className('errorDetails')}>{(errorObject as any).details}</div>}\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<h1 className={className('errorName')}>Unknown error</h1>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{error.parsedStackStrace ? (\n\t\t\t\t<StackTrace stackTrace={error.parsedStackStrace} />\n\t\t\t) : errorObject?.stack ? (\n\t\t\t\t<div className={className('stack')}>\n\t\t\t\t\t<div className={className('stack-dump')}>{errorObject.stack}</div>\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t{error.cause ? (\n\t\t\t\t<>\n\t\t\t\t\t<div className={className('causedBy')} id={`error-${level}`}>\n\t\t\t\t\t\tCaused by\n\t\t\t\t\t</div>\n\t\t\t\t\t<DevErrorInner error={error.cause} level={level + 1} />\n\t\t\t\t</>\n\t\t\t) : null}\n\t\t</>\n\t)\n}\n"],"names":["jsxs","Fragment","jsx","StackTrace"],"mappings":";;;;AASA,MAAM,YAAY,CAAC,QAAwB,MAAM,gBAAgB,GAAG,KAAK;AAElE,SAAS,cAAc,EAAE,OAAO,QAAQ,KAAyB;AAEvE,MAAI,cAAiC,MAAM,iBAAiB,QAAQ,MAAM,QAAQ;AAElF,SAEEA,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAAAC,2BAAAA,IAAC,SAAI,WAAW,UAAU,QAAQ,GAChC,wBAECF,2BAAAA,KAAAC,WAAA,UAAA,EAAA,UAAA;AAAA,MAAAC,+BAAC,QAAG,WAAW,UAAU,WAAW,GAAI,sBAAY,MAAK;AAAA,MACxD,MAAM,SAAUA,2BAAA,IAAA,KAAA,EAAE,MAAM,UAAU,KAAK,IAAI,WAAW,UAAU,WAAW,GAAG,UAAc,eAAA;AAAA,MAC5F,YAAY,WAAYA,+BAAA,MAAA,EAAG,WAAW,UAAU,cAAc,GAAI,UAAA,YAAY,QAAQ,CAAA;AAAA,MACtF,aAAa,eAAgBA,+BAAA,OAAA,EAAI,WAAW,UAAU,cAAc,GAAK,UAAA,YAAoB,QAAQ,CAAA;AAAA,IACvG,EAAA,CAAA,mCAEC,MAAG,EAAA,WAAW,UAAU,WAAW,GAAG,2BAAa,EAEtD,CAAA;AAAA,IACC,MAAM,oBACNA,2BAAAA,IAACC,WAAAA,YAAW,EAAA,YAAY,MAAM,kBAAmB,CAAA,IAC9C,aAAa,QACfD,2BAAAA,IAAA,OAAA,EAAI,WAAW,UAAU,OAAO,GAChC,UAAAA,2BAAA,IAAC,OAAI,EAAA,WAAW,UAAU,YAAY,GAAI,UAAA,YAAY,MAAM,CAAA,EAAA,CAC7D,IACG;AAAA,IACH,MAAM,QAELF,2BAAAA,KAAAC,WAAA,UAAA,EAAA,UAAA;AAAA,MAACC,2BAAAA,IAAA,OAAA,EAAI,WAAW,UAAU,UAAU,GAAG,IAAI,SAAS,KAAK,IAAI,UAE7D,YAAA,CAAA;AAAA,qCACC,eAAc,EAAA,OAAO,MAAM,OAAO,OAAO,QAAQ,EAAG,CAAA;AAAA,IAAA,EAAA,CACtD,IACG;AAAA,EAAA,GACL;AAEF;;"}

package/dist/production/{ui → src/ui}/DevError/DevErrorInner.js

@@ -8,7 +8,7 @@ function DevErrorInner({ error, level = 1 }) {
       /* @__PURE__ */ jsx("h1", { className: className("errorName"), children: errorObject.name }),
       error.cause && /* @__PURE__ */ jsx("a", { href: `#error-${level}`, className: className("causeLink"), children: "caused by >" }),
       errorObject.message && /* @__PURE__ */ jsx("h2", { className: className("errorMessage"), children: errorObject.message }),
-      "details" in errorObject && /* @__PURE__ */ jsx("h3", { className: className("errorDetails"), children: errorObject.details })
+      "details" in errorObject && /* @__PURE__ */ jsx("div", { className: className("errorDetails"), children: errorObject.details })
     ] }) : /* @__PURE__ */ jsx("h1", { className: className("errorName"), children: "Unknown error" }) }),
     error.parsedStackStrace ? /* @__PURE__ */ jsx(StackTrace, { stackTrace: error.parsedStackStrace }) : errorObject?.stack ? /* @__PURE__ */ jsx("div", { className: className("stack"), children: /* @__PURE__ */ jsx("div", { className: className("stack-dump"), children: errorObject.stack }) }) : null,
     error.cause ? /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/production/src/ui/DevError/DevErrorInner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevErrorInner.js","sources":["../../../../../../packages/react-devbar/src/ui/DevError/DevErrorInner.tsx"],"sourcesContent":["import { StackTrace } from './StackTrace'\nimport type { ProcessedError } from './types'\n\nexport interface DevErrorInnerProps {\n\terror: ProcessedError\n\tlevel?: number\n}\n\n\nconst className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'\n\nexport function DevErrorInner({ error, level = 1 }: DevErrorInnerProps) {\n\n\tlet errorObject: Error | undefined = error.error instanceof Error ? error.error : undefined\n\n\treturn (\n\t\t<>\n\t\t\t<div className={className('header')}>\n\t\t\t\t{errorObject ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<h1 className={className('errorName')}>{errorObject.name}</h1>\n\t\t\t\t\t\t{error.cause && <a href={`#error-${level}`} className={className('causeLink')}>caused by &gt;</a>}\n\t\t\t\t\t\t{errorObject.message && <h2 className={className('errorMessage')}>{errorObject.message}</h2>}\n\t\t\t\t\t\t{'details' in errorObject && <div className={className('errorDetails')}>{(errorObject as any).details}</div>}\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<h1 className={className('errorName')}>Unknown error</h1>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{error.parsedStackStrace ? (\n\t\t\t\t<StackTrace stackTrace={error.parsedStackStrace} />\n\t\t\t) : errorObject?.stack ? (\n\t\t\t\t<div className={className('stack')}>\n\t\t\t\t\t<div className={className('stack-dump')}>{errorObject.stack}</div>\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t{error.cause ? (\n\t\t\t\t<>\n\t\t\t\t\t<div className={className('causedBy')} id={`error-${level}`}>\n\t\t\t\t\t\tCaused by\n\t\t\t\t\t</div>\n\t\t\t\t\t<DevErrorInner error={error.cause} level={level + 1} />\n\t\t\t\t</>\n\t\t\t) : null}\n\t\t</>\n\t)\n}\n"],"names":[],"mappings":";;AASA,MAAM,YAAY,CAAC,QAAwB,MAAM,gBAAgB,GAAG,KAAK;AAElE,SAAS,cAAc,EAAE,OAAO,QAAQ,KAAyB;AAEvE,MAAI,cAAiC,MAAM,iBAAiB,QAAQ,MAAM,QAAQ;AAElF,SAEE,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,oBAAC,SAAI,WAAW,UAAU,QAAQ,GAChC,wBAEC,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,oBAAC,QAAG,WAAW,UAAU,WAAW,GAAI,sBAAY,MAAK;AAAA,MACxD,MAAM,SAAU,oBAAA,KAAA,EAAE,MAAM,UAAU,KAAK,IAAI,WAAW,UAAU,WAAW,GAAG,UAAc,eAAA;AAAA,MAC5F,YAAY,WAAY,oBAAA,MAAA,EAAG,WAAW,UAAU,cAAc,GAAI,UAAA,YAAY,QAAQ,CAAA;AAAA,MACtF,aAAa,eAAgB,oBAAA,OAAA,EAAI,WAAW,UAAU,cAAc,GAAK,UAAA,YAAoB,QAAQ,CAAA;AAAA,IACvG,EAAA,CAAA,wBAEC,MAAG,EAAA,WAAW,UAAU,WAAW,GAAG,2BAAa,EAEtD,CAAA;AAAA,IACC,MAAM,oBACN,oBAAC,YAAW,EAAA,YAAY,MAAM,kBAAmB,CAAA,IAC9C,aAAa,QACf,oBAAA,OAAA,EAAI,WAAW,UAAU,OAAO,GAChC,UAAA,oBAAC,OAAI,EAAA,WAAW,UAAU,YAAY,GAAI,UAAA,YAAY,MAAM,CAAA,EAAA,CAC7D,IACG;AAAA,IACH,MAAM,QAEL,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAW,UAAU,UAAU,GAAG,IAAI,SAAS,KAAK,IAAI,UAE7D,YAAA,CAAA;AAAA,0BACC,eAAc,EAAA,OAAO,MAAM,OAAO,OAAO,QAAQ,EAAG,CAAA;AAAA,IAAA,EAAA,CACtD,IACG;AAAA,EAAA,GACL;AAEF;"}

package/dist/production/{ui → src/ui}/DevError/DevErrorList.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const DevErrorInner = require("./DevErrorInner.cjs");
+const React = require("react");
 const className = (cls) => cls ? `cui-devError-${cls}` : "cui-devError";
 function DevErrorList({
   currentError,
@@ -12,6 +13,12 @@ function DevErrorList({
   onNext,
   onPrevious
 }) {
+  React.useEffect(() => {
+    document.body.classList.add("cui-devError-body");
+    return () => {
+      document.body.classList.remove("cui-devError-body");
+    };
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: className(), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("in"), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("bar"), children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: className("errorSource"), children: currentErrorSource }),
@@ -24,14 +31,14 @@ function DevErrorList({
             errorCount
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("switcherButtons"), children: [
-            /* @__PURE__ */ jsxRuntime.jsx("button", { className: className("switcherButton"), onClick: onPrevious, children: "ᐊ" }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { className: className("switcherButton"), onClick: onNext, children: "ᐅ" })
+            /* @__PURE__ */ jsxRuntime.jsx("button", { className: className("switcherButton"), onClick: onPrevious, children: "←" }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { className: className("switcherButton"), onClick: onNext, children: "→" })
           ] })
         ] }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: className("close"), children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: className("closeButton"), onClick: onClose, children: "🗙" }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: className("close"), children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: className("closeButton"), onClick: onClose, children: "✕" }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(DevErrorInner.DevErrorInner, { error: currentError })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: className("content"), children: /* @__PURE__ */ jsxRuntime.jsx(DevErrorInner.DevErrorInner, { error: currentError }) })
   ] }) });
 }
 exports.DevErrorList = DevErrorList;

package/dist/production/src/ui/DevError/DevErrorList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevErrorList.cjs","sources":["../../../../../../packages/react-devbar/src/ui/DevError/DevErrorList.tsx"],"sourcesContent":["import { DevErrorInner } from './DevErrorInner'\nimport { ProcessedError } from './types'\nimport { useEffect } from 'react'\n\nexport interface DevErrorListProps {\n\tcurrentError: ProcessedError\n\tcurrentErrorSource: string\n\tcurrentErrorIndex: number\n\terrorCount: number\n\tonPrevious: () => void\n\tonNext: () => void\n\tonClose: () => void\n}\n\nconst className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'\n\nexport function DevErrorList({\n\tcurrentError,\n\tcurrentErrorIndex,\n\tcurrentErrorSource,\n\terrorCount,\n\tonClose,\n\tonNext,\n\tonPrevious,\n}: DevErrorListProps) {\n\tuseEffect(() => {\n\t\tdocument.body.classList.add('cui-devError-body')\n\t\treturn () => {\n\t\t\tdocument.body.classList.remove('cui-devError-body')\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className={className()}>\n\t\t\t<div className={className('in')}>\n\t\t\t\t<div className={className('bar')}>\n\t\t\t\t\t<div className={className('errorSource')}>{currentErrorSource}</div>\n\t\t\t\t\t<div className={className('actions')}>\n\t\t\t\t\t\t{errorCount > 1 ? (\n\t\t\t\t\t\t\t<div className={className('switcher')}>\n\t\t\t\t\t\t\t\t<p className={className('errorCount')}>\n\t\t\t\t\t\t\t\t\tError {currentErrorIndex + 1} of {errorCount}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t<div className={className('switcherButtons')}>\n\t\t\t\t\t\t\t\t\t<button className={className('switcherButton')} onClick={onPrevious}>\n\t\t\t\t\t\t\t\t\t\t←\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t<button className={className('switcherButton')} onClick={onNext}>\n\t\t\t\t\t\t\t\t\t\t→\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t<div className={className('close')}>\n\t\t\t\t\t\t\t<button className={className('closeButton')} onClick={onClose}>\n\t\t\t\t\t\t\t\t✕\n\t\t\t\t\t\t\t</button>\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\t<div className={className('content')}>\n\t\t\t\t\t<DevErrorInner error={currentError} />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],"names":["useEffect","jsx","jsxs","DevErrorInner"],"mappings":";;;;;AAcA,MAAM,YAAY,CAAC,QAAwB,MAAM,gBAAgB,GAAG,KAAK;AAElE,SAAS,aAAa;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAsB;AACrBA,QAAAA,UAAU,MAAM;AACN,aAAA,KAAK,UAAU,IAAI,mBAAmB;AAC/C,WAAO,MAAM;AACH,eAAA,KAAK,UAAU,OAAO,mBAAmB;AAAA,IACnD;AAAA,EACD,GAAG,EAAE;AAGJ,SAAAC,2BAAA,IAAC,OAAI,EAAA,WAAW,UAAU,GACzB,0CAAC,OAAI,EAAA,WAAW,UAAU,IAAI,GAC7B,UAAA;AAAA,IAAAC,2BAAA,KAAC,OAAI,EAAA,WAAW,UAAU,KAAK,GAC9B,UAAA;AAAA,MAAAD,+BAAC,OAAI,EAAA,WAAW,UAAU,aAAa,GAAI,UAAmB,oBAAA;AAAA,MAC7DC,2BAAA,KAAA,OAAA,EAAI,WAAW,UAAU,SAAS,GACjC,UAAA;AAAA,QAAA,aAAa,IACZA,2BAAAA,KAAA,OAAA,EAAI,WAAW,UAAU,UAAU,GACnC,UAAA;AAAA,UAAAA,2BAAA,KAAC,KAAE,EAAA,WAAW,UAAU,YAAY,GAAG,UAAA;AAAA,YAAA;AAAA,YAC/B,oBAAoB;AAAA,YAAE;AAAA,YAAK;AAAA,UAAA,GACnC;AAAA,UACCA,2BAAA,KAAA,OAAA,EAAI,WAAW,UAAU,iBAAiB,GAC1C,UAAA;AAAA,YAAAD,2BAAAA,IAAC,YAAO,WAAW,UAAU,gBAAgB,GAAG,SAAS,YAAY,UAErE,KAAA;AAAA,YACAA,+BAAC,YAAO,WAAW,UAAU,gBAAgB,GAAG,SAAS,QAAQ,UAEjE,IAAA,CAAA;AAAA,UAAA,EACD,CAAA;AAAA,QAAA,EAAA,CACD,IACG;AAAA,QACHA,2BAAA,IAAA,OAAA,EAAI,WAAW,UAAU,OAAO,GAChC,UAAAA,+BAAC,UAAO,EAAA,WAAW,UAAU,aAAa,GAAG,SAAS,SAAS,eAE/D,EACD,CAAA;AAAA,MAAA,EACD,CAAA;AAAA,IAAA,GACD;AAAA,IACAA,2BAAAA,IAAC,OAAI,EAAA,WAAW,UAAU,SAAS,GAClC,UAACA,2BAAAA,IAAAE,cAAAA,eAAA,EAAc,OAAO,aAAc,CAAA,EACrC,CAAA;AAAA,EAAA,EAAA,CACD,EACD,CAAA;AAEF;;"}

package/dist/production/{ui → src/ui}/DevError/DevErrorList.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DevErrorInner } from "./DevErrorInner.js";
+import { useEffect } from "react";
 const className = (cls) => cls ? `cui-devError-${cls}` : "cui-devError";
 function DevErrorList({
   currentError,
@@ -10,6 +11,12 @@ function DevErrorList({
   onNext,
   onPrevious
 }) {
+  useEffect(() => {
+    document.body.classList.add("cui-devError-body");
+    return () => {
+      document.body.classList.remove("cui-devError-body");
+    };
+  }, []);
   return /* @__PURE__ */ jsx("div", { className: className(), children: /* @__PURE__ */ jsxs("div", { className: className("in"), children: [
     /* @__PURE__ */ jsxs("div", { className: className("bar"), children: [
       /* @__PURE__ */ jsx("div", { className: className("errorSource"), children: currentErrorSource }),
@@ -22,14 +29,14 @@ function DevErrorList({
             errorCount
           ] }),
           /* @__PURE__ */ jsxs("div", { className: className("switcherButtons"), children: [
-            /* @__PURE__ */ jsx("button", { className: className("switcherButton"), onClick: onPrevious, children: "ᐊ" }),
-            /* @__PURE__ */ jsx("button", { className: className("switcherButton"), onClick: onNext, children: "ᐅ" })
+            /* @__PURE__ */ jsx("button", { className: className("switcherButton"), onClick: onPrevious, children: "←" }),
+            /* @__PURE__ */ jsx("button", { className: className("switcherButton"), onClick: onNext, children: "→" })
           ] })
         ] }) : null,
-        /* @__PURE__ */ jsx("div", { className: className("close"), children: /* @__PURE__ */ jsx("button", { className: className("closeButton"), onClick: onClose, children: "🗙" }) })
+        /* @__PURE__ */ jsx("div", { className: className("close"), children: /* @__PURE__ */ jsx("button", { className: className("closeButton"), onClick: onClose, children: "✕" }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx(DevErrorInner, { error: currentError })
+    /* @__PURE__ */ jsx("div", { className: className("content"), children: /* @__PURE__ */ jsx(DevErrorInner, { error: currentError }) })
   ] }) });
 }
 export {

package/dist/production/src/ui/DevError/DevErrorList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevErrorList.js","sources":["../../../../../../packages/react-devbar/src/ui/DevError/DevErrorList.tsx"],"sourcesContent":["import { DevErrorInner } from './DevErrorInner'\nimport { ProcessedError } from './types'\nimport { useEffect } from 'react'\n\nexport interface DevErrorListProps {\n\tcurrentError: ProcessedError\n\tcurrentErrorSource: string\n\tcurrentErrorIndex: number\n\terrorCount: number\n\tonPrevious: () => void\n\tonNext: () => void\n\tonClose: () => void\n}\n\nconst className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'\n\nexport function DevErrorList({\n\tcurrentError,\n\tcurrentErrorIndex,\n\tcurrentErrorSource,\n\terrorCount,\n\tonClose,\n\tonNext,\n\tonPrevious,\n}: DevErrorListProps) {\n\tuseEffect(() => {\n\t\tdocument.body.classList.add('cui-devError-body')\n\t\treturn () => {\n\t\t\tdocument.body.classList.remove('cui-devError-body')\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className={className()}>\n\t\t\t<div className={className('in')}>\n\t\t\t\t<div className={className('bar')}>\n\t\t\t\t\t<div className={className('errorSource')}>{currentErrorSource}</div>\n\t\t\t\t\t<div className={className('actions')}>\n\t\t\t\t\t\t{errorCount > 1 ? (\n\t\t\t\t\t\t\t<div className={className('switcher')}>\n\t\t\t\t\t\t\t\t<p className={className('errorCount')}>\n\t\t\t\t\t\t\t\t\tError {currentErrorIndex + 1} of {errorCount}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t<div className={className('switcherButtons')}>\n\t\t\t\t\t\t\t\t\t<button className={className('switcherButton')} onClick={onPrevious}>\n\t\t\t\t\t\t\t\t\t\t←\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t<button className={className('switcherButton')} onClick={onNext}>\n\t\t\t\t\t\t\t\t\t\t→\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t<div className={className('close')}>\n\t\t\t\t\t\t\t<button className={className('closeButton')} onClick={onClose}>\n\t\t\t\t\t\t\t\t✕\n\t\t\t\t\t\t\t</button>\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\t<div className={className('content')}>\n\t\t\t\t\t<DevErrorInner error={currentError} />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],"names":[],"mappings":";;;AAcA,MAAM,YAAY,CAAC,QAAwB,MAAM,gBAAgB,GAAG,KAAK;AAElE,SAAS,aAAa;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAsB;AACrB,YAAU,MAAM;AACN,aAAA,KAAK,UAAU,IAAI,mBAAmB;AAC/C,WAAO,MAAM;AACH,eAAA,KAAK,UAAU,OAAO,mBAAmB;AAAA,IACnD;AAAA,EACD,GAAG,EAAE;AAGJ,SAAA,oBAAC,OAAI,EAAA,WAAW,UAAU,GACzB,+BAAC,OAAI,EAAA,WAAW,UAAU,IAAI,GAC7B,UAAA;AAAA,IAAA,qBAAC,OAAI,EAAA,WAAW,UAAU,KAAK,GAC9B,UAAA;AAAA,MAAA,oBAAC,OAAI,EAAA,WAAW,UAAU,aAAa,GAAI,UAAmB,oBAAA;AAAA,MAC7D,qBAAA,OAAA,EAAI,WAAW,UAAU,SAAS,GACjC,UAAA;AAAA,QAAA,aAAa,IACZ,qBAAA,OAAA,EAAI,WAAW,UAAU,UAAU,GACnC,UAAA;AAAA,UAAA,qBAAC,KAAE,EAAA,WAAW,UAAU,YAAY,GAAG,UAAA;AAAA,YAAA;AAAA,YAC/B,oBAAoB;AAAA,YAAE;AAAA,YAAK;AAAA,UAAA,GACnC;AAAA,UACC,qBAAA,OAAA,EAAI,WAAW,UAAU,iBAAiB,GAC1C,UAAA;AAAA,YAAA,oBAAC,YAAO,WAAW,UAAU,gBAAgB,GAAG,SAAS,YAAY,UAErE,KAAA;AAAA,YACA,oBAAC,YAAO,WAAW,UAAU,gBAAgB,GAAG,SAAS,QAAQ,UAEjE,IAAA,CAAA;AAAA,UAAA,EACD,CAAA;AAAA,QAAA,EAAA,CACD,IACG;AAAA,QACH,oBAAA,OAAA,EAAI,WAAW,UAAU,OAAO,GAChC,UAAA,oBAAC,UAAO,EAAA,WAAW,UAAU,aAAa,GAAG,SAAS,SAAS,eAE/D,EACD,CAAA;AAAA,MAAA,EACD,CAAA;AAAA,IAAA,GACD;AAAA,IACA,oBAAC,OAAI,EAAA,WAAW,UAAU,SAAS,GAClC,UAAC,oBAAA,eAAA,EAAc,OAAO,aAAc,CAAA,EACrC,CAAA;AAAA,EAAA,EAAA,CACD,EACD,CAAA;AAEF;"}

package/dist/production/src/ui/DevError/StackTrace.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackTrace.cjs","sources":["../../../../../../packages/react-devbar/src/ui/DevError/StackTrace.tsx"],"sourcesContent":["import { ParsedStackFrame, ParsedStackTrace } from './types'\n\n\nconst className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'\nexport const StackTrace = ({ stackTrace }: { stackTrace: ParsedStackTrace }) => {\n\treturn (\n\t\t<div className={className('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 line = stackFrame.line\n\n\treturn (\n\t\t<div className={className('stackFrame')}>\n\t\t\t<div className={className('stackFrameHeader')}>\n\t\t\t\t<div className={className('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={className('stackFrameCallee')}>{stackFrame.callee}</div>}\n\t\t\t</div>\n\t\t\t{line !== undefined && stackFrame.sourceCodeLines && (\n\t\t\t\t<div className={className('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={`${className('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={className('stackFrameLineNumber')}>{lineNumber}</div>\n\t\t\t\t\t\t\t\t<div className={className('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":["jsx","jsxs"],"mappings":";;;AAGA,MAAM,YAAY,CAAC,QAAwB,MAAM,gBAAgB,GAAG,KAAK;AAClE,MAAM,aAAa,CAAC,EAAE,iBAAmD;AAC/E,wCACE,OAAI,EAAA,WAAW,UAAU,OAAO,GAC/B,UAAW,WAAA,IAAI,CAAC,IAAI,UACnBA,2BAAA,IAAA,YAAA,EAAW,YAAY,GAAS,GAAA,KAAO,CACxC,GACF;AAEF;AAEA,MAAM,aAAa,CAAC,EAAE,iBAAmD;AACxE,QAAM,OAAO,WAAW;AAExB,SACEC,2BAAAA,KAAA,OAAA,EAAI,WAAW,UAAU,YAAY,GACrC,UAAA;AAAA,IAAAA,2BAAA,KAAC,OAAI,EAAA,WAAW,UAAU,kBAAkB,GAC3C,UAAA;AAAA,MAAAA,2BAAA,KAAC,OAAI,EAAA,WAAW,UAAU,kBAAkB,GAC1C,UAAA;AAAA,QAAW,WAAA;AAAA,QAAS;AAAA,QAAE;AAAA,MAAA,GACxB;AAAA,MACC,WAAW,UAAWD,+BAAA,OAAA,EAAI,WAAW,UAAU,kBAAkB,GAAI,UAAA,WAAW,OAAO,CAAA;AAAA,IAAA,GACzF;AAAA,IACC,SAAS,UAAa,WAAW,kDAChC,OAAI,EAAA,WAAW,UAAU,gBAAgB,GACxC,UAAW,WAAA,gBAAgB,IAAI,CAAC,IAAI,UAAU;AAC9C,YAAM,aAAa,QAAQ;AAC3B,UAAI,aAAa,IAAI,QAAQ,aAAa,IAAI,MAAM;AAC5C,eAAA;AAAA,MAAA;AAGP,aAAAC,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,WAAW,GAAG,UAAU,gBAAgB,CAAC,IAAI,eAAe,QAAQ,WAAW;AAAA,UAG/E,UAAA;AAAA,YAAAD,+BAAC,OAAI,EAAA,WAAW,UAAU,sBAAsB,GAAI,UAAW,YAAA;AAAA,2CAC9D,OAAI,EAAA,WAAW,UAAU,oBAAoB,GAAI,UAAG,GAAA,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAHhD;AAAA,MAIN;AAAA,IAAA,CAED,EACF,CAAA;AAAA,EAAA,GAEF;AAEF;;"}

package/dist/production/src/ui/DevError/StackTrace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackTrace.js","sources":["../../../../../../packages/react-devbar/src/ui/DevError/StackTrace.tsx"],"sourcesContent":["import { ParsedStackFrame, ParsedStackTrace } from './types'\n\n\nconst className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'\nexport const StackTrace = ({ stackTrace }: { stackTrace: ParsedStackTrace }) => {\n\treturn (\n\t\t<div className={className('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 line = stackFrame.line\n\n\treturn (\n\t\t<div className={className('stackFrame')}>\n\t\t\t<div className={className('stackFrameHeader')}>\n\t\t\t\t<div className={className('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={className('stackFrameCallee')}>{stackFrame.callee}</div>}\n\t\t\t</div>\n\t\t\t{line !== undefined && stackFrame.sourceCodeLines && (\n\t\t\t\t<div className={className('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={`${className('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={className('stackFrameLineNumber')}>{lineNumber}</div>\n\t\t\t\t\t\t\t\t<div className={className('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":";AAGA,MAAM,YAAY,CAAC,QAAwB,MAAM,gBAAgB,GAAG,KAAK;AAClE,MAAM,aAAa,CAAC,EAAE,iBAAmD;AAC/E,6BACE,OAAI,EAAA,WAAW,UAAU,OAAO,GAC/B,UAAW,WAAA,IAAI,CAAC,IAAI,UACnB,oBAAA,YAAA,EAAW,YAAY,GAAS,GAAA,KAAO,CACxC,GACF;AAEF;AAEA,MAAM,aAAa,CAAC,EAAE,iBAAmD;AACxE,QAAM,OAAO,WAAW;AAExB,SACE,qBAAA,OAAA,EAAI,WAAW,UAAU,YAAY,GACrC,UAAA;AAAA,IAAA,qBAAC,OAAI,EAAA,WAAW,UAAU,kBAAkB,GAC3C,UAAA;AAAA,MAAA,qBAAC,OAAI,EAAA,WAAW,UAAU,kBAAkB,GAC1C,UAAA;AAAA,QAAW,WAAA;AAAA,QAAS;AAAA,QAAE;AAAA,MAAA,GACxB;AAAA,MACC,WAAW,UAAW,oBAAA,OAAA,EAAI,WAAW,UAAU,kBAAkB,GAAI,UAAA,WAAW,OAAO,CAAA;AAAA,IAAA,GACzF;AAAA,IACC,SAAS,UAAa,WAAW,uCAChC,OAAI,EAAA,WAAW,UAAU,gBAAgB,GACxC,UAAW,WAAA,gBAAgB,IAAI,CAAC,IAAI,UAAU;AAC9C,YAAM,aAAa,QAAQ;AAC3B,UAAI,aAAa,IAAI,QAAQ,aAAa,IAAI,MAAM;AAC5C,eAAA;AAAA,MAAA;AAGP,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,WAAW,GAAG,UAAU,gBAAgB,CAAC,IAAI,eAAe,QAAQ,WAAW;AAAA,UAG/E,UAAA;AAAA,YAAA,oBAAC,OAAI,EAAA,WAAW,UAAU,sBAAsB,GAAI,UAAW,YAAA;AAAA,gCAC9D,OAAI,EAAA,WAAW,UAAU,oBAAoB,GAAI,UAAG,GAAA,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAHhD;AAAA,MAIN;AAAA,IAAA,CAED,EACF,CAAA;AAAA,EAAA,GAEF;AAEF;"}

package/dist/types/hooks/useParsedStacktrace.d.ts

@@ -5,6 +5,6 @@ export declare const parseStacktrace: (e: Error) => Promise<{
     callee: string;
     thirdParty: boolean;
     sourceCodeLines: string[] | undefined;
-}[]>;
+}[] | undefined>;
 export declare const useProcessedError: (e: ErrorType) => ProcessedError;
 //# sourceMappingURL=useParsedStacktrace.d.ts.map

package/dist/types/hooks/useParsedStacktrace.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useParsedStacktrace.d.ts","sourceRoot":"","sources":["../../../src/hooks/useParsedStacktrace.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE1D,eAAO,MAAM,eAAe,MAAa,KAAK;;;;;;IAS7C,CAAA;AAOD,eAAO,MAAM,iBAAiB,MAAO,SAAS,KAAG,cAoBhD,CAAA"}
+{"version":3,"file":"useParsedStacktrace.d.ts","sourceRoot":"","sources":["../../../src/hooks/useParsedStacktrace.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE1D,eAAO,MAAM,eAAe,MAAa,KAAK;;;;;;gBAc7C,CAAA;AAOD,eAAO,MAAM,iBAAiB,MAAO,SAAS,KAAG,cAoBhD,CAAA"}