sample-cross-fx 1.4.0-beta.6276 → 1.4.0-beta.6287

package/app/{index.4c2e13.js → index.36982e.js}

@@ -57188,10 +57188,10 @@ const RootListener = () => {
         target.dispose = dispose;
       };
       document.body.addEventListener('render-html', renderHtml, false);
-      document.body.addEventListener('render-content', renderContent, false);
+      window.addEventListener('render-content', renderContent, false);
       return () => {
         document.body.removeEventListener('render-html', renderHtml, false);
-        document.body.removeEventListener('render-content', renderContent, false);
+        window.removeEventListener('render-content', renderContent, false);
       };
     }
   }, [context]);
@@ -58900,6 +58900,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 if (typeof window !== 'undefined' && 'customElements' in window) {
+  const contents = 'contents';
   /**
    * This is a nice abstraction allowing anyone to actually use the extension system
    * brought by Piral. Not all props of the extension system are actually exposed.
@@ -58980,7 +58981,7 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
       }
     }
     connectedCallback() {
-      this.style.display = 'contents';
+      this.style.display = contents;
       if (this.isConnected) {
         this.dispatchEvent(new CustomEvent('render-html', {
           bubbles: true,
@@ -59027,7 +59028,7 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
    */
   class PiralPortal extends HTMLElement {
     connectedCallback() {
-      this.style.display = 'contents';
+      this.style.display = contents;
     }
   }
   customElements.define(_utils__WEBPACK_IMPORTED_MODULE_3__.portalName, PiralPortal);
@@ -59044,7 +59045,7 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
    */
   class PiralSlot extends HTMLElement {
     connectedCallback() {
-      this.style.display = 'contents';
+      this.style.display = contents;
     }
   }
   customElements.define(_utils__WEBPACK_IMPORTED_MODULE_3__.slotName, PiralSlot);
@@ -59075,13 +59076,13 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
       this.dispose = _utils__WEBPACK_IMPORTED_MODULE_0__.noop;
     }
     connectedCallback() {
-      this.style.display = 'contents';
+      this.style.display = contents;
       const cid = this.getAttribute('cid');
       const content = PiralContent.contentAssignments[cid];
       const portal = this.closest('piral-portal');
       if (content && portal) {
         const portalId = portal.getAttribute('pid');
-        document.body.dispatchEvent(new CustomEvent('render-content', {
+        window.dispatchEvent(new CustomEvent('render-content', {
           detail: {
             target: this,
             content,
@@ -59100,6 +59101,38 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
     PiralContent.contentAssignments[cid] = content;
   };
   customElements.define(_utils__WEBPACK_IMPORTED_MODULE_3__.contentName, PiralContent);
+  /**
+   * This is a virtual element to indicate that the contained content is
+   * rendered from a micro frontend's component. It will be used by the
+   * orchestrator, so there is nothing you will need to do with it.
+   *
+   * Right now this is only used when you opt-in in the createInstance.
+   */
+  class PiralComponent extends HTMLElement {
+    get name() {
+      return this.getAttribute('name');
+    }
+    get origin() {
+      return this.getAttribute('origin');
+    }
+    connectedCallback() {
+      this.style.display = contents;
+      this.deferEvent('add-component');
+    }
+    disconnectedCallback() {
+      this.deferEvent('remove-component');
+    }
+    deferEvent(eventName) {
+      const ev = new CustomEvent(eventName, {
+        detail: {
+          name: this.name,
+          origin: this.origin
+        }
+      });
+      setTimeout(() => window.dispatchEvent(ev), 0);
+    }
+  }
+  customElements.define(_utils__WEBPACK_IMPORTED_MODULE_3__.componentName, PiralComponent);
 }
 function renderElement(context, element, props) {
   if (typeof window !== 'undefined') {
@@ -59316,8 +59349,9 @@ function getWrapper(wrappers, wrapperType) {
   return WrapType || WrapAll || DefaultWrapper;
 }
 function makeWrapper(context, outerProps, wrapperType, errorType) {
+  const wrapped = context.readState(m => m.app.wrap);
   const OuterWrapper = context.readState(m => getWrapper(m.registry.wrappers, wrapperType));
-  return props => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(OuterWrapper, {
+  const Wrapper = props => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(OuterWrapper, {
     ...outerProps,
     ...props
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_2__.ErrorBoundary, {
@@ -59325,6 +59359,11 @@ function makeWrapper(context, outerProps, wrapperType, errorType) {
     ...props,
     errorType: errorType
   }, props.children));
+  return wrapped ? props => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("piral-component", {
+    origin: outerProps.piral.meta.name
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(Wrapper, {
+    ...props
+  })) : Wrapper;
 }
 function withApi(context, component, piral, errorType, wrapperType = errorType, captured = {}) {
   const outerProps = {
@@ -59396,20 +59435,9 @@ function integrateDebugger(context, options, debug = {}) {
     integrate(dbg) {
       context.dispatch(s => ({
         ...s,
-        components: {
-          ...s.components,
-          ...dbg.components
-        },
         routes: {
           ...s.routes,
           ...dbg.routes
-        },
-        registry: {
-          ...s.registry,
-          wrappers: {
-            ...s.registry.wrappers,
-            ...dbg.wrappers
-          }
         }
       }));
       context.state.subscribe((current, previous) => {
@@ -59630,6 +59658,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   attachDomPortal: () => (/* binding */ attachDomPortal),
 /* harmony export */   changeDomPortal: () => (/* binding */ changeDomPortal),
+/* harmony export */   componentName: () => (/* binding */ componentName),
 /* harmony export */   contentName: () => (/* binding */ contentName),
 /* harmony export */   convertComponent: () => (/* binding */ convertComponent),
 /* harmony export */   extensionName: () => (/* binding */ extensionName),
@@ -59643,6 +59672,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 const extensionName = 'piral-extension';
+const componentName = 'piral-component';
 const contentName = 'piral-content';
 const portalName = 'piral-portal';
 const slotName = 'piral-slot';
@@ -60338,35 +60368,6 @@ function createLazyApi() {
 
 /***/ }),
 
-/***/ "../../utilities/piral-debug-utils/esm/DebugTracker.js":
-/*!*************************************************************!*\
-  !*** ../../utilities/piral-debug-utils/esm/DebugTracker.js ***!
-  \*************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   DebugTracker: () => (/* binding */ DebugTracker)
-/* 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 _state__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./state */ "../../utilities/piral-debug-utils/esm/state.js");
-
-
-const DebugTracker = () => {
-  const route = (0,_state__WEBPACK_IMPORTED_MODULE_1__.useDebugState)(s => s.route);
-  react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {
-    if (route) {
-      (0,_state__WEBPACK_IMPORTED_MODULE_1__.navigate)(route.path, route.state);
-    }
-  }, [route]);
-  // tslint:disable-next-line:no-null-keyword
-  return null;
-};
-
-/***/ }),
-
 /***/ "../../utilities/piral-debug-utils/esm/ExtensionCatalogue.js":
 /*!*******************************************************************!*\
   !*** ../../utilities/piral-debug-utils/esm/ExtensionCatalogue.js ***!
@@ -60392,6 +60393,7 @@ const ExtensionCatalogue = () => {
       name = '',
       params = {}
     } = state;
+    // @ts-ignore
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("piral-extension", {
       name: name,
       params: JSON.stringify(params)
@@ -60402,139 +60404,6 @@ const ExtensionCatalogue = () => {
 
 /***/ }),
 
-/***/ "../../utilities/piral-debug-utils/esm/VisualizationWrapper.js":
-/*!*********************************************************************!*\
-  !*** ../../utilities/piral-debug-utils/esm/VisualizationWrapper.js ***!
-  \*********************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   VisualizationWrapper: () => (/* binding */ VisualizationWrapper)
-/* 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 _state__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./state */ "../../utilities/piral-debug-utils/esm/state.js");
-
-
-const moduleColor = {};
-const Visualizer = ({
-  pilet,
-  force,
-  active
-}) => {
-  const colors = ['#001F3F', '#0074D9', '#7FDBFF', '#39CCCC', '#3D9970', '#2ECC40', '#01FF70', '#FFDC00', '#FF851B', '#FF4136', '#85144B', '#F012BE', '#B10DC9'];
-  const container = react__WEBPACK_IMPORTED_MODULE_0__.useRef();
-  const color = react__WEBPACK_IMPORTED_MODULE_0__.useMemo(() => moduleColor[pilet] || (moduleColor[pilet] = colors[Object.keys(moduleColor).length % colors.length]), [pilet]);
-  react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {
-    let sibling = container.current && container.current.nextElementSibling;
-    if (sibling && active) {
-      const target = container.current.parentNode;
-      const mouseIn = () => {
-        if (container.current && sibling) {
-          const style = container.current.style;
-          style.display = 'block';
-          style.left = '0px';
-          style.top = '0px';
-          style.bottom = '0px';
-          style.right = '0px';
-          const targetRect = sibling.getBoundingClientRect();
-          const sourceRect = container.current.getBoundingClientRect();
-          style.left = targetRect.left - sourceRect.left + 'px';
-          style.top = targetRect.top - sourceRect.top + 'px';
-          style.bottom = -(targetRect.bottom - sourceRect.bottom) + 'px';
-          style.right = -(targetRect.right - sourceRect.right) + 'px';
-        }
-      };
-      const mouseOut = () => {
-        if (container.current) {
-          const style = container.current.style;
-          style.display = 'none';
-        }
-      };
-      const append = () => {
-        if (force) {
-          mouseIn();
-        } else if (sibling) {
-          sibling.addEventListener('mouseover', mouseIn);
-          sibling.addEventListener('mouseout', mouseOut);
-        }
-      };
-      const remove = () => {
-        if (force) {
-          mouseOut();
-        } else if (sibling) {
-          sibling.removeEventListener('mouseover', mouseIn);
-          sibling.removeEventListener('mouseout', mouseOut);
-        }
-      };
-      const observer = new MutationObserver(() => {
-        const newSibling = container.current?.nextElementSibling;
-        if (newSibling !== sibling) {
-          remove();
-          sibling = newSibling;
-          append();
-        }
-      });
-      append();
-      observer.observe(target, {
-        childList: true
-      });
-      return () => {
-        remove();
-        observer.disconnect();
-      };
-    }
-  }, [active, force]);
-  if (active) {
-    const rect = {
-      border: '1px solid red',
-      display: 'none',
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      right: 0,
-      left: 0,
-      zIndex: 99999999999,
-      pointerEvents: 'none',
-      borderColor: color
-    };
-    const info = {
-      color: 'white',
-      position: 'absolute',
-      right: 0,
-      top: 0,
-      fontSize: '8px',
-      background: color
-    };
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
-      style: rect,
-      ref: container
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
-      style: info
-    }, pilet));
-  }
-  // tslint:disable-next-line:no-null-keyword
-  return null;
-};
-const VisualizationWrapper = ({
-  piral,
-  children
-}) => {
-  const {
-    active,
-    force
-  } = (0,_state__WEBPACK_IMPORTED_MODULE_1__.useDebugState)(m => m.visualize);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(Visualizer, {
-    pilet: piral.meta.name,
-    force: force,
-    active: active
-  }), children);
-};
-
-/***/ }),
-
 /***/ "../../utilities/piral-debug-utils/esm/debug.js":
 /*!******************************************************!*\
   !*** ../../utilities/piral-debug-utils/esm/debug.js ***!
@@ -60546,16 +60415,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   installPiralDebug: () => (/* binding */ installPiralDebug)
 /* harmony export */ });
-/* harmony import */ var _DebugTracker__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./DebugTracker */ "../../utilities/piral-debug-utils/esm/DebugTracker.js");
-/* harmony import */ var _VisualizationWrapper__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./VisualizationWrapper */ "../../utilities/piral-debug-utils/esm/VisualizationWrapper.js");
 /* harmony import */ var _ExtensionCatalogue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ExtensionCatalogue */ "../../utilities/piral-debug-utils/esm/ExtensionCatalogue.js");
-/* harmony import */ var _decycle__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./decycle */ "../../utilities/piral-debug-utils/esm/decycle.js");
+/* harmony import */ var _decycle__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./decycle */ "../../utilities/piral-debug-utils/esm/decycle.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 installPiralDebug(options) {
   const {
     getGlobalState,
@@ -60579,7 +60446,6 @@ function installPiralDebug(options) {
   const selfSource = 'piral-debug-api';
   const debugApiVersion = 'v1';
   let setValue = _state__WEBPACK_IMPORTED_MODULE_0__.initialSetter;
-  (0,_state__WEBPACK_IMPORTED_MODULE_0__.setInitialState)(initialSettings);
   const settings = {
     ...customSettings,
     viewState: {
@@ -60642,6 +60508,9 @@ function installPiralDebug(options) {
       }
     }
   };
+  if (initialSettings.viewOrigins) {
+    (0,_visualizer__WEBPACK_IMPORTED_MODULE_1__.createVisualizer)();
+  }
   const sendMessage = content => {
     window.postMessage({
       content,
@@ -60720,32 +60589,12 @@ function installPiralDebug(options) {
       });
     }
   };
-  const toggleVisualize = () => {
-    (0,_state__WEBPACK_IMPORTED_MODULE_0__.setState)(s => ({
-      ...s,
-      visualize: {
-        ...s.visualize,
-        force: !s.visualize.force
-      }
-    }));
-  };
   const updateVisualize = active => {
-    (0,_state__WEBPACK_IMPORTED_MODULE_0__.setState)(s => ({
-      ...s,
-      visualize: {
-        ...s.visualize,
-        active
-      }
-    }));
-  };
-  const goToRoute = (path, state) => {
-    (0,_state__WEBPACK_IMPORTED_MODULE_0__.setState)(s => ({
-      ...s,
-      route: {
-        path,
-        state
-      }
-    }));
+    if (active) {
+      (0,_visualizer__WEBPACK_IMPORTED_MODULE_1__.createVisualizer)();
+    } else {
+      (0,_visualizer__WEBPACK_IMPORTED_MODULE_1__.destroyVisualizer)();
+    }
   };
   const eventDispatcher = document.body.dispatchEvent;
   const systemResolve = System.constructor.prototype.resolve;
@@ -60777,12 +60626,12 @@ function installPiralDebug(options) {
     debug: debugApiVersion,
     instance: {
       name: "sample-cross-fx",
-      version: "1.4.0-beta.6276",
+      version: "1.4.0-beta.6287",
       dependencies: "@angular/common,@angular/compiler,@angular/core,@angular/platform-browser,@angular/platform-browser-dynamic,@webcomponents/webcomponentsjs,angular,aurelia-framework,aurelia-templating-binding,aurelia-templating-resources,aurelia-pal-browser,aurelia-event-aggregator,aurelia-history-browser,hyperapp,inferno,inferno-create-element,mithril,lit-element,solid-js,solid-js/web,piral-ng/common,preact,riot,rxjs,vue,zone.js,tslib,react,react-dom,react-router,react-router-dom"
     },
     build: {
-      date: "2023-11-29T10:05:04.657Z",
-      cli: "1.4.0-beta.6276",
+      date: "2023-12-01T10:56:35.478Z",
+      cli: "1.4.0-beta.6287",
       compat: "1"
     }
   };
@@ -60794,7 +60643,7 @@ function installPiralDebug(options) {
     capabilities: ['events', 'container', 'routes', 'pilets', 'settings', 'extensions', 'dependencies', 'dependency-map']
   };
   const start = () => {
-    const container = (0,_decycle__WEBPACK_IMPORTED_MODULE_1__.decycle)(getGlobalState());
+    const container = (0,_decycle__WEBPACK_IMPORTED_MODULE_2__.decycle)(getGlobalState());
     const routes = getRoutes().filter(r => !excludedRoutes.includes(r));
     const extensions = getExtensions();
     const settings = getSettings();
@@ -60865,7 +60714,7 @@ function installPiralDebug(options) {
       events.unshift({
         id: events.length.toString(),
         name: ev.type.replace('piral-', ''),
-        args: (0,_decycle__WEBPACK_IMPORTED_MODULE_1__.decycle)(ev.detail.arg),
+        args: (0,_decycle__WEBPACK_IMPORTED_MODULE_2__.decycle)(ev.detail.arg),
         time: Date.now()
       });
       sendMessage({
@@ -60913,23 +60762,16 @@ function installPiralDebug(options) {
         case 'emit-event':
           return fireEvent(content.name, content.args);
         case 'goto-route':
-          return goToRoute(content.route, content.state);
+          return navigate(content.route, content.state);
         case 'visualize-all':
-          return toggleVisualize();
+          return (0,_visualizer__WEBPACK_IMPORTED_MODULE_1__.toggleVisualizer)();
       }
     }
   });
-  (0,_state__WEBPACK_IMPORTED_MODULE_0__.setNavigate)(navigate);
   integrate({
-    components: {
-      Debug: _DebugTracker__WEBPACK_IMPORTED_MODULE_2__.DebugTracker
-    },
     routes: {
       [initialSettings.cataloguePath]: _ExtensionCatalogue__WEBPACK_IMPORTED_MODULE_3__.ExtensionCatalogue
     },
-    wrappers: {
-      '*': _VisualizationWrapper__WEBPACK_IMPORTED_MODULE_4__.VisualizationWrapper
-    },
     onChange(previous, current, changed) {
       if (changed.state) {
         if (settings.viewState.value) {
@@ -60952,7 +60794,7 @@ function installPiralDebug(options) {
         }
         sendMessage({
           type: 'container',
-          container: (0,_decycle__WEBPACK_IMPORTED_MODULE_1__.decycle)(getGlobalState())
+          container: (0,_decycle__WEBPACK_IMPORTED_MODULE_2__.decycle)(getGlobalState())
         });
       }
       if (changed.pilets) {
@@ -61173,19 +61015,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   disablePersistance: () => (/* binding */ disablePersistance),
 /* harmony export */   enablePersistance: () => (/* binding */ enablePersistance),
 /* harmony export */   getInitialSettings: () => (/* binding */ getInitialSettings),
-/* harmony export */   getState: () => (/* binding */ getState),
 /* harmony export */   initialSetter: () => (/* binding */ initialSetter),
-/* harmony export */   navigate: () => (/* binding */ navigate),
-/* harmony export */   setInitialState: () => (/* binding */ setInitialState),
-/* harmony export */   setNavigate: () => (/* binding */ setNavigate),
-/* harmony export */   setState: () => (/* binding */ setState),
-/* harmony export */   settingsKeys: () => (/* binding */ settingsKeys),
-/* harmony export */   subscribe: () => (/* binding */ subscribe),
-/* harmony export */   useDebugState: () => (/* binding */ useDebugState)
+/* harmony export */   settingsKeys: () => (/* binding */ settingsKeys)
 /* 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__);
-
 const settingsKeys = {
   viewState: 'dbg:view-state',
   loadPilets: 'dbg:load-pilets',
@@ -61258,63 +61090,6 @@ function getInitialSettings(defaultValues) {
     cataloguePath: '/$debug-extension-catalogue'
   };
 }
-const listeners = [];
-let _navigate = undefined;
-function setNavigate(navigate) {
-  _navigate = navigate;
-}
-function navigate(path, state) {
-  _navigate?.(path, state);
-}
-let state = {
-  visualize: {
-    active: false,
-    force: false
-  },
-  catalogue: {
-    active: false,
-    path: ''
-  },
-  route: undefined
-};
-function setInitialState(initialSettings) {
-  state.visualize.active = initialSettings.viewOrigins;
-  state.catalogue.active = initialSettings.extensionCatalogue;
-  state.catalogue.path = initialSettings.cataloguePath;
-}
-function setState(dispatch) {
-  const newState = dispatch(state);
-  if (newState !== state) {
-    state = newState;
-    listeners.forEach(listener => listener());
-  }
-}
-function getState() {
-  return state;
-}
-function subscribe(select, notify) {
-  let prevState = select(state);
-  const cb = () => {
-    const nextState = select(state);
-    if (prevState !== nextState) {
-      prevState = nextState;
-      notify(nextState);
-    }
-  };
-  const unsubscribe = () => {
-    const idx = listeners.indexOf(cb);
-    if (idx !== -1) {
-      listeners.splice(idx, 1);
-    }
-  };
-  listeners.push(cb);
-  return unsubscribe;
-}
-function useDebugState(select) {
-  const [state, setState] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(() => select(getState()));
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => subscribe(select, setState), []);
-  return state;
-}
 
 /***/ }),
 
@@ -61350,6 +61125,153 @@ function useDebugRouteFilter(paths) {
 
 /***/ }),
 
+/***/ "../../utilities/piral-debug-utils/esm/visualizer.js":
+/*!***********************************************************!*\
+  !*** ../../utilities/piral-debug-utils/esm/visualizer.js ***!
+  \***********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   createVisualizer: () => (/* binding */ createVisualizer),
+/* harmony export */   destroyVisualizer: () => (/* binding */ destroyVisualizer),
+/* harmony export */   toggleVisualizer: () => (/* binding */ toggleVisualizer)
+/* harmony export */ });
+const visualizerName = 'piral-inspector-visualizer';
+const persistAttribute = 'persist';
+const piletColorMap = {};
+const colors = ['#001F3F', '#0074D9', '#7FDBFF', '#39CCCC', '#3D9970', '#2ECC40', '#01FF70', '#FFDC00', '#FF851B', '#FF4136', '#85144B', '#F012BE', '#B10DC9'];
+function getTarget(element) {
+  const row = element.childNodes;
+  const rects = Array.prototype.map.call(row, item => {
+    if (item instanceof Element) {
+      return item.getBoundingClientRect();
+    } else if (item instanceof Text) {
+      const range = document.createRange();
+      range.selectNode(item);
+      return range.getBoundingClientRect();
+    } else {
+      return new DOMRectReadOnly(0, 0, 0, 0);
+    }
+  });
+  const relevant = rects.filter(m => m.height !== 0 && m.width !== 0);
+  if (relevant.length === 0) {
+    return new DOMRectReadOnly(0, 0, 0, 0);
+  }
+  return relevant.reduce((a, b) => {
+    const x = Math.min(a.left, b.left);
+    const y = Math.min(a.top, b.top);
+    const width = Math.max(a.right, b.right) - x;
+    const height = Math.max(a.bottom, b.bottom) - y;
+    return new DOMRectReadOnly(x, y, width, height);
+  });
+}
+function hide(vis) {
+  vis.style.opacity = '0';
+  // vis.style.pointerEvents = 'auto';
+}
+
+function show(vis) {
+  vis.style.opacity = '1';
+  // vis.style.pointerEvents = 'none';
+}
+
+function updatePosition(source, vis) {
+  const targetRect = getTarget(source);
+  vis.style.left = targetRect.left + 'px';
+  vis.style.top = targetRect.top + 'px';
+  vis.style.width = targetRect.width + 'px';
+  vis.style.height = targetRect.height + 'px';
+}
+class PiralInspectorVisualizer extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this.update = () => {
+      const persist = this.getAttribute(persistAttribute) !== null;
+      this.innerText = '';
+      document.querySelectorAll('piral-component').forEach(element => {
+        const pilet = element.getAttribute('origin');
+        const vis = this.appendChild(document.createElement('div'));
+        const info = vis.appendChild(document.createElement('div'));
+        vis.style.position = 'absolute';
+        vis.style.zIndex = '2147483647';
+        vis.style.border = '1px solid #ccc';
+        vis.style.pointerEvents = 'none';
+        info.style.color = 'white';
+        info.textContent = pilet;
+        info.style.position = 'absolute';
+        info.style.right = '0';
+        info.style.top = '0';
+        info.style.fontSize = '8px';
+        info.style.background = piletColorMap[pilet] || (piletColorMap[pilet] = colors[Object.keys(piletColorMap).length % colors.length]);
+        if (!persist) {
+          hide(vis);
+          element.addEventListener('mouseenter', () => {
+            updatePosition(element, vis);
+            show(vis);
+          });
+          element.addEventListener('mouseleave', () => {
+            hide(vis);
+          });
+        } else {
+          updatePosition(element, vis);
+          show(vis);
+        }
+      });
+    };
+  }
+  connectedCallback() {
+    this.style.position = 'absolute';
+    this.style.top = '0';
+    this.style.left = '0';
+    this.style.width = '0';
+    this.style.height = '0';
+    window.addEventListener('resize', this.update);
+    window.addEventListener('add-component', this.update);
+    window.addEventListener('remove-component', this.update);
+    this.update();
+  }
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.update);
+    window.removeEventListener('add-component', this.update);
+    window.removeEventListener('remove-component', this.update);
+  }
+  static get observedAttributes() {
+    return [persistAttribute];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === persistAttribute && oldValue !== newValue) {
+      this.update();
+    }
+  }
+}
+customElements.define(visualizerName, PiralInspectorVisualizer);
+function createVisualizer() {
+  const visualizer = document.querySelector(visualizerName);
+  if (!visualizer) {
+    document.body.appendChild(document.createElement(visualizerName));
+  }
+}
+function destroyVisualizer() {
+  const visualizer = document.querySelector(visualizerName);
+  if (visualizer) {
+    visualizer.remove();
+  }
+}
+function toggleVisualizer() {
+  const visualizer = document.querySelector(visualizerName);
+  if (visualizer) {
+    if (visualizer.getAttribute(persistAttribute) !== null) {
+      visualizer.removeAttribute(persistAttribute);
+    } else {
+      visualizer.setAttribute(persistAttribute, '');
+    }
+  }
+}
+
+/***/ }),
+
 /***/ "../../../node_modules/core-js/internals/a-callable.js":
 /*!*************************************************************!*\
   !*** ../../../node_modules/core-js/internals/a-callable.js ***!
@@ -72390,7 +72312,7 @@ __webpack_require__.r(__webpack_exports__);
 
     
     function fillDependencies(deps) {
-      deps['sample-cross-fx']={};deps["@angular/common"]=_node_modules_angular_common_fesm2022_common_mjs__WEBPACK_IMPORTED_MODULE_19__;deps["@angular/common@16.2.9"]=_node_modules_angular_common_fesm2022_common_mjs__WEBPACK_IMPORTED_MODULE_19__;deps["@angular/compiler"]=_node_modules_angular_compiler_fesm2022_compiler_mjs__WEBPACK_IMPORTED_MODULE_0__;deps["@angular/compiler@16.2.9"]=_node_modules_angular_compiler_fesm2022_compiler_mjs__WEBPACK_IMPORTED_MODULE_0__;deps["@angular/core"]=_node_modules_angular_core_fesm2022_core_mjs__WEBPACK_IMPORTED_MODULE_20__;deps["@angular/core@16.2.9"]=_node_modules_angular_core_fesm2022_core_mjs__WEBPACK_IMPORTED_MODULE_20__;deps["@angular/platform-browser"]=_node_modules_angular_platform_browser_fesm2022_platform_browser_mjs__WEBPACK_IMPORTED_MODULE_21__;deps["@angular/platform-browser@16.2.9"]=_node_modules_angular_platform_browser_fesm2022_platform_browser_mjs__WEBPACK_IMPORTED_MODULE_21__;deps["@angular/platform-browser-dynamic"]=_node_modules_angular_platform_browser_dynamic_fesm2022_platform_browser_dynamic_mjs__WEBPACK_IMPORTED_MODULE_22__;deps["@angular/platform-browser-dynamic@16.2.9"]=_node_modules_angular_platform_browser_dynamic_fesm2022_platform_browser_dynamic_mjs__WEBPACK_IMPORTED_MODULE_22__;deps["@webcomponents/webcomponentsjs"]=_node_modules_webcomponents_webcomponentsjs_webcomponents_bundle_js__WEBPACK_IMPORTED_MODULE_1__;deps["@webcomponents/webcomponentsjs@2.6.0"]=_node_modules_webcomponents_webcomponentsjs_webcomponents_bundle_js__WEBPACK_IMPORTED_MODULE_1__;deps["angular"]=_node_modules_angular_index_js__WEBPACK_IMPORTED_MODULE_2__;deps["angular@1.8.3"]=_node_modules_angular_index_js__WEBPACK_IMPORTED_MODULE_2__;deps["aurelia-framework"]=_node_modules_aurelia_framework_dist_native_modules_aurelia_framework_js__WEBPACK_IMPORTED_MODULE_3__;deps["aurelia-framework@1.4.1"]=_node_modules_aurelia_framework_dist_native_modules_aurelia_framework_js__WEBPACK_IMPORTED_MODULE_3__;deps["aurelia-templating-binding"]=_samples_sample_cross_fx_node_modules_aurelia_templating_binding_dist_native_modules_aurelia_templating_binding_js__WEBPACK_IMPORTED_MODULE_4__;deps["aurelia-templating-binding@1.6.0"]=_samples_sample_cross_fx_node_modules_aurelia_templating_binding_dist_native_modules_aurelia_templating_binding_js__WEBPACK_IMPORTED_MODULE_4__;deps["aurelia-templating-resources"]=_samples_sample_cross_fx_node_modules_aurelia_templating_resources_dist_native_modules_aurelia_templating_resources_js__WEBPACK_IMPORTED_MODULE_5__;deps["aurelia-templating-resources@1.14.3"]=_samples_sample_cross_fx_node_modules_aurelia_templating_resources_dist_native_modules_aurelia_templating_resources_js__WEBPACK_IMPORTED_MODULE_5__;deps["aurelia-pal-browser"]=_node_modules_aurelia_pal_browser_dist_es2015_aurelia_pal_browser_js__WEBPACK_IMPORTED_MODULE_6__;deps["aurelia-pal-browser@1.8.1"]=_node_modules_aurelia_pal_browser_dist_es2015_aurelia_pal_browser_js__WEBPACK_IMPORTED_MODULE_6__;deps["aurelia-event-aggregator"]=_node_modules_aurelia_event_aggregator_dist_native_modules_aurelia_event_aggregator_js__WEBPACK_IMPORTED_MODULE_7__;deps["aurelia-event-aggregator@1.0.3"]=_node_modules_aurelia_event_aggregator_dist_native_modules_aurelia_event_aggregator_js__WEBPACK_IMPORTED_MODULE_7__;deps["aurelia-history-browser"]=_node_modules_aurelia_history_browser_dist_native_modules_aurelia_history_browser_js__WEBPACK_IMPORTED_MODULE_8__;deps["aurelia-history-browser@1.4.0"]=_node_modules_aurelia_history_browser_dist_native_modules_aurelia_history_browser_js__WEBPACK_IMPORTED_MODULE_8__;deps["hyperapp"]=_node_modules_hyperapp_src_index_js__WEBPACK_IMPORTED_MODULE_9__;deps["hyperapp@1.2.10"]=_node_modules_hyperapp_src_index_js__WEBPACK_IMPORTED_MODULE_9__;deps["inferno"]=_node_modules_inferno_index_esm_js__WEBPACK_IMPORTED_MODULE_10__;deps["inferno@7.4.11"]=_node_modules_inferno_index_esm_js__WEBPACK_IMPORTED_MODULE_10__;deps["inferno-create-element"]=_node_modules_inferno_create_element_dist_index_esm_js__WEBPACK_IMPORTED_MODULE_11__;deps["inferno-create-element@7.4.11"]=_node_modules_inferno_create_element_dist_index_esm_js__WEBPACK_IMPORTED_MODULE_11__;deps["mithril"]=_samples_sample_cross_fx_node_modules_mithril_index_js__WEBPACK_IMPORTED_MODULE_12__;deps["mithril@2.2.2"]=_samples_sample_cross_fx_node_modules_mithril_index_js__WEBPACK_IMPORTED_MODULE_12__;deps["lit-element"]=_node_modules_lit_element_lit_element_js__WEBPACK_IMPORTED_MODULE_13__;deps["lit-element@2.5.1"]=_node_modules_lit_element_lit_element_js__WEBPACK_IMPORTED_MODULE_13__;deps["solid-js"]=_node_modules_solid_js_dist_dev_js__WEBPACK_IMPORTED_MODULE_23__;deps["solid-js@1.8.2"]=_node_modules_solid_js_dist_dev_js__WEBPACK_IMPORTED_MODULE_23__;deps["solid-js/web"]=_node_modules_solid_js_web_dist_dev_js__WEBPACK_IMPORTED_MODULE_24__;deps["piral-ng/common"]=_converters_piral_ng_common_js__WEBPACK_IMPORTED_MODULE_25__;deps["piral-ng/common@1.4.0-beta.6276"]=_converters_piral_ng_common_js__WEBPACK_IMPORTED_MODULE_25__;deps["piral-ng@1.4.0-beta.6276"]=_converters_piral_ng_common_js__WEBPACK_IMPORTED_MODULE_25__;deps["preact"]=_node_modules_preact_dist_preact_module_js__WEBPACK_IMPORTED_MODULE_14__;deps["preact@10.18.1"]=_node_modules_preact_dist_preact_module_js__WEBPACK_IMPORTED_MODULE_14__;deps["riot"]=_node_modules_riot_riot_esm_js__WEBPACK_IMPORTED_MODULE_15__;deps["riot@4.14.0"]=_node_modules_riot_riot_esm_js__WEBPACK_IMPORTED_MODULE_15__;deps["rxjs"]=_node_modules_rxjs_dist_esm5_index_js__WEBPACK_IMPORTED_MODULE_26__;deps["rxjs@7.5.6"]=_node_modules_rxjs_dist_esm5_index_js__WEBPACK_IMPORTED_MODULE_26__;deps["vue"]=_node_modules_vue_dist_vue_runtime_esm_js__WEBPACK_IMPORTED_MODULE_27__;deps["vue@2.7.14"]=_node_modules_vue_dist_vue_runtime_esm_js__WEBPACK_IMPORTED_MODULE_27__;deps["zone.js"]=_node_modules_zone_js_fesm2015_zone_js__WEBPACK_IMPORTED_MODULE_16__;deps["zone.js@0.13.3"]=_node_modules_zone_js_fesm2015_zone_js__WEBPACK_IMPORTED_MODULE_16__;deps["tslib"]=_node_modules_tslib_tslib_es6_js__WEBPACK_IMPORTED_MODULE_28__;deps["tslib@2.5.2"]=_node_modules_tslib_tslib_es6_js__WEBPACK_IMPORTED_MODULE_28__;deps["react"]=_node_modules_react_index_js__WEBPACK_IMPORTED_MODULE_17__;deps["react@18.2.0"]=_node_modules_react_index_js__WEBPACK_IMPORTED_MODULE_17__;deps["react-dom"]=/*#__PURE__*/ (_node_modules_react_dom_index_js__WEBPACK_IMPORTED_MODULE_18___namespace_cache || (_node_modules_react_dom_index_js__WEBPACK_IMPORTED_MODULE_18___namespace_cache = __webpack_require__.t(_node_modules_react_dom_index_js__WEBPACK_IMPORTED_MODULE_18__, 2)));deps["react-dom@18.2.0"]=/*#__PURE__*/ (_node_modules_react_dom_index_js__WEBPACK_IMPORTED_MODULE_18___namespace_cache || (_node_modules_react_dom_index_js__WEBPACK_IMPORTED_MODULE_18___namespace_cache = __webpack_require__.t(_node_modules_react_dom_index_js__WEBPACK_IMPORTED_MODULE_18__, 2)));deps["react-router"]=_node_modules_react_router_esm_react_router_js__WEBPACK_IMPORTED_MODULE_29__;deps["react-router@5.3.4"]=_node_modules_react_router_esm_react_router_js__WEBPACK_IMPORTED_MODULE_29__;deps["react-router-dom"]=_node_modules_react_router_dom_esm_react_router_dom_js__WEBPACK_IMPORTED_MODULE_30__;deps["react-router-dom@5.3.4"]=_node_modules_react_router_dom_esm_react_router_dom_js__WEBPACK_IMPORTED_MODULE_30__
+      deps['sample-cross-fx']={};deps["@angular/common"]=_node_modules_angular_common_fesm2022_common_mjs__WEBPACK_IMPORTED_MODULE_19__;deps["@angular/common@16.2.9"]=_node_modules_angular_common_fesm2022_common_mjs__WEBPACK_IMPORTED_MODULE_19__;deps["@angular/compiler"]=_node_modules_angular_compiler_fesm2022_compiler_mjs__WEBPACK_IMPORTED_MODULE_0__;deps["@angular/compiler@16.2.9"]=_node_modules_angular_compiler_fesm2022_compiler_mjs__WEBPACK_IMPORTED_MODULE_0__;deps["@angular/core"]=_node_modules_angular_core_fesm2022_core_mjs__WEBPACK_IMPORTED_MODULE_20__;deps["@angular/core@16.2.9"]=_node_modules_angular_core_fesm2022_core_mjs__WEBPACK_IMPORTED_MODULE_20__;deps["@angular/platform-browser"]=_node_modules_angular_platform_browser_fesm2022_platform_browser_mjs__WEBPACK_IMPORTED_MODULE_21__;deps["@angular/platform-browser@16.2.9"]=_node_modules_angular_platform_browser_fesm2022_platform_browser_mjs__WEBPACK_IMPORTED_MODULE_21__;deps["@angular/platform-browser-dynamic"]=_node_modules_angular_platform_browser_dynamic_fesm2022_platform_browser_dynamic_mjs__WEBPACK_IMPORTED_MODULE_22__;deps["@angular/platform-browser-dynamic@16.2.9"]=_node_modules_angular_platform_browser_dynamic_fesm2022_platform_browser_dynamic_mjs__WEBPACK_IMPORTED_MODULE_22__;deps["@webcomponents/webcomponentsjs"]=_node_modules_webcomponents_webcomponentsjs_webcomponents_bundle_js__WEBPACK_IMPORTED_MODULE_1__;deps["@webcomponents/webcomponentsjs@2.6.0"]=_node_modules_webcomponents_webcomponentsjs_webcomponents_bundle_js__WEBPACK_IMPORTED_MODULE_1__;deps["angular"]=_node_modules_angular_index_js__WEBPACK_IMPORTED_MODULE_2__;deps["angular@1.8.3"]=_node_modules_angular_index_js__WEBPACK_IMPORTED_MODULE_2__;deps["aurelia-framework"]=_node_modules_aurelia_framework_dist_native_modules_aurelia_framework_js__WEBPACK_IMPORTED_MODULE_3__;deps["aurelia-framework@1.4.1"]=_node_modules_aurelia_framework_dist_native_modules_aurelia_framework_js__WEBPACK_IMPORTED_MODULE_3__;deps["aurelia-templating-binding"]=_samples_sample_cross_fx_node_modules_aurelia_templating_binding_dist_native_modules_aurelia_templating_binding_js__WEBPACK_IMPORTED_MODULE_4__;deps["aurelia-templating-binding@1.6.0"]=_samples_sample_cross_fx_node_modules_aurelia_templating_binding_dist_native_modules_aurelia_templating_binding_js__WEBPACK_IMPORTED_MODULE_4__;deps["aurelia-templating-resources"]=_samples_sample_cross_fx_node_modules_aurelia_templating_resources_dist_native_modules_aurelia_templating_resources_js__WEBPACK_IMPORTED_MODULE_5__;deps["aurelia-templating-resources@1.14.3"]=_samples_sample_cross_fx_node_modules_aurelia_templating_resources_dist_native_modules_aurelia_templating_resources_js__WEBPACK_IMPORTED_MODULE_5__;deps["aurelia-pal-browser"]=_node_modules_aurelia_pal_browser_dist_es2015_aurelia_pal_browser_js__WEBPACK_IMPORTED_MODULE_6__;deps["aurelia-pal-browser@1.8.1"]=_node_modules_aurelia_pal_browser_dist_es2015_aurelia_pal_browser_js__WEBPACK_IMPORTED_MODULE_6__;deps["aurelia-event-aggregator"]=_node_modules_aurelia_event_aggregator_dist_native_modules_aurelia_event_aggregator_js__WEBPACK_IMPORTED_MODULE_7__;deps["aurelia-event-aggregator@1.0.3"]=_node_modules_aurelia_event_aggregator_dist_native_modules_aurelia_event_aggregator_js__WEBPACK_IMPORTED_MODULE_7__;deps["aurelia-history-browser"]=_node_modules_aurelia_history_browser_dist_native_modules_aurelia_history_browser_js__WEBPACK_IMPORTED_MODULE_8__;deps["aurelia-history-browser@1.4.0"]=_node_modules_aurelia_history_browser_dist_native_modules_aurelia_history_browser_js__WEBPACK_IMPORTED_MODULE_8__;deps["hyperapp"]=_node_modules_hyperapp_src_index_js__WEBPACK_IMPORTED_MODULE_9__;deps["hyperapp@1.2.10"]=_node_modules_hyperapp_src_index_js__WEBPACK_IMPORTED_MODULE_9__;deps["inferno"]=_node_modules_inferno_index_esm_js__WEBPACK_IMPORTED_MODULE_10__;deps["inferno@7.4.11"]=_node_modules_inferno_index_esm_js__WEBPACK_IMPORTED_MODULE_10__;deps["inferno-create-element"]=_node_modules_inferno_create_element_dist_index_esm_js__WEBPACK_IMPORTED_MODULE_11__;deps["inferno-create-element@7.4.11"]=_node_modules_inferno_create_element_dist_index_esm_js__WEBPACK_IMPORTED_MODULE_11__;deps["mithril"]=_samples_sample_cross_fx_node_modules_mithril_index_js__WEBPACK_IMPORTED_MODULE_12__;deps["mithril@2.2.2"]=_samples_sample_cross_fx_node_modules_mithril_index_js__WEBPACK_IMPORTED_MODULE_12__;deps["lit-element"]=_node_modules_lit_element_lit_element_js__WEBPACK_IMPORTED_MODULE_13__;deps["lit-element@2.5.1"]=_node_modules_lit_element_lit_element_js__WEBPACK_IMPORTED_MODULE_13__;deps["solid-js"]=_node_modules_solid_js_dist_dev_js__WEBPACK_IMPORTED_MODULE_23__;deps["solid-js@1.8.2"]=_node_modules_solid_js_dist_dev_js__WEBPACK_IMPORTED_MODULE_23__;deps["solid-js/web"]=_node_modules_solid_js_web_dist_dev_js__WEBPACK_IMPORTED_MODULE_24__;deps["piral-ng/common"]=_converters_piral_ng_common_js__WEBPACK_IMPORTED_MODULE_25__;deps["piral-ng/common@1.4.0-beta.6287"]=_converters_piral_ng_common_js__WEBPACK_IMPORTED_MODULE_25__;deps["piral-ng@1.4.0-beta.6287"]=_converters_piral_ng_common_js__WEBPACK_IMPORTED_MODULE_25__;deps["preact"]=_node_modules_preact_dist_preact_module_js__WEBPACK_IMPORTED_MODULE_14__;deps["preact@10.18.1"]=_node_modules_preact_dist_preact_module_js__WEBPACK_IMPORTED_MODULE_14__;deps["riot"]=_node_modules_riot_riot_esm_js__WEBPACK_IMPORTED_MODULE_15__;deps["riot@4.14.0"]=_node_modules_riot_riot_esm_js__WEBPACK_IMPORTED_MODULE_15__;deps["rxjs"]=_node_modules_rxjs_dist_esm5_index_js__WEBPACK_IMPORTED_MODULE_26__;deps["rxjs@7.5.6"]=_node_modules_rxjs_dist_esm5_index_js__WEBPACK_IMPORTED_MODULE_26__;deps["vue"]=_node_modules_vue_dist_vue_runtime_esm_js__WEBPACK_IMPORTED_MODULE_27__;deps["vue@2.7.14"]=_node_modules_vue_dist_vue_runtime_esm_js__WEBPACK_IMPORTED_MODULE_27__;deps["zone.js"]=_node_modules_zone_js_fesm2015_zone_js__WEBPACK_IMPORTED_MODULE_16__;deps["zone.js@0.13.3"]=_node_modules_zone_js_fesm2015_zone_js__WEBPACK_IMPORTED_MODULE_16__;deps["tslib"]=_node_modules_tslib_tslib_es6_js__WEBPACK_IMPORTED_MODULE_28__;deps["tslib@2.5.2"]=_node_modules_tslib_tslib_es6_js__WEBPACK_IMPORTED_MODULE_28__;deps["react"]=_node_modules_react_index_js__WEBPACK_IMPORTED_MODULE_17__;deps["react@18.2.0"]=_node_modules_react_index_js__WEBPACK_IMPORTED_MODULE_17__;deps["react-dom"]=/*#__PURE__*/ (_node_modules_react_dom_index_js__WEBPACK_IMPORTED_MODULE_18___namespace_cache || (_node_modules_react_dom_index_js__WEBPACK_IMPORTED_MODULE_18___namespace_cache = __webpack_require__.t(_node_modules_react_dom_index_js__WEBPACK_IMPORTED_MODULE_18__, 2)));deps["react-dom@18.2.0"]=/*#__PURE__*/ (_node_modules_react_dom_index_js__WEBPACK_IMPORTED_MODULE_18___namespace_cache || (_node_modules_react_dom_index_js__WEBPACK_IMPORTED_MODULE_18___namespace_cache = __webpack_require__.t(_node_modules_react_dom_index_js__WEBPACK_IMPORTED_MODULE_18__, 2)));deps["react-router"]=_node_modules_react_router_esm_react_router_js__WEBPACK_IMPORTED_MODULE_29__;deps["react-router@5.3.4"]=_node_modules_react_router_esm_react_router_js__WEBPACK_IMPORTED_MODULE_29__;deps["react-router-dom"]=_node_modules_react_router_dom_esm_react_router_dom_js__WEBPACK_IMPORTED_MODULE_30__;deps["react-router-dom@5.3.4"]=_node_modules_react_router_dom_esm_react_router_dom_js__WEBPACK_IMPORTED_MODULE_30__
     }
   
 
@@ -72405,6 +72327,7 @@ __webpack_require__.r(__webpack_exports__);
         app: {
           error: undefined,
           loading: typeof window !== 'undefined',
+          wrap: true,
         },
         components: {
           ErrorInfo: piral_core_defaults_DefaultErrorInfo__WEBPACK_IMPORTED_MODULE_32__.DefaultErrorInfo,
@@ -227519,4 +227442,4 @@ root.render( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(piral
 
 /******/ })()
 ;
-//# sourceMappingURL=index.4c2e13.js.map
+//# sourceMappingURL=index.36982e.js.map