@micro-lc/preview 0.4.1 → 0.5.0-rc1

package/website/development/{assets/index-7a3e0004.js → index.js}

@@ -298,18 +298,20 @@ var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof win
       iframe.style.display = "none";
       iframe.setAttribute("nonce", nonce);
       function cb({ data }) {
-        if (Array.isArray(data)) {
-          supportsImportMaps = data[0];
-          supportsImportMeta = data[1];
-          supportsCssAssertions = data[2];
-          supportsJsonAssertions = data[3];
+        const isFeatureDetectionMessage = Array.isArray(data) && data[0] === "esms";
+        if (!isFeatureDetectionMessage) {
+          return;
         }
+        supportsImportMaps = data[1];
+        supportsImportMeta = data[2];
+        supportsCssAssertions = data[3];
+        supportsJsonAssertions = data[4];
         resolve2();
         document.head.removeChild(iframe);
         window.removeEventListener("message", cb, false);
       }
       window.addEventListener("message", cb, false);
-      const importMapTest = `<script nonce=${nonce || ""}>b=(s,type='text/javascript')=>URL.createObjectURL(new Blob([s],{type}));document.head.appendChild(Object.assign(document.createElement('script'),{type:'importmap',nonce:"${nonce}",innerText:\`{"imports":{"x":"\${b('')}"}}\`}));Promise.all([${supportsImportMaps ? "true,true" : `'x',b('${importMetaCheck}')`}, ${cssModulesEnabled ? `b('${cssModulesCheck}'.replace('x',b('','text/css')))` : "false"}, ${jsonModulesEnabled ? `b('${jsonModulesCheck}'.replace('x',b('{}','text/json')))` : "false"}].map(x =>typeof x==='string'?import(x).then(x =>!!x,()=>false):x)).then(a=>parent.postMessage(a,'*'))<${""}/script>`;
+      const importMapTest = `<script nonce=${nonce || ""}>b=(s,type='text/javascript')=>URL.createObjectURL(new Blob([s],{type}));document.head.appendChild(Object.assign(document.createElement('script'),{type:'importmap',nonce:"${nonce}",innerText:\`{"imports":{"x":"\${b('')}"}}\`}));Promise.all([${supportsImportMaps ? "true,true" : `'x',b('${importMetaCheck}')`}, ${cssModulesEnabled ? `b('${cssModulesCheck}'.replace('x',b('','text/css')))` : "false"}, ${jsonModulesEnabled ? `b('${jsonModulesCheck}'.replace('x',b('{}','text/json')))` : "false"}].map(x =>typeof x==='string'?import(x).then(x =>!!x,()=>false):x)).then(a=>parent.postMessage(['esms'].concat(a),'*'))<${""}/script>`;
       let readyForOnload = false, onloadCalledWhileNotReady = false;
       function doOnload() {
         if (!readyForOnload) {
@@ -3264,6 +3266,13 @@ var observable = function() {
 function identity(x2) {
   return x2;
 }
+function pipe() {
+  var fns = [];
+  for (var _i = 0; _i < arguments.length; _i++) {
+    fns[_i] = arguments[_i];
+  }
+  return pipeFromArray(fns);
+}
 function pipeFromArray(fns) {
   if (fns.length === 0) {
     return identity;
@@ -3867,6 +3876,9 @@ function isScheduler(value) {
 function last(arr) {
   return arr[arr.length - 1];
 }
+function popResultSelector(args) {
+  return isFunction(last(args)) ? args.pop() : void 0;
+}
 function popScheduler(args) {
   return isScheduler(last(args)) ? args.pop() : void 0;
 }
@@ -4274,6 +4286,58 @@ function map(project, thisArg) {
     }));
   });
 }
+var isArray$1 = Array.isArray;
+function callOrApply(fn, args) {
+  return isArray$1(args) ? fn.apply(void 0, __spreadArray([], __read(args))) : fn(args);
+}
+function mapOneOrManyArgs(fn) {
+  return map(function(args) {
+    return callOrApply(fn, args);
+  });
+}
+function combineLatestInit(observables, scheduler, valueTransform) {
+  if (valueTransform === void 0) {
+    valueTransform = identity;
+  }
+  return function(subscriber) {
+    maybeSchedule(scheduler, function() {
+      var length = observables.length;
+      var values = new Array(length);
+      var active = length;
+      var remainingFirstValues = length;
+      var _loop_1 = function(i3) {
+        maybeSchedule(scheduler, function() {
+          var source = from(observables[i3], scheduler);
+          var hasFirstValue = false;
+          source.subscribe(createOperatorSubscriber(subscriber, function(value) {
+            values[i3] = value;
+            if (!hasFirstValue) {
+              hasFirstValue = true;
+              remainingFirstValues--;
+            }
+            if (!remainingFirstValues) {
+              subscriber.next(valueTransform(values.slice()));
+            }
+          }, function() {
+            if (!--active) {
+              subscriber.complete();
+            }
+          }));
+        }, subscriber);
+      };
+      for (var i2 = 0; i2 < length; i2++) {
+        _loop_1(i2);
+      }
+    }, subscriber);
+  };
+}
+function maybeSchedule(scheduler, execute, subscription) {
+  if (scheduler) {
+    executeSchedule(subscription, scheduler, execute);
+  } else {
+    execute();
+  }
+}
 function mergeInternals(source, subscriber, project, concurrent, onBeforeNext, expand, innerSubScheduler, additionalFinalizer) {
   var buffer = [];
   var active = 0;
@@ -4382,6 +4446,22 @@ function timer(dueTime, intervalOrScheduler, scheduler) {
     }, due);
   });
 }
+function interval(period, scheduler) {
+  if (period === void 0) {
+    period = 0;
+  }
+  if (scheduler === void 0) {
+    scheduler = asyncScheduler;
+  }
+  if (period < 0) {
+    period = 0;
+  }
+  return timer(period, period, scheduler);
+}
+var isArray = Array.isArray;
+function argsOrArgArray(args) {
+  return args.length === 1 && isArray(args[0]) ? args[0] : args;
+}
 function filter(predicate, thisArg) {
   return operate(function(source, subscriber) {
     var index = 0;
@@ -4464,6 +4544,23 @@ function bufferTime(bufferTimeSpan) {
     source.subscribe(bufferTimeSubscriber);
   });
 }
+function combineLatest() {
+  var args = [];
+  for (var _i = 0; _i < arguments.length; _i++) {
+    args[_i] = arguments[_i];
+  }
+  var resultSelector = popResultSelector(args);
+  return resultSelector ? pipe(combineLatest.apply(void 0, __spreadArray([], __read(args))), mapOneOrManyArgs(resultSelector)) : operate(function(source, subscriber) {
+    combineLatestInit(__spreadArray([source], __read(argsOrArgArray(args))))(subscriber);
+  });
+}
+function combineLatestWith() {
+  var otherSources = [];
+  for (var _i = 0; _i < arguments.length; _i++) {
+    otherSources[_i] = arguments[_i];
+  }
+  return combineLatest.apply(void 0, __spreadArray([], __read(otherSources)));
+}
 function concatMap(project, resultSelector) {
   return isFunction(resultSelector) ? mergeMap(project, resultSelector, 1) : mergeMap(project, 1);
 }
@@ -4523,145 +4620,27 @@ function tap(observerOrNext, error2, complete) {
     }));
   }) : identity;
 }
-const DEFAULT_LANGUAGE = "en";
-const localizeText = (input, lang = DEFAULT_LANGUAGE) => {
-  if (typeof input === "string") {
-    return input;
-  }
-  return input == null ? void 0 : input[lang];
-};
-function translateObject(obj) {
-  return Object.entries(obj).reduce((out, [key, value]) => {
-    out[key] = localizeText(value);
-    return out;
-  }, {});
-}
-const noop = (..._args) => {
-};
-const toArray$1 = (input) => Array.isArray(input) ? input : [input];
-const urlMakerFactory = ({ document: { baseURI }, location: { href } }) => (input) => new URL(input, new URL(baseURI, href));
-const toURL = (urlMaker, info) => {
-  let url = info;
-  if (!(info instanceof URL)) {
-    url = urlMaker(typeof info === "string" ? info : info.url);
-  }
-  return url;
-};
-const trimLocationOrigin = (origin, url) => {
-  const { href, origin: linkOrigin } = url;
-  if (origin === linkOrigin) {
-    return href.substring(origin.length);
-  }
-  return href;
-};
-const getElement = (document2, context, nth = 0) => {
-  const { selectors } = context;
-  return document2.querySelector(selectors[nth]);
-};
-function getElementBySelector(selector) {
-  return document.querySelector(selector);
-}
-const unfocus = (element, mapping) => {
-  const originalStyle = mapping.get(element);
-  if (originalStyle) {
-    const { css, rest, subscription } = originalStyle;
-    rest.forEach((el) => {
-      var _a2;
-      return (_a2 = el.__unfocus_handler) == null ? void 0 : _a2.call(el);
-    });
-    subscription.unsubscribe();
-    originalStyle.elementToFocus.forEach((el, idx) => {
-      Object.assign(el.style, css[idx]);
-    });
-  }
-  mapping.delete(element);
-};
-const noUndefined = (input) => input !== void 0;
-function focus(document2, obs$, mode$) {
-  const stylesMap = /* @__PURE__ */ new Map();
-  const getBySelector = getElementBySelector.bind(document2);
-  const subscription = obs$.pipe(
-    pairwise(),
-    tap(([current]) => {
-      var _a2;
-      if (current !== void 0) {
-        const prev = getElement(document2, current);
-        if (prev !== null) {
-          (_a2 = prev.__unfocus_handler) == null ? void 0 : _a2.call(prev);
-          unfocus(prev, stylesMap);
-        }
-      }
-    }),
-    map(([, next]) => next),
-    filter(noUndefined),
-    map((next) => {
-      const [first, ...rest] = next.selectors;
-      const otherElements = rest.reduce((arr, selector) => {
-        var _a2;
-        const el = getBySelector(selector);
-        if (el) {
-          arr.push(el);
-          const result = (_a2 = el.__focus_handler) == null ? void 0 : _a2.call(el);
-          if (result && "then" in result) {
-            result.catch(noop);
-          }
-        }
-        return arr;
-      }, []);
-      return { first, next, otherElements };
-    }),
-    map((next) => ({ ...next, firstElement: getBySelector(next.first) })),
-    filter((next) => next.firstElement !== null),
-    map((next) => {
-      var _a2, _b;
-      return { ...next, focus: (_b = (_a2 = next.firstElement).__focus_handler) == null ? void 0 : _b.call(_a2) };
-    }),
-    concatMap(({ focus: focusPromise, ...rest }) => {
-      const promise = focusPromise && "then" in focusPromise ? focusPromise : Promise.resolve(focusPromise != null ? focusPromise : rest.firstElement);
-      return promise.then((focusElement) => ({ focus: focusElement, ...rest })).catch(() => ({ focus: void 0, ...rest }));
-    })
-  ).subscribe(({ otherElements, next, firstElement, focus: focusContext }) => {
-    const cssKeys = Object.keys(next.style);
-    const stylePendingChanges = new Subscription();
-    const elementToFocus = toArray$1(focusContext != null ? focusContext : firstElement).filter(Boolean);
-    const initialStyles = { css: [], elementToFocus, rest: otherElements, subscription: stylePendingChanges };
-    const styles = cssKeys.reduce((acc, key) => {
-      elementToFocus.forEach((el, idx) => {
-        var _a2;
-        acc.css[idx] = Object.assign((_a2 = acc.css[idx]) != null ? _a2 : {}, { [key]: el.style[key] });
-      });
-      return acc;
-    }, initialStyles);
-    stylePendingChanges.add(mode$.pipe(filter((val) => val === "select"), take(1)).subscribe(() => {
-      elementToFocus.forEach((el) => {
-        Object.assign(el.style, next.style);
-      });
-    }));
-    stylesMap.set(firstElement, styles);
-  });
-  return () => subscription.unsubscribe();
-}
-var __defProp$4 = Object.defineProperty;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$4 = (obj, key, value) => {
-  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$5 = Object.defineProperty;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$5 = (obj, key, value) => {
+  __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 let Lexer$1 = class Lexer {
   constructor(input) {
-    __publicField$4(this, "_input");
-    __publicField$4(this, "_length");
-    __publicField$4(this, "_idx", 0);
-    __publicField$4(
+    __publicField$5(this, "_input");
+    __publicField$5(this, "_length");
+    __publicField$5(this, "_idx", 0);
+    __publicField$5(
       this,
       "_mode",
       0
       /* Literal */
     );
-    __publicField$4(this, "_literals", []);
-    __publicField$4(this, "_variables", []);
-    __publicField$4(this, "_braketCount", 0);
-    __publicField$4(this, "_done", false);
+    __publicField$5(this, "_literals", []);
+    __publicField$5(this, "_variables", []);
+    __publicField$5(this, "_braketCount", 0);
+    __publicField$5(this, "_done", false);
     this._input = input;
     this._length = input.length;
   }
@@ -4762,28 +4741,30 @@ function parse(input, context, preserveUnknown = false) {
   return acc;
 }
 const compileObject = (obj, context) => Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, parse(value, context)]));
-var __defProp$3 = Object.defineProperty;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$3 = (obj, key, value) => {
-  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$4 = Object.defineProperty;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => {
+  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 const MIA_PREVIEW_ID = "__mia_preview_id";
 const OVERLAY_Z_INDEX = 1e6;
 const keys = {
-  "click-element": 0,
-  "ctrl-space": 0,
+  "click-element": 1,
+  "ctrl-space": 1,
   "focus-element": 0,
-  mousedown: 0,
+  mousedown: 1,
   mousemove: 1,
   "new-configuration": 0,
-  notification: 0,
-  options: 0,
-  "request-resource": 0,
-  "tag-info": 0,
-  update: 0,
-  updated: 0
-  /* Default */
+  notification: 1,
+  options: 1,
+  "request-resource": 1,
+  "service-worker": 1,
+  "set-source-map": 0,
+  "tag-info": 1,
+  update: 1,
+  updated: 1
+  /* Skip */
 };
 const isValidKey = (type) => Object.keys(keys).includes(type);
 function isInstanceMessage(input, signature) {
@@ -4823,10 +4804,10 @@ const generateDarkColorHex = () => {
 };
 class PostChannel {
   constructor(handler2) {
-    __publicField$3(this, "__instance");
-    __publicField$3(this, "__handler");
-    __publicField$3(this, "__window");
-    __publicField$3(this, "__randomColor");
+    __publicField$4(this, "__instance");
+    __publicField$4(this, "__handler");
+    __publicField$4(this, "__window");
+    __publicField$4(this, "__randomColor");
     this.__instance = "";
     this.__handler = handler2;
     this.__window = window;
@@ -4843,6 +4824,7 @@ class PostChannel {
       const hasTop = this.__window.top !== this.__window;
       console.groupCollapsed(`%c Msg from ${this.__window.origin} ${hasTop ? "(inner)" : "(top)"} `, Object.entries(style).map(([key, val]) => `${key}: ${val}`).join("; "));
       console.info(`window '${this.__window.origin}' is sending a message of type %c ${message.type} `, "background: lightgreen; color: darkgreen");
+      console.log("to", to.document);
       console.log(message.content);
       console.groupEnd();
     }
@@ -4861,16 +4843,260 @@ class PostChannel {
     this.__window !== to && this.postMessage(to, message, origin);
   }
   recv(window2, from2 = null) {
-    const listener2 = ({ data, source }) => {
+    const listener = ({ data, source }) => {
       if ((from2 === null || source === from2) && isInstanceMessage(data, this.__instance)) {
         const message = unsign(this.__instance, data);
         this.__handler(message);
       }
     };
-    window2.addEventListener("message", listener2);
-    return () => window2.removeEventListener("message", listener2);
+    window2.addEventListener("message", listener);
+    return () => window2.removeEventListener("message", listener);
+  }
+}
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => {
+  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+function registerChannels() {
+  return {
+    configuration: new ReplaySubject(),
+    focus: new BehaviorSubject(void 0),
+    infos: new ReplaySubject(),
+    mocks: new ReplaySubject(),
+    mode: new BehaviorSubject("select"),
+    notification: new ReplaySubject(),
+    setSourceMap: new ReplaySubject(),
+    swReady: new ReplaySubject(1),
+    updated: new Subject(),
+    uppercaseTags: /* @__PURE__ */ new Set()
+  };
+}
+const nextMode = (mode) => {
+  let next = 0;
+  const currentValue = mode.getValue();
+  if (currentValue === "interact") {
+    next = "select";
+  } else if (currentValue === "select") {
+    next = "interact";
+  }
+  mode.next(next);
+  return next;
+};
+const subjects = registerChannels();
+function parentListener(message) {
+  switch (message.type) {
+    case "options": {
+      const { content: { disableOverlay, redirectTo, timeout } } = message;
+      if (disableOverlay) {
+        Object.defineProperty(this.window, "__BACKOFFICE_CONFIGURATOR_DISABLE_OVERLAY__", { value: true });
+        subjects.mode.next("interact");
+      }
+      if (timeout !== void 0) {
+        Object.defineProperty(this.window, "__BACKOFFICE_CONFIGURATOR_PREVIEW_TIMEOUT__", { value: timeout });
+      }
+      const { window: { history } } = this;
+      this.window.navigator.serviceWorker.ready.then(() => redirectTo && history.pushState(history.state, "", redirectTo)).catch(() => {
+      });
+      break;
+    }
+    case "ctrl-space":
+      nextMode(subjects.mode);
+      break;
+    case "new-configuration":
+      subjects.configuration.next({ ...message.content, type: "reset" });
+      break;
+    case "update":
+      subjects.configuration.next({ ...message.content, type: "update" });
+      break;
+    case "focus-element":
+      subjects.focus.next(message.content);
+      break;
+    case "set-source-map": {
+      const { content: { dictionary } } = message;
+      subjects.setSourceMap.next({
+        ...message.content,
+        dictionary: Object.entries(dictionary).reduce((acc, [from2, to]) => {
+          try {
+            const { href: fromUrl } = new URL(from2, this.window.location.href);
+            const obj = typeof to === "string" ? { headers: {}, query: {}, to } : to;
+            acc[fromUrl] = {
+              originalFrom: from2,
+              ...obj
+            };
+          } catch (e2) {
+          }
+          return acc;
+        }, {})
+      });
+      break;
+    }
+  }
+}
+class ServiceWorkerChannel {
+  constructor(handler2) {
+    __publicField$3(this, "__handler");
+    __publicField$3(this, "__window");
+    __publicField$3(this, "__randomColor");
+    this.__handler = handler2;
+    this.__window = window;
+    this.__randomColor = generateDarkColorHex();
+  }
+  send(to, message) {
+    {
+      const color = this.__randomColor;
+      const background = `${color}22`;
+      const style = { background, color };
+      console.groupCollapsed(`%c Msg to Service Worker `, Object.entries(style).map(([key, val]) => `${key}: ${val}`).join("; "));
+      console.info(`window '${this.__window.origin}' is sending a message of type %c ${message.type} `, "background: lightgreen; color: darkgreen");
+      console.log(message.content);
+      console.groupEnd();
+    }
+    to.postMessage(message);
+  }
+  get window() {
+    return this.__window;
+  }
+  set window(win) {
+    this.__window = win;
+  }
+  recv() {
+    const swListener2 = ({ data }) => {
+      this.__handler(data);
+    };
+    const { __window: { navigator: navigator2 } } = this;
+    navigator2.serviceWorker.addEventListener("message", swListener2);
+    return () => navigator2.serviceWorker.removeEventListener("message", swListener2);
   }
 }
+const swListener = (message) => {
+  switch (message.type) {
+    case "source-map-ack":
+      subjects.swReady.next(0);
+      break;
+  }
+};
+const postChannel = new PostChannel(parentListener);
+const serviceWorkerChannel = new ServiceWorkerChannel(swListener);
+const DEFAULT_LANGUAGE = "en";
+const localizeText = (input, lang = DEFAULT_LANGUAGE) => {
+  if (typeof input === "string") {
+    return input;
+  }
+  return input == null ? void 0 : input[lang];
+};
+function translateObject(obj) {
+  return Object.entries(obj).reduce((out, [key, value]) => {
+    out[key] = localizeText(value);
+    return out;
+  }, {});
+}
+const noop = (..._args) => {
+};
+const toArray$1 = (input) => Array.isArray(input) ? input : [input];
+const urlMakerFactory = ({ document: { baseURI }, location: { href } }) => (input) => new URL(input, new URL(baseURI, href));
+const toURL = (urlMaker, info) => {
+  let url = info;
+  if (!(info instanceof URL)) {
+    url = urlMaker(typeof info === "string" ? info : info.url);
+  }
+  return url;
+};
+const trimLocationOrigin = (origin, url) => {
+  const { href, origin: linkOrigin } = url;
+  if (origin === linkOrigin) {
+    return href.substring(origin.length);
+  }
+  return href;
+};
+const getElement = (document2, context, nth = 0) => {
+  const { selectors } = context;
+  return document2.querySelector(selectors[nth]);
+};
+function getElementBySelector(selector) {
+  return document.querySelector(selector);
+}
+const unfocus = (element, mapping) => {
+  const originalStyle = mapping.get(element.getAttribute("__mia_preview_id"));
+  if (originalStyle) {
+    const { css, rest, subscription } = originalStyle;
+    rest.forEach((el) => {
+      var _a2;
+      return (_a2 = el.__unfocus_handler) == null ? void 0 : _a2.call(el);
+    });
+    subscription.unsubscribe();
+    originalStyle.elementToFocus.forEach((el, idx) => {
+      Object.assign(el.style, css[idx]);
+    });
+  }
+  mapping.delete(element.getAttribute("__mia_preview_id"));
+};
+const noUndefined = (input) => input !== void 0;
+function focus(document2, obs$, mode$) {
+  const stylesMap = /* @__PURE__ */ new Map();
+  const getBySelector = getElementBySelector.bind(document2);
+  const subscription = obs$.pipe(
+    pairwise(),
+    tap(([current]) => {
+      var _a2;
+      if (current !== void 0) {
+        const prev = getElement(document2, current);
+        if (prev !== null) {
+          (_a2 = prev.__unfocus_handler) == null ? void 0 : _a2.call(prev);
+          unfocus(prev, stylesMap);
+        }
+      }
+    }),
+    map(([, next]) => next),
+    filter(noUndefined),
+    map((next) => {
+      const [first, ...rest] = next.selectors;
+      const otherElements = rest.reduce((arr, selector) => {
+        var _a2;
+        const el = getBySelector(selector);
+        if (el) {
+          arr.push(el);
+          const result = (_a2 = el.__focus_handler) == null ? void 0 : _a2.call(el);
+          if (result && "then" in result) {
+            result.catch(noop);
+          }
+        }
+        return arr;
+      }, []);
+      return { first, next, otherElements };
+    }),
+    map((next) => ({ ...next, firstElement: getBySelector(next.first) })),
+    filter((next) => next.firstElement !== null),
+    map((next) => {
+      var _a2, _b;
+      return { ...next, focus: (_b = (_a2 = next.firstElement).__focus_handler) == null ? void 0 : _b.call(_a2) };
+    }),
+    concatMap(({ focus: focusPromise, ...rest }) => {
+      const promise = focusPromise && "then" in focusPromise ? focusPromise : Promise.resolve(focusPromise != null ? focusPromise : rest.firstElement);
+      return promise.then((focusElement) => ({ focus: focusElement, ...rest })).catch(() => ({ focus: void 0, ...rest }));
+    })
+  ).subscribe(({ otherElements, next, firstElement, focus: focusContext }) => {
+    const cssKeys = Object.keys(next.style);
+    const stylePendingChanges = new Subscription();
+    const elementToFocus = toArray$1(focusContext != null ? focusContext : firstElement).filter(Boolean);
+    const initialStyles = { css: [], elementToFocus, rest: otherElements, subscription: stylePendingChanges };
+    const styles = cssKeys.reduce((acc, key) => {
+      elementToFocus.forEach((el, idx) => {
+        var _a2;
+        acc.css[idx] = Object.assign((_a2 = acc.css[idx]) != null ? _a2 : {}, { [key]: el.style[key] });
+      });
+      return acc;
+    }, initialStyles);
+    stylePendingChanges.add(mode$.pipe(filter((val) => val === "select"), take(1)).subscribe(() => {
+      elementToFocus.forEach((el) => {
+        Object.assign(el.style, next.style);
+      });
+    }));
+    stylesMap.set(firstElement.getAttribute("__mia_preview_id"), styles);
+  });
+  return () => subscription.unsubscribe();
+}
 var t;
 const i = window, s = i.trustedTypes, e = s ? s.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, o = "$lit$", n = `lit$${(Math.random() + "").slice(9)}$`, l = "?" + n, h = `<${l}>`, r = document, d = () => r.createComment(""), u = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, c = Array.isArray, v = (t2) => c(t2) || "function" == typeof (null == t2 ? void 0 : t2[Symbol.iterator]), a = "[ 	\n\f\r]", f = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, _ = /-->/g, m = />/g, p = RegExp(`>|${a}(?:([^\\s"'>=/]+)(${a}*=${a}*(?:[^ 	
 \f\r"'\`<>=]|("|')|))|$)`, "g"), g = /'/g, $ = /"/g, y = /^(?:script|style|textarea|title)$/i, w = (t2) => (i2, ...s2) => ({ _$litType$: t2, strings: i2, values: s2 }), x = w(1), T = Symbol.for("lit-noChange"), A = Symbol.for("lit-nothing"), E = /* @__PURE__ */ new WeakMap(), C = r.createTreeWalker(r, 129, null, false), P = (t2, i2) => {
@@ -5324,7 +5550,7 @@ const __vitePreload = function preload(baseModule, deps, importerUrl) {
   })).then(() => baseModule());
 };
 function error(message, ...args) {
-  __vitePreload(() => import("./errors-5a0ccde7.js"), true ? [] : void 0, import.meta.url).then(({ default: errorMap }) => {
+  __vitePreload(() => import("./assets/errors-5a0ccde7.js"), true ? [] : void 0, import.meta.url).then(({ default: errorMap }) => {
     const handler2 = errorMap[message];
     handler2 ? console.error(handler2(...args)) : console.error(...args);
   }).catch((err) => {
@@ -5338,12 +5564,12 @@ function dynamicImportError(name) {
     error("0", name, err.message);
   };
 }
-const logger = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const logger$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   dynamicImportError,
   error
 }, Symbol.toStringTag, { value: "Module" }));
-var logger_default = logger;
+var logger_default = logger$1;
 var __defProp$2 = Object.defineProperty;
 var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$2 = (obj, key, value) => {
@@ -5569,60 +5795,6 @@ async function render(config2, container, context = {}) {
     return null;
   });
 }
-function registerChannels() {
-  return {
-    configuration: new ReplaySubject(),
-    focus: new BehaviorSubject(void 0),
-    infos: new ReplaySubject(),
-    mocks: new ReplaySubject(),
-    mode: new BehaviorSubject("select"),
-    notification: new ReplaySubject(),
-    updated: new Subject(),
-    uppercaseTags: /* @__PURE__ */ new Set()
-  };
-}
-const nextMode = (mode) => {
-  let next = 0;
-  const currentValue = mode.getValue();
-  if (currentValue === "interact") {
-    next = "select";
-  } else if (currentValue === "select") {
-    next = "interact";
-  }
-  mode.next(next);
-  return next;
-};
-const subjects = registerChannels();
-function listener(message) {
-  switch (message.type) {
-    case "options": {
-      const { content: { disableOverlay, redirectTo, timeout } } = message;
-      if (disableOverlay) {
-        Object.defineProperty(this.window, "__BACKOFFICE_CONFIGURATOR_DISABLE_OVERLAY__", { value: true });
-        subjects.mode.next("interact");
-      }
-      if (timeout !== void 0) {
-        Object.defineProperty(this.window, "__BACKOFFICE_CONFIGURATOR_PREVIEW_TIMEOUT__", { value: timeout });
-      }
-      const { window: { history } } = this;
-      redirectTo && history.pushState(history.state, "", redirectTo);
-      break;
-    }
-    case "ctrl-space":
-      nextMode(subjects.mode);
-      break;
-    case "new-configuration":
-      subjects.configuration.next({ ...message.content, type: "reset" });
-      break;
-    case "update":
-      subjects.configuration.next({ ...message.content, type: "update" });
-      break;
-    case "focus-element":
-      subjects.focus.next(message.content);
-      break;
-  }
-}
-const postChannel = new PostChannel(listener);
 const fromErrorToNotification = (error2) => {
   var _a2;
   return {
@@ -5758,7 +5930,9 @@ const getPreviewContainer = (frame, root) => {
   let container = root.firstElementChild;
   if (container === null) {
     container = document2.createElement("div");
-    container.style.height = "inherit";
+    container.style.height = "100%";
+    container.style.width = "100%";
+    container.style.overflow = "auto";
     container.style.display = "flex";
     root.appendChild(container);
   }
@@ -6150,9 +6324,8 @@ function appendOverlay(self2, mode$) {
 }
 const appendRenderRoot = (document2) => {
   const renderRoot = document2.createElement("div");
-  renderRoot.style.display = "flex";
-  renderRoot.style.flexDirection = "column";
   renderRoot.style.height = "inherit";
+  renderRoot.style.width = "inherit";
   document2.body.appendChild(renderRoot);
   return renderRoot;
 };
@@ -6209,7 +6382,10 @@ const addInfoFactory = (channels) => (info) => {
 };
 const run = (frame, renderRoot, channels) => {
   const queue = new Queue();
-  const subscription = channels.configuration.subscribe((next) => {
+  const subscription = channels.configuration.pipe(
+    combineLatestWith(subjects.swReady.pipe(take(1))),
+    map(([next]) => next)
+  ).subscribe((next) => {
     const { configuration } = next;
     const { content } = configuration;
     let done;
@@ -6295,11 +6471,51 @@ function createComposerApplication(self2, channels) {
     sandboxedWindow
   };
 }
-const init = (self2) => {
+function logger(type, ...args) {
+  {
+    const color = generateDarkColorHex();
+    const background = `${color}22`;
+    const style = { background, color };
+    console.groupCollapsed(`%c Preview ${this.location.href}`, Object.entries(style).map(([key, val]) => `${key}: ${val}`).join("; "));
+    console[type](...args);
+    console.groupEnd();
+  }
+}
+function logServiceWorkerStatus(registration) {
+  const log = logger.bind(this);
+  if (registration.installing) {
+    log("info", "Service worker installing");
+  } else if (registration.waiting) {
+    log("info", "Service worker installed");
+  } else if (registration.active) {
+    log("info", "Service worker active");
+  }
+}
+const registerServiceWorker = async (self2) => {
+  const { navigator: navigator2 } = self2;
+  if ("serviceWorker" in navigator2) {
+    navigator2.serviceWorker.register("./service-worker.js", { scope: "./" }).then((reg) => logServiceWorkerStatus.call(self2, reg)).catch((error2) => console.error(error2));
+    return navigator2.serviceWorker.ready.then((reg) => {
+      var _a2;
+      return (_a2 = reg.active) != null ? _a2 : Promise.reject(new TypeError("serviceWorker not active"));
+    });
+  }
+  logger.call(self2, "error", "serviceWorker is not available");
+};
+const init = async (self2) => {
   postChannel.window = self2;
+  serviceWorkerChannel.window = self2;
+  return registerServiceWorker(self2);
 };
-function registerSenders(chs) {
+function registerSenders(chs, sw) {
   const subscription = new Subscription();
+  if (sw) {
+    subscription.add(
+      chs.setSourceMap.subscribe(
+        (next) => serviceWorkerChannel.send(sw, { content: next, type: "set-source-map" })
+      )
+    );
+  }
   subscription.add(
     chs.updated.subscribe(() => {
       postChannel.send(window.parent, {
@@ -6355,10 +6571,20 @@ function registerCleanups(window2, fns) {
     fns.forEach((fn) => fn());
   });
 }
-((self2) => {
-  init(self2);
+(async (self2) => {
+  const sw = await init(self2);
+  let serviceWorkerChannelCleanup = noop;
   const postChannelCleanup = postChannel.recv(self2, self2.top);
-  const senderCleanup = registerSenders(subjects);
+  if (sw) {
+    const swCleanup = serviceWorkerChannel.recv();
+    const subscription = interval(100).subscribe(() => postChannel.send(self2.parent, { content: { status: "ready" }, type: "service-worker" }));
+    serviceWorkerChannelCleanup = () => {
+      swCleanup();
+      subscription.unsubscribe();
+      serviceWorkerChannel.send(sw, { content: {}, type: "unload-client" });
+    };
+  }
+  const senderCleanup = registerSenders(subjects, sw);
   const listenerCleanup = registerEventListeners(
     self2,
     { handler: ctrlSpaceFactory(subjects), type: "keydown" },
@@ -6376,7 +6602,10 @@ function registerCleanups(window2, fns) {
       composerApplicationCleanup,
       listenerCleanup,
       senderCleanup,
+      serviceWorkerChannelCleanup,
       postChannelCleanup
     ]
   );
-})(window);
+})(window).catch((error2) => {
+  throw error2;
+});