sample-cross-fx 1.4.0-beta.6280 → 1.4.0-beta.6288

package/app/{index.006469.js → index.d100bd.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.6280",
+      version: "1.4.0-beta.6288",
       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-29T17:14:43.887Z",
-      cli: "1.4.0-beta.6280",
+      date: "2023-12-01T20:16:06.443Z",
+      cli: "1.4.0-beta.6288",
       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.6280"]=_converters_piral_ng_common_js__WEBPACK_IMPORTED_MODULE_25__;deps["piral-ng@1.4.0-beta.6280"]=_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.6288"]=_converters_piral_ng_common_js__WEBPACK_IMPORTED_MODULE_25__;deps["piral-ng@1.4.0-beta.6288"]=_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,
@@ -219522,21 +219445,21 @@ __webpack_require__.r(__webpack_exports__);
   }
   var systemJSPrototype = SystemJS.prototype;
   systemJSPrototype.import = function (id, parentUrl, meta) {
-    var loader7 = this;
+    var loader8 = this;
     parentUrl && typeof parentUrl === "object" && (meta = parentUrl, parentUrl = void 0);
-    return Promise.resolve(loader7.prepareImport()).then(function () {
-      return loader7.resolve(id, parentUrl, meta);
+    return Promise.resolve(loader8.prepareImport()).then(function () {
+      return loader8.resolve(id, parentUrl, meta);
     }).then(function (id2) {
-      var load = getOrCreateLoad(loader7, id2, void 0, meta);
-      return load.C || topLevelLoad(loader7, load);
+      var load = getOrCreateLoad(loader8, id2, void 0, meta);
+      return load.C || topLevelLoad(loader8, load);
     });
   };
   systemJSPrototype.createContext = function (parentId) {
-    var loader7 = this;
+    var loader8 = this;
     return {
       url: parentId,
       resolve: function (id, parentUrl) {
-        return Promise.resolve(loader7.resolve(id, parentUrl || parentId));
+        return Promise.resolve(loader8.resolve(id, parentUrl || parentId));
       }
     };
   };
@@ -219544,8 +219467,8 @@ __webpack_require__.r(__webpack_exports__);
   function loadToId(load) {
     return load.id;
   }
-  function triggerOnload(loader7, load, err, isErrSource) {
-    loader7.onload(err, load.id, load.d && load.d.map(loadToId), !!isErrSource);
+  function triggerOnload(loader8, load, err, isErrSource) {
+    loader8.onload(err, load.id, load.d && load.d.map(loadToId), !!isErrSource);
     if (err) throw err;
   }
   var lastRegister;
@@ -219557,8 +219480,8 @@ __webpack_require__.r(__webpack_exports__);
     lastRegister = void 0;
     return _lastRegister;
   };
-  function getOrCreateLoad(loader7, id, firstParentUrl, meta) {
-    var load = loader7[REGISTRY][id];
+  function getOrCreateLoad(loader8, id, firstParentUrl, meta) {
+    var load = loader8[REGISTRY][id];
     if (load) return load;
     var importerSetters = [];
     var ns = Object.create(null);
@@ -219566,7 +219489,7 @@ __webpack_require__.r(__webpack_exports__);
       value: "Module"
     });
     var instantiatePromise = Promise.resolve().then(function () {
-      return loader7.instantiate(id, firstParentUrl, meta);
+      return loader8.instantiate(id, firstParentUrl, meta);
     }).then(function (registration) {
       if (!registration) throw Error(errMsg(2, "Module " + id + " did not instantiate"));
       function _export(name, value) {
@@ -219597,24 +219520,24 @@ __webpack_require__.r(__webpack_exports__);
       }
       var declared = registration[1](_export, registration[1].length === 2 ? {
         import: function (importId, meta2) {
-          return loader7.import(importId, id, meta2);
+          return loader8.import(importId, id, meta2);
         },
-        meta: loader7.createContext(id)
+        meta: loader8.createContext(id)
       } : void 0);
       load.e = declared.execute || function () {};
       return [registration[0], declared.setters || [], registration[2] || []];
     }, function (err) {
       load.e = null;
       load.er = err;
-      triggerOnload(loader7, load, err, true);
+      triggerOnload(loader8, load, err, true);
       throw err;
     });
     var linkPromise = instantiatePromise.then(function (instantiation) {
       return Promise.all(instantiation[0].map(function (dep, i) {
         var setter = instantiation[1][i];
         var meta2 = instantiation[2][i];
-        return Promise.resolve(loader7.resolve(dep, id)).then(function (depId) {
-          var depLoad = getOrCreateLoad(loader7, depId, id, meta2);
+        return Promise.resolve(loader8.resolve(dep, id)).then(function (depId) {
+          var depLoad = getOrCreateLoad(loader8, depId, id, meta2);
           return Promise.resolve(depLoad.I).then(function () {
             if (setter) {
               depLoad.i.push(setter);
@@ -219627,7 +219550,7 @@ __webpack_require__.r(__webpack_exports__);
         load.d = depLoads;
       });
     });
-    return load = loader7[REGISTRY][id] = {
+    return load = loader8[REGISTRY][id] = {
       id,
       i: importerSetters,
       n: ns,
@@ -219643,31 +219566,31 @@ __webpack_require__.r(__webpack_exports__);
       p: void 0
     };
   }
-  function instantiateAll(loader7, load, parent, loaded) {
+  function instantiateAll(loader8, load, parent, loaded) {
     if (!loaded[load.id]) {
       loaded[load.id] = true;
       return Promise.resolve(load.L).then(function () {
         if (!load.p || load.p.e === null) load.p = parent;
         return Promise.all(load.d.map(function (dep) {
-          return instantiateAll(loader7, dep, parent, loaded);
+          return instantiateAll(loader8, dep, parent, loaded);
         }));
       }).catch(function (err) {
         if (load.er) throw err;
         load.e = null;
-        triggerOnload(loader7, load, err, false);
+        triggerOnload(loader8, load, err, false);
         throw err;
       });
     }
   }
-  function topLevelLoad(loader7, load) {
-    return load.C = instantiateAll(loader7, load, load, {}).then(function () {
-      return postOrderExec(loader7, load, {});
+  function topLevelLoad(loader8, load) {
+    return load.C = instantiateAll(loader8, load, load, {}).then(function () {
+      return postOrderExec(loader8, load, {});
     }).then(function () {
       return load.n;
     });
   }
   var nullContext = Object.freeze(Object.create(null));
-  function postOrderExec(loader7, load, seen) {
+  function postOrderExec(loader8, load, seen) {
     if (seen[load.id]) return;
     seen[load.id] = true;
     if (!load.e) {
@@ -219680,11 +219603,11 @@ __webpack_require__.r(__webpack_exports__);
     var depLoadPromises;
     load.d.forEach(function (depLoad) {
       try {
-        var depLoadPromise = postOrderExec(loader7, depLoad, seen);
+        var depLoadPromise = postOrderExec(loader8, depLoad, seen);
         if (depLoadPromise) (depLoadPromises = depLoadPromises || []).push(depLoadPromise);
       } catch (err) {
         load.er = err;
-        triggerOnload(loader7, load, err, false);
+        triggerOnload(loader8, load, err, false);
         throw err;
       }
     });
@@ -219697,11 +219620,11 @@ __webpack_require__.r(__webpack_exports__);
           execPromise = execPromise.then(function () {
             load.C = load.n;
             load.E = null;
-            if (true) triggerOnload(loader7, load, null, true);
+            if (true) triggerOnload(loader8, load, null, true);
           }, function (err) {
             load.er = err;
             load.E = null;
-            if (true) triggerOnload(loader7, load, err, true);
+            if (true) triggerOnload(loader8, load, err, true);
             throw err;
           });
           return load.E = execPromise;
@@ -219712,7 +219635,7 @@ __webpack_require__.r(__webpack_exports__);
         load.er = err;
         throw err;
       } finally {
-        triggerOnload(loader7, load, load.er, true);
+        triggerOnload(loader8, load, load.er, true);
       }
     }
   }
@@ -219812,10 +219735,10 @@ __webpack_require__.r(__webpack_exports__);
       if (lastScript) {
         lastScript.src;
         lastAutoImportDeps = deps;
-        var loader7 = this;
+        var loader8 = this;
         lastAutoImportTimeout = setTimeout(function () {
           autoImportCandidates[lastScript.src] = [deps, declare];
-          loader7.import(lastScript.src);
+          loader8.import(lastScript.src);
         });
       }
     } else {
@@ -219830,7 +219753,7 @@ __webpack_require__.r(__webpack_exports__);
       delete autoImportCandidates[url];
       return autoImportRegistration;
     }
-    var loader7 = this;
+    var loader8 = this;
     return Promise.resolve(systemJSPrototype.createScript(url)).then(function (script) {
       return new Promise(function (resolve, reject) {
         script.addEventListener("error", function () {
@@ -219841,7 +219764,7 @@ __webpack_require__.r(__webpack_exports__);
           if (lastWindowErrorUrl === url) {
             reject(lastWindowError);
           } else {
-            var register = loader7.getRegister(url);
+            var register = loader8.getRegister(url);
             if (register && register[0] === lastAutoImportDeps) clearTimeout(lastAutoImportTimeout);
             resolve(register);
           }
@@ -219857,7 +219780,7 @@ __webpack_require__.r(__webpack_exports__);
   var instantiate = systemJSPrototype.instantiate;
   var jsContentTypeRegEx = /^(text|application)\/(x-)?javascript(;|$)/;
   systemJSPrototype.instantiate = function (url, parent, meta) {
-    var loader7 = this;
+    var loader8 = this;
     if (!this.shouldFetch(url, parent, meta)) return instantiate.apply(this, arguments);
     return this.fetch(url, {
       credentials: "same-origin",
@@ -219870,7 +219793,7 @@ __webpack_require__.r(__webpack_exports__);
       return res.text().then(function (source) {
         if (source.indexOf("//# sourceURL=") < 0) source += "\n//# sourceURL=" + url;
         (0, eval)(source);
-        return loader7.getRegister(url);
+        return loader8.getRegister(url);
       });
     });
   };
@@ -219890,10 +219813,10 @@ __webpack_require__.r(__webpack_exports__);
     return systemInstantiate.call(this, url, firstParentUrl, meta);
   };
   if (hasSelf && typeof importScripts === "function") systemJSPrototype.instantiate = function (url) {
-    var loader7 = this;
+    var loader8 = this;
     return Promise.resolve().then(function () {
       importScripts(url);
-      return loader7.getRegister(url);
+      return loader8.getRegister(url);
     });
   };
   (function (global2) {
@@ -220080,14 +220003,14 @@ __webpack_require__.r(__webpack_exports__);
   };
   var iterator = typeof Symbol !== "undefined" && Symbol.iterator;
   systemJSPrototype.entries = function () {
-    var loader7 = this,
-      keys = Object.keys(loader7[REGISTRY]);
+    var loader8 = this,
+      keys = Object.keys(loader8[REGISTRY]);
     var index = 0,
       ns,
       key;
     var result = {
       next: function () {
-        while ((key = keys[index++]) !== void 0 && (ns = loader7.get(key)) === void 0);
+        while ((key = keys[index++]) !== void 0 && (ns = loader8.get(key)) === void 0);
         return {
           done: key === void 0,
           value: key !== void 0 && [key, ns]
@@ -220571,6 +220494,8 @@ function inspectPilet(meta) {
   const inBrowser = typeof document !== "undefined";
   if ("link" in meta && meta.spec === "v3") {
     return ["v3", meta, setupSinglePilet];
+  } else if (inBrowser && "link" in meta && meta.spec === "mf") {
+    return ["mf", meta, setupSinglePilet];
   } else if (inBrowser && "link" in meta && meta.spec === "v2") {
     return ["v2", meta, setupSinglePilet];
   } else if (inBrowser && "requireRef" in meta && meta.spec !== "v2") {
@@ -220672,9 +220597,9 @@ function loader2(entry, _config) {
   const {
     name,
     spec = "vx",
-    dependencies = {},
     ...rest
   } = entry;
+  const dependencies = "dependencies" in entry ? entry.dependencies : {};
   const meta = {
     name,
     version: "",
@@ -220799,6 +220724,64 @@ function loader6(entry, _config) {
   return loadSystemPilet(link).then(app => createEvaluatedPilet(meta, app));
 }
 
+// src/loaders/mf/index.ts
+var appShell = "piral";
+function populateKnownDependencies(scope) {
+  for (const [entry] of System.entries()) {
+    const index = entry.lastIndexOf("@");
+    if (index > 0 && !entry.match(/^https?:\/\//)) {
+      const entryName = entry.substring(0, index);
+      const entryVersion = entry.substring(index + 1);
+      if (!(entryName in scope)) {
+        scope[entryName] = {};
+      }
+      scope[entryName][entryVersion] = {
+        from: appShell,
+        eager: false,
+        get: () => System.import(entry).then(result => () => result)
+      };
+    }
+  }
+}
+function extractSharedDependencies(scope) {
+  for (const entryName of Object.keys(scope)) {
+    const entries = scope[entryName];
+    for (const entryVersion of Object.keys(entries)) {
+      const entry = entries[entryVersion];
+      if (entry.from !== appShell) {
+        registerModule(`${entryName}@${entryVersion}`, () => entry.get().then(factory => factory()));
+      }
+    }
+  }
+}
+function loadMfFactory(piletName, exposedName) {
+  const varName = piletName.replace(/^@/, "").replace("/", "-").replace(/\-/g, "_");
+  const container = window[varName];
+  const scope = {};
+  container.init(scope);
+  populateKnownDependencies(scope);
+  extractSharedDependencies(scope);
+  return container.get(exposedName);
+}
+function loader7(entry, _config) {
+  const {
+    config = {},
+    name,
+    link,
+    ...rest
+  } = entry;
+  const dependencies = {};
+  const exposedName = rest.custom?.exposed || "./pilet";
+  const meta = {
+    name,
+    dependencies,
+    config,
+    link,
+    ...rest
+  };
+  return includeScriptDependency(link).then(() => loadMfFactory(name, exposedName)).then(factory => createEvaluatedPilet(meta, factory()));
+}
+
 // src/loader.ts
 function extendLoader(fallback, specLoaders) {
   if (typeof specLoaders === "object" && specLoaders) {
@@ -220826,6 +220809,8 @@ function getDefaultLoader(config = {}) {
         return loader4(r[1], config);
       case "v0":
         return loader3(r[1], config);
+      case "mf":
+        return loader7(r[1], config);
       case "bundle":
         return loader(r[1], config);
       default:
@@ -227519,4 +227504,4 @@ root.render( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(piral
 
 /******/ })()
 ;
-//# sourceMappingURL=index.006469.js.map
+//# sourceMappingURL=index.d100bd.js.map