@contember/react-devbar 2.1.0-alpha.36 → 2.1.0-alpha.39

package/dist/development/src/hooks/useParsedStacktrace.cjs

@@ -0,0 +1,67 @@
+"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) => {
+  let StackTracey;
+  try {
+    StackTracey = (await import("stacktracey")).default;
+  } catch {
+    return void 0;
+  }
+  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/development/src/hooks/useParsedStacktrace.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useParsedStacktrace.cjs","sources":["../../../../../packages/react-devbar/src/hooks/useParsedStacktrace.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport { ErrorType, ProcessedError } from '../ui/DevError'\n\nexport const parseStacktrace = async (e: Error) => {\n\tlet StackTracey\n\ttry {\n\t\tStackTracey = (await import('stacktracey')).default\n\t} catch {\n\t\treturn undefined\n\t}\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":";;;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,kBAAkB,OAAO,MAAa;AAClD,MAAI;AACJ,MAAI;AACH,mBAAe,MAAM,OAAO,aAAa,GAAG;AAAA,EAC7C,QAAQ;AACP,WAAO;AAAA,EACR;AACA,UAAQ,MAAM,IAAI,YAAY,CAAC,EAAE,iBAAA,GAAoB,MAAM,IAAI,CAAA,QAAO;AAAA,IACrE,UAAU,GAAG;AAAA,IACb,MAAM,GAAG;AAAA,IACT,QAAQ,GAAG;AAAA,IACX,YAAY,GAAG;AAAA,IACf,iBAAiB,GAAG,YAAY;AAAA,EAAA,EAC/B;AACH;AAEA,MAAM,qBAAqB,CAAC,OAAkC;AAAA,EAC7D,OAAO;AAAA,EACP,OAAO,aAAa,SAAS,WAAW,KAAM,EAAU,UAAU,SAAY,mBAAoB,EAAU,KAAK,IAAI;AACtH;AAEO,MAAM,oBAAoB,CAAC,MAAiC;AAClE,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAAyB,MAAM,mBAAmB,CAAC,CAAC;AAC9EC,QAAAA,UAAU,MAAM;AACf,aAAS,mBAAmB,CAAC,CAAC;AAC9B,QAAI,EAAE,aAAa,QAAQ;AAC1B;AAAA,IACD;AACA,UAAM,4BAA4B,OAAOC,OAA0C;AAClF,aAAO;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,IAEpI;AACC,KAAC,YAAY;AACb,eAAS,MAAM,0BAA0B,CAAC,CAAC;AAAA,IAC5C,GAAA;AAAA,EACD,GAAG,CAAC,CAAC,CAAC;AAEN,SAAO;AACR;;;"}

package/dist/development/src/hooks/useParsedStacktrace.js

@@ -0,0 +1,45 @@
+import { useState, useEffect } from "react";
+const parseStacktrace = async (e) => {
+  let StackTracey;
+  try {
+    StackTracey = (await import("stacktracey")).default;
+  } catch {
+    return void 0;
+  }
+  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/development/src/hooks/useParsedStacktrace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useParsedStacktrace.js","sources":["../../../../../packages/react-devbar/src/hooks/useParsedStacktrace.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport { ErrorType, ProcessedError } from '../ui/DevError'\n\nexport const parseStacktrace = async (e: Error) => {\n\tlet StackTracey\n\ttry {\n\t\tStackTracey = (await import('stacktracey')).default\n\t} catch {\n\t\treturn undefined\n\t}\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":";AAGO,MAAM,kBAAkB,OAAO,MAAa;AAClD,MAAI;AACJ,MAAI;AACH,mBAAe,MAAM,OAAO,aAAa,GAAG;AAAA,EAC7C,QAAQ;AACP,WAAO;AAAA,EACR;AACA,UAAQ,MAAM,IAAI,YAAY,CAAC,EAAE,iBAAA,GAAoB,MAAM,IAAI,CAAA,QAAO;AAAA,IACrE,UAAU,GAAG;AAAA,IACb,MAAM,GAAG;AAAA,IACT,QAAQ,GAAG;AAAA,IACX,YAAY,GAAG;AAAA,IACf,iBAAiB,GAAG,YAAY;AAAA,EAAA,EAC/B;AACH;AAEA,MAAM,qBAAqB,CAAC,OAAkC;AAAA,EAC7D,OAAO;AAAA,EACP,OAAO,aAAa,SAAS,WAAW,KAAM,EAAU,UAAU,SAAY,mBAAoB,EAAU,KAAK,IAAI;AACtH;AAEO,MAAM,oBAAoB,CAAC,MAAiC;AAClE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAyB,MAAM,mBAAmB,CAAC,CAAC;AAC9E,YAAU,MAAM;AACf,aAAS,mBAAmB,CAAC,CAAC;AAC9B,QAAI,EAAE,aAAa,QAAQ;AAC1B;AAAA,IACD;AACA,UAAM,4BAA4B,OAAOA,OAA0C;AAClF,aAAO;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,IAEpI;AACC,KAAC,YAAY;AACb,eAAS,MAAM,0BAA0B,CAAC,CAAC;AAAA,IAC5C,GAAA;AAAA,EACD,GAAG,CAAC,CAAC,CAAC;AAEN,SAAO;AACR;"}

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

@@ -0,0 +1,193 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxDevRuntime = require("react/jsx-dev-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__ */ jsxDevRuntime.jsxDEV(
+    "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__ */ jsxDevRuntime.jsxDEV("div", { ref: devBarContentRef, className: className("content"), children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(
+        "div",
+        {
+          "data-expanded": true,
+          id,
+          role: "dialog",
+          style: { display: "contents" },
+          children: /* @__PURE__ */ jsxDevRuntime.jsxDEV("div", { className: className("panels"), children }, void 0, false, {
+            fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+            lineNumber: 60,
+            columnNumber: 6
+          }, void 0)
+        },
+        void 0,
+        false,
+        {
+          fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+          lineNumber: 54,
+          columnNumber: 5
+        },
+        void 0
+      ) }, void 0, false, {
+        fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+        lineNumber: 53,
+        columnNumber: 4
+      }, void 0)
+    },
+    void 0,
+    false,
+    {
+      fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+      lineNumber: 46,
+      columnNumber: 3
+    },
+    void 0
+  );
+};
+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__ */ jsxDevRuntime.jsxDEV("div", { className: className("trigger"), children: [
+    /* @__PURE__ */ jsxDevRuntime.jsxDEV(
+      "button",
+      {
+        type: "button",
+        ref: triggerRef,
+        tabIndex: 0,
+        "aria-haspopup": "dialog",
+        "aria-controls": id,
+        className: className("trigger-label"),
+        onClick: handleOpen,
+        children: [
+          icon,
+          /* @__PURE__ */ jsxDevRuntime.jsxDEV("span", { className: className("trigger-label-text"), children: preview ?? heading }, void 0, false, {
+            fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+            lineNumber: 132,
+            columnNumber: 5
+          }, void 0)
+        ]
+      },
+      void 0,
+      true,
+      {
+        fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+        lineNumber: 122,
+        columnNumber: 4
+      },
+      void 0
+    ),
+    /* @__PURE__ */ jsxDevRuntime.jsxDEV("dialog", { ref: dialogRef, id, className: className("panel"), children: /* @__PURE__ */ jsxDevRuntime.jsxDEV("div", { className: className("panel-content"), children: [
+      /* @__PURE__ */ jsxDevRuntime.jsxDEV("div", { className: className("panel-header"), children: [
+        /* @__PURE__ */ jsxDevRuntime.jsxDEV("h2", { className: "h4", children: heading }, void 0, false, {
+          fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+          lineNumber: 140,
+          columnNumber: 7
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntime.jsxDEV(
+          "button",
+          {
+            type: "button",
+            onClick: handleClose,
+            className: className("close-button"),
+            "aria-label": "Close",
+            children: "✕"
+          },
+          void 0,
+          false,
+          {
+            fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+            lineNumber: 141,
+            columnNumber: 7
+          },
+          void 0
+        )
+      ] }, void 0, true, {
+        fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+        lineNumber: 139,
+        columnNumber: 6
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntime.jsxDEV("div", { className: className("panel-body"), children }, void 0, false, {
+        fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+        lineNumber: 150,
+        columnNumber: 6
+      }, void 0)
+    ] }, void 0, true, {
+      fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+      lineNumber: 138,
+      columnNumber: 5
+    }, void 0) }, void 0, false, {
+      fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+      lineNumber: 137,
+      columnNumber: 4
+    }, void 0)
+  ] }, void 0, true, {
+    fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+    lineNumber: 121,
+    columnNumber: 3
+  }, void 0);
+};
+exports.DevBar = DevBar;
+exports.DevPanel = DevPanel;
+//# sourceMappingURL=DevBar.cjs.map

package/dist/development/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 { useId, useOnElementClickOutsideCallback, useReferentiallyStableCallback, useWindowSize } from '@contember/react-utils'\nimport { dataAttribute } from '@contember/utilities'\nimport { type PropsWithChildren, type 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\t// biome-ignore lint/correctness/useExhaustiveDependencies: intentional\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 = rect.top <= event.clientY\n\t\t\t\t&& event.clientY <= rect.top + rect.height\n\t\t\t\t&& rect.left <= event.clientX\n\t\t\t\t&& event.clientX <= rect.left + rect.width\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\ttype=\"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\ttype=\"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","jsxDEV","dataAttribute","this","useCallback"],"mappings":"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"}

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

@@ -0,0 +1,193 @@
+import { jsxDEV } from "react/jsx-dev-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__ */ jsxDEV(
+    "section",
+    {
+      "data-transparent": "true",
+      "data-overrides-lucide-icons": "true",
+      "data-expanded": dataAttribute(expanded),
+      "data-small-screen": dataAttribute(isSmallScreen),
+      className: className(null),
+      children: /* @__PURE__ */ jsxDEV("div", { ref: devBarContentRef, className: className("content"), children: /* @__PURE__ */ jsxDEV(
+        "div",
+        {
+          "data-expanded": true,
+          id,
+          role: "dialog",
+          style: { display: "contents" },
+          children: /* @__PURE__ */ jsxDEV("div", { className: className("panels"), children }, void 0, false, {
+            fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+            lineNumber: 60,
+            columnNumber: 6
+          }, void 0)
+        },
+        void 0,
+        false,
+        {
+          fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+          lineNumber: 54,
+          columnNumber: 5
+        },
+        void 0
+      ) }, void 0, false, {
+        fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+        lineNumber: 53,
+        columnNumber: 4
+      }, void 0)
+    },
+    void 0,
+    false,
+    {
+      fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+      lineNumber: 46,
+      columnNumber: 3
+    },
+    void 0
+  );
+};
+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__ */ jsxDEV("div", { className: className("trigger"), children: [
+    /* @__PURE__ */ jsxDEV(
+      "button",
+      {
+        type: "button",
+        ref: triggerRef,
+        tabIndex: 0,
+        "aria-haspopup": "dialog",
+        "aria-controls": id,
+        className: className("trigger-label"),
+        onClick: handleOpen,
+        children: [
+          icon,
+          /* @__PURE__ */ jsxDEV("span", { className: className("trigger-label-text"), children: preview ?? heading }, void 0, false, {
+            fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+            lineNumber: 132,
+            columnNumber: 5
+          }, void 0)
+        ]
+      },
+      void 0,
+      true,
+      {
+        fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+        lineNumber: 122,
+        columnNumber: 4
+      },
+      void 0
+    ),
+    /* @__PURE__ */ jsxDEV("dialog", { ref: dialogRef, id, className: className("panel"), children: /* @__PURE__ */ jsxDEV("div", { className: className("panel-content"), children: [
+      /* @__PURE__ */ jsxDEV("div", { className: className("panel-header"), children: [
+        /* @__PURE__ */ jsxDEV("h2", { className: "h4", children: heading }, void 0, false, {
+          fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+          lineNumber: 140,
+          columnNumber: 7
+        }, void 0),
+        /* @__PURE__ */ jsxDEV(
+          "button",
+          {
+            type: "button",
+            onClick: handleClose,
+            className: className("close-button"),
+            "aria-label": "Close",
+            children: "✕"
+          },
+          void 0,
+          false,
+          {
+            fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+            lineNumber: 141,
+            columnNumber: 7
+          },
+          void 0
+        )
+      ] }, void 0, true, {
+        fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+        lineNumber: 139,
+        columnNumber: 6
+      }, void 0),
+      /* @__PURE__ */ jsxDEV("div", { className: className("panel-body"), children }, void 0, false, {
+        fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+        lineNumber: 150,
+        columnNumber: 6
+      }, void 0)
+    ] }, void 0, true, {
+      fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+      lineNumber: 138,
+      columnNumber: 5
+    }, void 0) }, void 0, false, {
+      fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+      lineNumber: 137,
+      columnNumber: 4
+    }, void 0)
+  ] }, void 0, true, {
+    fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevBar/DevBar.tsx",
+    lineNumber: 121,
+    columnNumber: 3
+  }, void 0);
+};
+export {
+  DevBar,
+  DevPanel
+};
+//# sourceMappingURL=DevBar.js.map

package/dist/development/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 { useId, useOnElementClickOutsideCallback, useReferentiallyStableCallback, useWindowSize } from '@contember/react-utils'\nimport { dataAttribute } from '@contember/utilities'\nimport { type PropsWithChildren, type 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\t// biome-ignore lint/correctness/useExhaustiveDependencies: intentional\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 = rect.top <= event.clientY\n\t\t\t\t&& event.clientY <= rect.top + rect.height\n\t\t\t\t&& rect.left <= event.clientX\n\t\t\t\t&& event.clientX <= rect.left + rect.width\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\ttype=\"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\ttype=\"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","this"],"mappings":";;;;AAIA,MAAM,YAAY,CAAC,QAAuB,MAAM,cAAc,GAAG,KAAK;AAE/D,MAAM,SAAS,CAAC;AAAA,EACtB,aAAa;AAAA,EACb;AACD,MAEO;AACN,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,gBAAgB,gBAAgB,QAAQ;AAE9C,QAAM,eAAe,+BAA+B,MAAM;AACzD,gBAAY,CAAAA,cAAY,CAACA,SAAQ;AAAA,EAClC,CAAC;AAGD,YAAU,MAAM;AACf,aAAS,cAAc,OAAsB;AAC5C,UAAI,MAAM,SAAS,WAAW,MAAM,WAAW,MAAM,UAAU;AAC9D,cAAM,eAAA;AACN,cAAM,gBAAA;AAEN,qBAAA;AAAA,MACD;AAAA,IACD;AAEA,aAAS,iBAAiB,WAAW,aAAa;AAClD,WAAO,MAAM,SAAS,oBAAoB,WAAW,aAAa;AAAA,EACnE,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3B,QAAM,mBAAmB,OAAuB,IAAI;AAEpD,mCAAiC,kBAAkB,MAAM;AACxD,QAAI,UAAU;AACb,kBAAY,KAAK;AAAA,IAClB;AAAA,EACD,CAAC;AAED,QAAM,KAAK,gBAAgB,MAAA,CAAO;AAElC,SACC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,oBAAiB;AAAA,MACjB,+BAA4B;AAAA,MAC5B,iBAAe,cAAc,QAAQ;AAAA,MACrC,qBAAmB,cAAc,aAAa;AAAA,MAC9C,WAAW,UAAU,IAAI;AAAA,MAEzB,iCAAC,OAAA,EAAI,KAAK,kBAAkB,WAAW,UAAU,SAAS,GACzD,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,iBAAe;AAAA,UACf;AAAA,UACA,MAAK;AAAA,UACL,OAAO,EAAE,SAAS,WAAA;AAAA,UAElB,iCAAC,OAAA,EAAI,WAAW,UAAU,QAAQ,GAChC,SAAA,GADF,QAAA,OAAA;AAAA,YAAA,UAAA;AAAA,YAAA,YAAA;AAAA,YAAA,cAAA;AAAA,UAAA,GAAAC,MAEA;AAAA,QAAA;AAAA,QARD;AAAA,QAAA;AAAA,QAAA;AAAA,UAAA,UAAA;AAAA,UAAA,YAAA;AAAA,UAAA,cAAA;AAAA,QAAA;AAAA,QAAAA;AAAAA,MAAA,EASA,GAVD,QAAA,OAAA;AAAA,QAAA,UAAA;AAAA,QAAA,YAAA;AAAA,QAAA,cAAA;AAAA,MAAA,GAAAA,MAWA;AAAA,IAAA;AAAA,IAlBD;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAAA;AAAAA,EAAA;AAqBF;AASO,MAAM,WAAW,CAAC,EAAE,SAAS,MAAM,UAAU,cAA6B;AAChF,QAAM,KAAK,oBAAoB,MAAA,CAAO;AACtC,QAAM,YAAY,OAA0B,IAAI;AAChD,QAAM,aAAa,OAA0B,IAAI;AAEjD,QAAM,aAAa,YAAY,MAAM;AACpC,cAAU,SAAS,UAAA;AAAA,EACpB,GAAG,CAAA,CAAE;AAEL,QAAM,cAAc,YAAY,MAAM;AACrC,cAAU,SAAS,MAAA;AAAA,EACpB,GAAG,CAAA,CAAE;AAEL,YAAU,MAAM;AACf,UAAM,SAAS,UAAU;AACzB,QAAI,CAAC,OAAQ;AAEb,UAAM,qBAAqB,CAAC,UAAsB;AACjD,YAAM,OAAO,OAAO,sBAAA;AACpB,YAAM,aAAa,KAAK,OAAO,MAAM,WACjC,MAAM,WAAW,KAAK,MAAM,KAAK,UACjC,KAAK,QAAQ,MAAM,WACnB,MAAM,WAAW,KAAK,OAAO,KAAK;AAEtC,UAAI,CAAC,YAAY;AAChB,eAAO,MAAA;AAAA,MACR;AAAA,IACD;AAEA,WAAO,iBAAiB,SAAS,kBAAkB;AACnD,WAAO,MAAM,OAAO,oBAAoB,SAAS,kBAAkB;AAAA,EACpE,GAAG,CAAA,CAAE;AAEL,YAAU,MAAM;AACf,UAAM,eAAe,CAAC,UAAyB;AAC9C,UAAI,MAAM,QAAQ,UAAU;AAC3B,oBAAA;AAAA,MACD;AAAA,IACD;AAEA,aAAS,iBAAiB,WAAW,YAAY;AACjD,WAAO,MAAM,SAAS,oBAAoB,WAAW,YAAY;AAAA,EAClE,GAAG,CAAC,WAAW,CAAC;AAEhB,SACC,uBAAC,OAAA,EAAI,WAAW,UAAU,SAAS,GAClC,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,MAAK;AAAA,QACL,KAAK;AAAA,QACL,UAAU;AAAA,QACV,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,WAAW,UAAU,eAAe;AAAA,QACpC,SAAS;AAAA,QAER,UAAA;AAAA,UAAA;AAAA,iCACA,QAAA,EAAK,WAAW,UAAU,oBAAoB,GAC7C,qBAAW,WADb,QAAA,OAAA;AAAA,YAAA,UAAA;AAAA,YAAA,YAAA;AAAA,YAAA,cAAA;AAAA,UAAA,GAAAA,MAEA;AAAA,QAAA;AAAA,MAAA;AAAA,MAZD;AAAA,MAAA;AAAA,MAAA;AAAA,QAAA,UAAA;AAAA,QAAA,YAAA;AAAA,QAAA,cAAA;AAAA,MAAA;AAAA,MAAAA;AAAAA,IAAA;AAAA,IAeA,uBAAC,UAAA,EAAO,KAAK,WAAW,IAAQ,WAAW,UAAU,OAAO,GAC3D,UAAA,uBAAC,OAAA,EAAI,WAAW,UAAU,eAAe,GACxC,UAAA;AAAA,MAAA,uBAAC,OAAA,EAAI,WAAW,UAAU,cAAc,GACvC,UAAA;AAAA,QAAA,uBAAC,MAAA,EAAG,WAAU,MAAM,UAAA,QAAA,GAApB,QAAA,OAAA;AAAA,UAAA,UAAA;AAAA,UAAA,YAAA;AAAA,UAAA,cAAA;AAAA,QAAA,GAAAA,MAA4B;AAAA,QAC5B;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAW,UAAU,cAAc;AAAA,YACnC,cAAW;AAAA,YACX,UAAA;AAAA,UAAA;AAAA,UALD;AAAA,UAAA;AAAA,UAAA;AAAA,YAAA,UAAA;AAAA,YAAA,YAAA;AAAA,YAAA,cAAA;AAAA,UAAA;AAAA,UAAAA;AAAAA,QAAA;AAAA,MAOA,EAAA,GATD,QAAA,MAAA;AAAA,QAAA,UAAA;AAAA,QAAA,YAAA;AAAA,QAAA,cAAA;AAAA,MAAA,GAAAA,MAUA;AAAA,6BACC,OAAA,EAAI,WAAW,UAAU,YAAY,GACpC,SAAA,GADF,QAAA,OAAA;AAAA,QAAA,UAAA;AAAA,QAAA,YAAA;AAAA,QAAA,cAAA;AAAA,MAAA,GAAAA,MAEA;AAAA,IAAA,EAAA,GAdD,QAAA,MAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA,GAAAA,MAeA,EAAA,GAhBD,QAAA,OAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA,GAAAA,MAiBA;AAAA,EAAA,EAAA,GAjCD,QAAA,MAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAkCA;AAEF;"}

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxDevRuntime = require("react/jsx-dev-runtime");
+const DevErrorInner = require("./DevErrorInner.cjs");
+const className = (cls) => cls ? `cui-devError-${cls}` : "cui-devError";
+function DevError(props) {
+  return /* @__PURE__ */ jsxDevRuntime.jsxDEV("div", { className: className(), children: /* @__PURE__ */ jsxDevRuntime.jsxDEV("div", { className: className("in"), children: [
+    /* @__PURE__ */ jsxDevRuntime.jsxDEV("div", { className: className("bar"), children: /* @__PURE__ */ jsxDevRuntime.jsxDEV("div", { className: className("errorSource"), children: props.source }, void 0, false, {
+      fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevError/DevError.tsx",
+      lineNumber: 14,
+      columnNumber: 6
+    }, this) }, void 0, false, {
+      fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevError/DevError.tsx",
+      lineNumber: 13,
+      columnNumber: 5
+    }, this),
+    /* @__PURE__ */ jsxDevRuntime.jsxDEV(DevErrorInner.DevErrorInner, { error: props.error }, void 0, false, {
+      fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevError/DevError.tsx",
+      lineNumber: 16,
+      columnNumber: 5
+    }, this)
+  ] }, void 0, true, {
+    fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevError/DevError.tsx",
+    lineNumber: 12,
+    columnNumber: 4
+  }, this) }, void 0, false, {
+    fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevError/DevError.tsx",
+    lineNumber: 11,
+    columnNumber: 3
+  }, this);
+}
+exports.DevError = DevError;
+//# sourceMappingURL=DevError.cjs.map

package/dist/development/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":["jsxDEV","DevErrorInner"],"mappings":";;;;AAMA,MAAM,YAAY,CAAC,QAAwB,MAAM,gBAAgB,GAAG,KAAK;AAElE,SAAS,SAAS,OAAsB;AAC9C,SACCA,8BAAAA,OAAC,OAAA,EAAI,WAAW,UAAA,GACf,+CAAC,OAAA,EAAI,WAAW,UAAU,IAAI,GAC7B,UAAA;AAAA,IAAAA,qCAAC,OAAA,EAAI,WAAW,UAAU,KAAK,GAC9B,UAAAA,8BAAAA,OAAC,OAAA,EAAI,WAAW,UAAU,aAAa,GAAI,UAAA,MAAM,OAAA,GAAjD,QAAA,OAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA,GAAA,IAAwD,EAAA,GADzD,QAAA,OAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA,GAAA,IAEA;AAAA,IACAA,8BAAAA,OAACC,cAAAA,eAAA,EAAc,OAAO,MAAM,MAAA,GAA5B,QAAA,OAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA,GAAA,IAAmC;AAAA,EAAA,EAAA,GAJpC,QAAA,MAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAA,IAKA,EAAA,GAND,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAA,IAOA;AAEF;;"}

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

@@ -0,0 +1,33 @@
+import { jsxDEV } from "react/jsx-dev-runtime";
+import { DevErrorInner } from "./DevErrorInner.js";
+const className = (cls) => cls ? `cui-devError-${cls}` : "cui-devError";
+function DevError(props) {
+  return /* @__PURE__ */ jsxDEV("div", { className: className(), children: /* @__PURE__ */ jsxDEV("div", { className: className("in"), children: [
+    /* @__PURE__ */ jsxDEV("div", { className: className("bar"), children: /* @__PURE__ */ jsxDEV("div", { className: className("errorSource"), children: props.source }, void 0, false, {
+      fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevError/DevError.tsx",
+      lineNumber: 14,
+      columnNumber: 6
+    }, this) }, void 0, false, {
+      fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevError/DevError.tsx",
+      lineNumber: 13,
+      columnNumber: 5
+    }, this),
+    /* @__PURE__ */ jsxDEV(DevErrorInner, { error: props.error }, void 0, false, {
+      fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevError/DevError.tsx",
+      lineNumber: 16,
+      columnNumber: 5
+    }, this)
+  ] }, void 0, true, {
+    fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevError/DevError.tsx",
+    lineNumber: 12,
+    columnNumber: 4
+  }, this) }, void 0, false, {
+    fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/ui/DevError/DevError.tsx",
+    lineNumber: 11,
+    columnNumber: 3
+  }, this);
+}
+export {
+  DevError
+};
+//# sourceMappingURL=DevError.js.map

package/dist/development/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;AAC9C,SACC,uBAAC,OAAA,EAAI,WAAW,UAAA,GACf,iCAAC,OAAA,EAAI,WAAW,UAAU,IAAI,GAC7B,UAAA;AAAA,IAAA,uBAAC,OAAA,EAAI,WAAW,UAAU,KAAK,GAC9B,UAAA,uBAAC,OAAA,EAAI,WAAW,UAAU,aAAa,GAAI,UAAA,MAAM,OAAA,GAAjD,QAAA,OAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA,GAAA,IAAwD,EAAA,GADzD,QAAA,OAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA,GAAA,IAEA;AAAA,IACA,uBAAC,eAAA,EAAc,OAAO,MAAM,MAAA,GAA5B,QAAA,OAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA,GAAA,IAAmC;AAAA,EAAA,EAAA,GAJpC,QAAA,MAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAA,IAKA,EAAA,GAND,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAA,IAOA;AAEF;"}