minimal-piral 1.6.0-beta.7193 → 1.6.0-beta.7201

package/app/{index.1372cf.js → index.6dc892.js}

@@ -573,7 +573,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "../../../node_modules/react/index.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components */ "../../framework/piral-core/esm/components/components.js");
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "../../../node_modules/react-dom/index.js");
+/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components */ "../../framework/piral-core/esm/components/components.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/foreign.js");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["children", "piral", "errorType"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -595,6 +597,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 
+
+
 /**
  * The component for catching errors and displaying error information.
  */
@@ -622,26 +626,47 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
         error: error
       });
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(_, prevState) {
+      var _this2 = this;
+      var error = this.state.error;
+      if (error && !prevState.error) {
+        var _this$props2 = this.props,
+          piral = _this$props2.piral,
+          errorType = _this$props2.errorType;
+        var pilet = piral.meta.name;
+        (0,_utils__WEBPACK_IMPORTED_MODULE_2__.defer)(function () {
+          var container = (0,react_dom__WEBPACK_IMPORTED_MODULE_1__.findDOMNode)(_this2);
+          piral.emit('unhandled-error', {
+            container: container,
+            errorType: errorType,
+            error: error,
+            pilet: pilet
+          });
+        });
+      }
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-        children = _this$props2.children,
-        piral = _this$props2.piral,
-        errorType = _this$props2.errorType,
-        renderProps = _objectWithoutProperties(_this$props2, _excluded);
+      var _this$props3 = this.props,
+        children = _this$props3.children,
+        piral = _this$props3.piral,
+        errorType = _this$props3.errorType,
+        renderProps = _objectWithoutProperties(_this$props3, _excluded);
       var error = this.state.error;
       var rest = renderProps;
       if (error) {
         var pilet = piral.meta.name;
-        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_1__.RegisteredErrorInfo, _objectSpread({
+        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_3__.RegisteredErrorInfo, _objectSpread({
           type: errorType,
           error: error,
           pilet: pilet
         }, rest));
       }
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Suspense, {
-        fallback: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_1__.RegisteredLoadingIndicator, null)
+        fallback: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_3__.RegisteredLoadingIndicator, null)
       }, children);
     }
   }]);
@@ -2421,9 +2446,9 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
             origin: this.origin
           }
         });
-        setTimeout(function () {
+        (0,_utils__WEBPACK_IMPORTED_MODULE_3__.defer)(function () {
           return window.dispatchEvent(ev);
-        }, 0);
+        });
       }
     }]);
     return PiralComponent;
@@ -2958,6 +2983,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   componentName: () => (/* binding */ componentName),
 /* harmony export */   contentName: () => (/* binding */ contentName),
 /* harmony export */   convertComponent: () => (/* binding */ convertComponent),
+/* harmony export */   defer: () => (/* binding */ defer),
 /* harmony export */   extensionName: () => (/* binding */ extensionName),
 /* harmony export */   portalName: () => (/* binding */ portalName),
 /* harmony export */   renderInDom: () => (/* binding */ renderInDom),
@@ -3001,6 +3027,9 @@ function renderInDom(context, element, component, props) {
   }
   return attachDomPortal('root', context, element, component, props);
 }
+function defer(cb) {
+  setTimeout(cb, 0);
+}
 
 /***/ }),
 
@@ -3429,8 +3458,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   installPiralDebug: () => (/* binding */ installPiralDebug)
 /* harmony export */ });
-/* harmony import */ var _ExtensionCatalogue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ExtensionCatalogue */ "../../utilities/piral-debug-utils/esm/ExtensionCatalogue.js");
+/* harmony import */ var _ExtensionCatalogue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ExtensionCatalogue */ "../../utilities/piral-debug-utils/esm/ExtensionCatalogue.js");
 /* harmony import */ var _decycle__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./decycle */ "../../utilities/piral-debug-utils/esm/decycle.js");
+/* harmony import */ var _overlay__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./overlay */ "../../utilities/piral-debug-utils/esm/overlay.js");
 /* harmony import */ var _visualizer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./visualizer */ "../../utilities/piral-debug-utils/esm/visualizer.js");
 /* harmony import */ var _state__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./state */ "../../utilities/piral-debug-utils/esm/state.js");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -3443,6 +3473,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 
 
 
+
 function installPiralDebug(options) {
   var getGlobalState = options.getGlobalState,
     getExtensions = options.getExtensions,
@@ -3510,6 +3541,15 @@ function installPiralDebug(options) {
         }
       }
     },
+    errorOverlay: {
+      value: initialSettings.errorOverlay,
+      type: 'boolean',
+      label: 'Show error overlay',
+      group: 'extensions',
+      onChange: function onChange(value) {
+        setValue(_state__WEBPACK_IMPORTED_MODULE_0__.settingsKeys.errorOverlay, value ? 'on' : 'off');
+      }
+    },
     extensionCatalogue: {
       value: initialSettings.extensionCatalogue,
       type: 'boolean',
@@ -3662,12 +3702,12 @@ function installPiralDebug(options) {
     debug: debugApiVersion,
     instance: {
       name: "minimal-piral",
-      version: "1.6.0-beta.7193",
+      version: "1.6.0-beta.7201",
       dependencies: "tslib,react,react-dom,react-router,react-router-dom"
     },
     build: {
-      date: "2024-06-18T14:10:00.400Z",
-      cli: "1.6.0-beta.7193",
+      date: "2024-06-21T14:24:39.799Z",
+      cli: "1.6.0-beta.7201",
       compat: "1"
     }
   };
@@ -3764,12 +3804,18 @@ function installPiralDebug(options) {
   };
   document.body.dispatchEvent = function (ev) {
     if (ev.type.startsWith('piral-')) {
+      var name = ev.type.replace('piral-', '');
+      var args = ev.detail.arg;
       events.unshift({
         id: events.length.toString(),
-        name: ev.type.replace('piral-', ''),
-        args: (0,_decycle__WEBPACK_IMPORTED_MODULE_2__.decycle)(ev.detail.arg),
+        name: name,
+        args: (0,_decycle__WEBPACK_IMPORTED_MODULE_2__.decycle)(args),
         time: Date.now()
       });
+      if (name === 'unhandled-error' && args.errorType && typeof customElements !== 'undefined' && sessionStorage.getItem(_state__WEBPACK_IMPORTED_MODULE_0__.settingsKeys.errorOverlay) !== 'off') {
+        var ErrorOverlay = customElements.get(_overlay__WEBPACK_IMPORTED_MODULE_3__.overlayId);
+        document.body.appendChild(new ErrorOverlay(args));
+      }
       sendMessage({
         events: events,
         type: 'events'
@@ -3786,7 +3832,8 @@ function installPiralDebug(options) {
         hardRefresh: sessionStorage.getItem(_state__WEBPACK_IMPORTED_MODULE_0__.settingsKeys.hardRefresh) === 'on',
         viewOrigins: sessionStorage.getItem(_state__WEBPACK_IMPORTED_MODULE_0__.settingsKeys.viewOrigins) === 'on',
         extensionCatalogue: sessionStorage.getItem(_state__WEBPACK_IMPORTED_MODULE_0__.settingsKeys.extensionCatalogue) !== 'off',
-        clearConsole: sessionStorage.getItem(_state__WEBPACK_IMPORTED_MODULE_0__.settingsKeys.clearConsole) === 'on'
+        clearConsole: sessionStorage.getItem(_state__WEBPACK_IMPORTED_MODULE_0__.settingsKeys.clearConsole) === 'on',
+        errorOverlay: sessionStorage.getItem(_state__WEBPACK_IMPORTED_MODULE_0__.settingsKeys.errorOverlay) !== 'off'
       });
     }
   });
@@ -3821,7 +3868,7 @@ function installPiralDebug(options) {
     }
   });
   integrate({
-    routes: _defineProperty({}, initialSettings.cataloguePath, _ExtensionCatalogue__WEBPACK_IMPORTED_MODULE_3__.ExtensionCatalogue),
+    routes: _defineProperty({}, initialSettings.cataloguePath, _ExtensionCatalogue__WEBPACK_IMPORTED_MODULE_4__.ExtensionCatalogue),
     onChange: function onChange(previous, current, changed) {
       if (changed.state) {
         if (settings.viewState.value) {
@@ -4049,6 +4096,192 @@ function installPiletEmulator(requestPilets, options) {
 
 /***/ }),
 
+/***/ "../../utilities/piral-debug-utils/esm/overlay.js":
+/*!********************************************************!*\
+  !*** ../../utilities/piral-debug-utils/esm/overlay.js ***!
+  \********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   overlayId: () => (/* binding */ overlayId)
+/* harmony export */ });
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }
+function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct.bind(); } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeFunction(fn) { try { return Function.toString.call(fn).indexOf("[native code]") !== -1; } catch (e) { return typeof fn === "function"; } }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+// Create an element with provided attributes and optional children
+function h(e) {
+  var attrs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var elem = document.createElement(e);
+  for (var _i = 0, _Object$entries = Object.entries(attrs); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+      k = _Object$entries$_i[0],
+      v = _Object$entries$_i[1];
+    elem.setAttribute(k, v);
+  }
+  for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    children[_key - 2] = arguments[_key];
+  }
+  elem.append.apply(elem, children);
+  return elem;
+}
+// set :host styles to make playwright detect the element as visible
+var templateStyle = /*css*/"\n:host {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 99999;\n  --monospace: 'SFMono-Regular', Consolas,\n  'Liberation Mono', Menlo, Courier, monospace;\n  --red: #ff5555;\n  --yellow: #e2aa53;\n  --purple: #cfa4ff;\n  --cyan: #2dd9da;\n  --dim: #c9c9c9;\n\n  --window-background: #181818;\n  --window-color: #d8d8d8;\n}\n\n.backdrop {\n  position: fixed;\n  z-index: 99999;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  overflow-y: scroll;\n  margin: 0;\n  background: rgba(0, 0, 0, 0.66);\n}\n\n.window {\n  font-family: var(--monospace);\n  line-height: 1.5;\n  max-width: 80vw;\n  color: var(--window-color);\n  box-sizing: border-box;\n  margin: 30px auto;\n  padding: 2.5vh 4vw;\n  position: relative;\n  background: var(--window-background);\n  border-radius: 6px 6px 8px 8px;\n  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);\n  overflow: hidden;\n  border-top: 8px solid var(--red);\n  direction: ltr;\n  text-align: left;\n}\n\npre {\n  font-family: var(--monospace);\n  font-size: 16px;\n  margin-top: 0;\n  margin-bottom: 1em;\n  overflow-x: scroll;\n  scrollbar-width: none;\n}\n\npre::-webkit-scrollbar {\n  display: none;\n}\n\npre.frame::-webkit-scrollbar {\n  display: block;\n  height: 5px;\n}\n\npre.frame::-webkit-scrollbar-thumb {\n  background: #999;\n  border-radius: 5px;\n}\n\npre.frame {\n  scrollbar-width: thin;\n}\n\n.message {\n  line-height: 1.3;\n  font-weight: 600;\n  white-space: pre-wrap;\n}\n\n.message-body {\n  color: var(--red);\n}\n\n.plugin {\n  color: var(--purple);\n}\n\n.file {\n  color: var(--cyan);\n  margin-bottom: 0;\n  white-space: pre-wrap;\n  word-break: break-all;\n}\n\n.frame {\n  color: var(--yellow);\n}\n\n.stack {\n  font-size: 13px;\n  color: var(--dim);\n}\n\n.tip {\n  font-size: 13px;\n  color: #999;\n  border-top: 1px dotted #999;\n  padding-top: 13px;\n  line-height: 1.8;\n}\n\ncode {\n  font-size: 13px;\n  font-family: var(--monospace);\n  color: var(--yellow);\n}\n\n.file-link {\n  text-decoration: underline;\n  cursor: pointer;\n}\n\nkbd {\n  line-height: 1.5;\n  font-family: ui-monospace, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  font-size: 0.75rem;\n  font-weight: 700;\n  background-color: rgb(38, 40, 44);\n  color: rgb(166, 167, 171);\n  padding: 0.15rem 0.3rem;\n  border-radius: 0.25rem;\n  border-width: 0.0625rem 0.0625rem 0.1875rem;\n  border-style: solid;\n  border-color: rgb(54, 57, 64);\n  border-image: initial;\n}\n";
+// Error Template
+var createTemplate = function createTemplate() {
+  return h('div', {
+    "class": 'backdrop',
+    part: 'backdrop'
+  }, h('div', {
+    "class": 'window',
+    part: 'window'
+  }, h('pre', {
+    "class": 'message',
+    part: 'message'
+  }, h('span', {
+    "class": 'plugin',
+    part: 'plugin'
+  }), h('span', {
+    "class": 'message-body',
+    part: 'message-body'
+  })), h('pre', {
+    "class": 'file',
+    part: 'file'
+  }), h('pre', {
+    "class": 'frame',
+    part: 'frame'
+  }), h('pre', {
+    "class": 'stack',
+    part: 'stack'
+  }), h('div', {
+    "class": 'tip',
+    part: 'tip'
+  }, 'Click outside, press ', h('kbd', {}, 'Esc'), ' key, or fix the code to dismiss.', h('br'), 'You can also disable this overlay by setting ', h('code', {
+    part: 'config-option-name'
+  }, 'dbg:error-overlay'), ' to ', h('code', {
+    part: 'config-option-value'
+  }, '"off"'), ' in ', h('code', {
+    part: 'config-file-name'
+  }, 'sessionStorage'), '.')), h('style', {}, templateStyle));
+};
+var fileRE = /(?:[a-zA-Z]:\\|\/).*?:\d+:\d+/g;
+var codeframeRE = /^(?:>?\s*\d+\s+\|.*|\s+\|\s*\^.*)\r?\n/gm;
+var overlayId = 'piral-error-overlay';
+if (typeof window !== 'undefined' && 'customElements' in window) {
+  var ErrorOverlay = /*#__PURE__*/function (_HTMLElement) {
+    _inherits(ErrorOverlay, _HTMLElement);
+    var _super = _createSuper(ErrorOverlay);
+    function ErrorOverlay(props) {
+      var _error$loc;
+      var _this;
+      var links = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      _classCallCheck(this, ErrorOverlay);
+      _this = _super.call(this);
+      var error = props.error,
+        pilet = props.pilet,
+        errorType = props.errorType;
+      _this.root = _this.attachShadow({
+        mode: 'open'
+      });
+      _this.root.appendChild(createTemplate());
+      codeframeRE.lastIndex = 0;
+      var hasFrame = error.frame && codeframeRE.test(error.frame);
+      var message = hasFrame ? error.message.replace(codeframeRE, '') : error.message;
+      if (pilet) {
+        _this.text('.plugin', "[".concat(pilet, "] "));
+      }
+      _this.text('.message-body', message.trim());
+      var _split = (((_error$loc = error.loc) === null || _error$loc === void 0 ? void 0 : _error$loc.file) || error.id || 'unknown file').split("?"),
+        _split2 = _slicedToArray(_split, 1),
+        file = _split2[0];
+      if (error.loc) {
+        _this.text('.file', "".concat(file, ":").concat(error.loc.line, ":").concat(error.loc.column), links);
+      } else if (error.id) {
+        _this.text('.file', file);
+      }
+      if (hasFrame) {
+        _this.text('.frame', error.frame.trim());
+      }
+      _this.text('.stack', error.stack, links);
+      _this.root.querySelector('.window').addEventListener('click', function (e) {
+        e.stopPropagation();
+      });
+      _this.addEventListener('click', function () {
+        _this.close();
+      });
+      _this.closeOnEsc = function (e) {
+        if (e.key === 'Escape' || e.code === 'Escape') {
+          _this.close();
+        }
+      };
+      document.addEventListener('keydown', _this.closeOnEsc);
+      return _this;
+    }
+    _createClass(ErrorOverlay, [{
+      key: "text",
+      value: function text(selector, _text) {
+        var linkFiles = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+        var el = this.root.querySelector(selector);
+        if (linkFiles) {
+          var curIndex = 0;
+          var match;
+          fileRE.lastIndex = 0;
+          while (match = fileRE.exec(_text)) {
+            var _match = match,
+              file = _match[0],
+              index = _match.index;
+            if (index != null) {
+              var frag = _text.slice(curIndex, index);
+              el.appendChild(document.createTextNode(frag));
+              var link = document.createElement('a');
+              link.textContent = file;
+              link.className = 'file-link';
+              link.onclick = function () {
+                console.log('Clicked');
+              };
+              el.appendChild(link);
+              curIndex += frag.length + file.length;
+            }
+          }
+        } else {
+          el.textContent = _text;
+        }
+      }
+    }, {
+      key: "close",
+      value: function close() {
+        var _this$parentNode;
+        (_this$parentNode = this.parentNode) === null || _this$parentNode === void 0 || _this$parentNode.removeChild(this);
+        document.removeEventListener('keydown', this.closeOnEsc);
+      }
+    }]);
+    return ErrorOverlay;
+  }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
+  customElements.define(overlayId, ErrorOverlay);
+}
+
+/***/ }),
+
 /***/ "../../utilities/piral-debug-utils/esm/routeRefresh.js":
 /*!*************************************************************!*\
   !*** ../../utilities/piral-debug-utils/esm/routeRefresh.js ***!
@@ -4103,7 +4336,8 @@ var settingsKeys = {
   viewOrigins: 'dbg:view-origins',
   extensionCatalogue: 'dbg:extension-catalogue',
   clearConsole: 'dbg:clear-console',
-  persistSettings: 'dbg:persist-settings-data'
+  persistSettings: 'dbg:persist-settings-data',
+  errorOverlay: 'dbg:error-overlay'
 };
 var persistKey = settingsKeys.persistSettings;
 var persistSettings = !!localStorage.getItem(persistKey);
@@ -4168,6 +4402,7 @@ function getInitialSettings(defaultValues) {
     viewOrigins: getValue(settingsKeys.viewOrigins, defaultValues.viewOrigins, false),
     extensionCatalogue: getValue(settingsKeys.extensionCatalogue, defaultValues.extensionCatalogue, true),
     clearConsole: getValue(settingsKeys.clearConsole, defaultValues.clearConsole, false),
+    errorOverlay: getValue(settingsKeys.errorOverlay, defaultValues.errorOverlay, true),
     persistSettings: persistSettings,
     cataloguePath: '/$debug-extension-catalogue'
   };
@@ -44780,4 +45015,4 @@ var instance = (0,piral_core__WEBPACK_IMPORTED_MODULE_2__.createInstance)({
 
 /******/ })()
 ;
-//# sourceMappingURL=index.1372cf.js.map
+//# sourceMappingURL=index.6dc892.js.map