@micro-lc/preview 0.5.0-rc3 → 0.5.0-rc5

package/website/development/{index.js → assets/index-243486eb.js}

@@ -1,3 +1,9 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 (function polyfill() {
   const relList = document.createElement("link").relList;
   if (relList && relList.supports && relList.supports("modulepreload")) {
@@ -3379,12 +3385,12 @@ function isSubscriber(value) {
 function hasLift(source) {
   return isFunction(source === null || source === void 0 ? void 0 : source.lift);
 }
-function operate(init2) {
+function operate(init) {
   return function(source) {
     if (hasLift(source)) {
       return source.lift(function(liftedSource) {
         try {
-          return init2(liftedSource, this);
+          return init(liftedSource, this);
         } catch (err) {
           this.error(err);
         }
@@ -4275,6 +4281,26 @@ function lastValueFrom(source, config2) {
     });
   });
 }
+function firstValueFrom(source, config2) {
+  var hasConfig = typeof config2 === "object";
+  return new Promise(function(resolve, reject) {
+    var subscriber = new SafeSubscriber({
+      next: function(value) {
+        resolve(value);
+        subscriber.unsubscribe();
+      },
+      error: reject,
+      complete: function() {
+        if (hasConfig) {
+          resolve(config2.defaultValue);
+        } else {
+          reject(new EmptyError());
+        }
+      }
+    });
+    source.subscribe(subscriber);
+  });
+}
 function isValidDate(value) {
   return value instanceof Date && !isNaN(value);
 }
@@ -4413,6 +4439,62 @@ function mergeMap(project, resultSelector, concurrent) {
     return mergeInternals(source, subscriber, project, concurrent);
   });
 }
+var nodeEventEmitterMethods = ["addListener", "removeListener"];
+var eventTargetMethods = ["addEventListener", "removeEventListener"];
+var jqueryMethods = ["on", "off"];
+function fromEvent(target, eventName, options, resultSelector) {
+  if (isFunction(options)) {
+    resultSelector = options;
+    options = void 0;
+  }
+  if (resultSelector) {
+    return fromEvent(target, eventName, options).pipe(mapOneOrManyArgs(resultSelector));
+  }
+  var _a2 = __read(isEventTarget(target) ? eventTargetMethods.map(function(methodName) {
+    return function(handler2) {
+      return target[methodName](eventName, handler2, options);
+    };
+  }) : isNodeStyleEventEmitter(target) ? nodeEventEmitterMethods.map(toCommonHandlerRegistry(target, eventName)) : isJQueryStyleEventEmitter(target) ? jqueryMethods.map(toCommonHandlerRegistry(target, eventName)) : [], 2), add = _a2[0], remove = _a2[1];
+  if (!add) {
+    if (isArrayLike(target)) {
+      return mergeMap(function(subTarget) {
+        return fromEvent(subTarget, eventName, options);
+      })(innerFrom(target));
+    }
+  }
+  if (!add) {
+    throw new TypeError("Invalid event target");
+  }
+  return new Observable(function(subscriber) {
+    var handler2 = function() {
+      var args = [];
+      for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+      }
+      return subscriber.next(1 < args.length ? args : args[0]);
+    };
+    add(handler2);
+    return function() {
+      return remove(handler2);
+    };
+  });
+}
+function toCommonHandlerRegistry(target, eventName) {
+  return function(methodName) {
+    return function(handler2) {
+      return target[methodName](eventName, handler2);
+    };
+  };
+}
+function isNodeStyleEventEmitter(target) {
+  return isFunction(target.addListener) && isFunction(target.removeListener);
+}
+function isJQueryStyleEventEmitter(target) {
+  return isFunction(target.on) && isFunction(target.off);
+}
+function isEventTarget(target) {
+  return isFunction(target.addEventListener) && isFunction(target.removeEventListener);
+}
 function timer(dueTime, intervalOrScheduler, scheduler) {
   if (dueTime === void 0) {
     dueTime = 0;
@@ -4620,368 +4702,6 @@ function tap(observerOrNext, error2, complete) {
     }));
   }) : identity;
 }
-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$5(this, "_input");
-    __publicField$5(this, "_length");
-    __publicField$5(this, "_idx", 0);
-    __publicField$5(
-      this,
-      "_mode",
-      0
-      /* Literal */
-    );
-    __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;
-  }
-  concatToLastLiteral(concat) {
-    this._literals.push(this._literals.pop().concat(concat));
-  }
-  concatToLastVariable(concat) {
-    this._variables.push(this._variables.pop().concat(concat));
-  }
-  get() {
-    const rawLiterals = [...this._literals];
-    const literals = Object.assign([], rawLiterals);
-    Object.defineProperty(literals, "raw", { value: rawLiterals, writable: false });
-    return {
-      literals,
-      variables: this._variables
-    };
-  }
-  run() {
-    if (this._length === 0) {
-      this._literals.push("");
-    }
-    while (this._idx < this._length) {
-      const char = this._input.charAt(this._idx);
-      switch (this._mode) {
-        case 0: {
-          if (this._literals.length === 0) {
-            this._literals.push("");
-          }
-          if (char === "{" && this._idx + 1 !== this._length && this._input.charAt(this._idx + 1) === "{") {
-            this._literals.push("");
-            this._variables.push("");
-            this._mode = 1;
-            this._idx += 1;
-          } else {
-            this.concatToLastLiteral(char);
-          }
-          break;
-        }
-        case 1:
-          if (char === "}" && this._input.charAt(this._idx + 1) === "}") {
-            this._mode = 0;
-            this._idx += 1;
-          } else {
-            this.concatToLastVariable(char);
-          }
-          break;
-      }
-      this._idx += 1;
-    }
-    if (this._mode === 1) {
-      this._literals.pop();
-      this.concatToLastLiteral(`{{${this._variables.pop()}`);
-    }
-    this._done = true;
-  }
-};
-const isSquareBrakets = (field) => {
-  const trimmed = field.trim();
-  if (!(trimmed.startsWith("[") && trimmed.endsWith("]"))) {
-    return false;
-  }
-  const inner = trimmed.slice(1).slice(0, -1).trim();
-  if (Number.parseInt(inner).toString(10) !== inner) {
-    return false;
-  }
-  return true;
-};
-const getNumber = (field) => {
-  return Number.parseInt(field.trim().slice(1).slice(0, -1).trim());
-};
-function interpolate$1(context, path, preserveUnknown) {
-  if (!path.trim()) {
-    return preserveUnknown ? `{{${path}}}` : "";
-  }
-  const result = path.trim().split(".").reduce((superctx, field) => {
-    if (Array.isArray(superctx) && isSquareBrakets(field)) {
-      return superctx[getNumber(field)];
-    }
-    if (typeof superctx === "object" && superctx !== null && field in superctx) {
-      return superctx[field];
-    }
-    return void 0;
-  }, { ...context });
-  if (typeof result === "string") {
-    return result;
-  }
-  return preserveUnknown ? `{{${path}}}` : "";
-}
-function parse(input, context, preserveUnknown = false) {
-  const lexer2 = new Lexer$1(input);
-  lexer2.run();
-  const template = lexer2.get();
-  let [acc] = template.literals;
-  for (let i2 = 0; i2 < template.variables.length; i2++) {
-    acc = acc.concat(interpolate$1(context, template.variables[i2], preserveUnknown)).concat(template.literals[i2 + 1]);
-  }
-  return acc;
-}
-const compileObject = (obj, context) => Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, parse(value, context)]));
-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": 1,
-  "ctrl-space": 1,
-  "focus-element": 0,
-  mousedown: 1,
-  mousemove: 1,
-  "new-configuration": 0,
-  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) {
-  if (input === null) {
-    return false;
-  }
-  if (typeof input !== "object") {
-    return false;
-  }
-  if (!("type" in input) || typeof input.type !== "string") {
-    return false;
-  }
-  const { type: signedType } = input;
-  if (!signedType.startsWith(signature)) {
-    return false;
-  }
-  const type = signedType.substring(signature.length);
-  if (!isValidKey(type)) {
-    return false;
-  }
-  return true;
-}
-const sign = (signature, message) => ({ ...message, type: `${signature}${message.type}` });
-const unsign = (signature, message) => {
-  let { type } = message;
-  if (type.startsWith(signature)) {
-    type = type.substring(signature.length);
-  }
-  return { ...message, type };
-};
-const generateDarkColorHex = () => {
-  let color = "#";
-  for (let i2 = 0; i2 < 3; i2++) {
-    color += `0${Math.floor(Math.random() * Math.pow(16, 2) / 2).toString(16)}`.slice(-2);
-  }
-  return color;
-};
-class PostChannel {
-  constructor(handler2) {
-    __publicField$4(this, "__instance");
-    __publicField$4(this, "__handler");
-    __publicField$4(this, "__window");
-    __publicField$4(this, "__randomColor");
-    this.__instance = "";
-    this.__handler = handler2;
-    this.__window = window;
-    this.__randomColor = generateDarkColorHex();
-  }
-  postMessage(to, message, origin) {
-    {
-      console.assert(to !== this.__window);
-    }
-    if (
-      /* ("development" !== 'production' || this.__window.__BACKOFFICE_CONFIGURATOR_LOG_LEVEL__ === 'debug') && */
-      keys[message.type] !== 1
-    ) {
-      const color = this.__randomColor;
-      const background = `${color}22`;
-      const style = { background, color };
-      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);
-      console.log(message.content);
-      console.groupEnd();
-    }
-    to.postMessage(sign(this.__instance, message), origin);
-  }
-  set instance(str) {
-    this.__instance = str;
-  }
-  get window() {
-    return this.__window;
-  }
-  set window(win) {
-    this.__window = win;
-  }
-  send(to, message, origin = "*") {
-    this.__window !== to && this.postMessage(to, message, origin);
-  }
-  recv(window2, from2 = null) {
-    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", 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") {
@@ -5021,7 +4741,7 @@ function getElementBySelector(selector) {
   return document.querySelector(selector);
 }
 const unfocus = (element, mapping) => {
-  const originalStyle = mapping.get(element.getAttribute("__mia_preview_id"));
+  const originalStyle = mapping.get(element);
   if (originalStyle) {
     const { css, rest, subscription } = originalStyle;
     rest.forEach((el) => {
@@ -5033,7 +4753,7 @@ const unfocus = (element, mapping) => {
       Object.assign(el.style, css[idx]);
     });
   }
-  mapping.delete(element.getAttribute("__mia_preview_id"));
+  mapping.delete(element);
 };
 const noUndefined = (input) => input !== void 0;
 function focus(document2, obs$, mode$) {
@@ -5096,10 +4816,133 @@ function focus(document2, obs$, mode$) {
         Object.assign(el.style, next.style);
       });
     }));
-    stylesMap.set(firstElement.getAttribute("__mia_preview_id"), styles);
+    stylesMap.set(firstElement, styles);
   });
   return () => subscription.unsubscribe();
 }
+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;
+};
+let Lexer$1 = class Lexer {
+  constructor(input) {
+    __publicField$3(this, "_input");
+    __publicField$3(this, "_length");
+    __publicField$3(this, "_idx", 0);
+    __publicField$3(
+      this,
+      "_mode",
+      0
+      /* Literal */
+    );
+    __publicField$3(this, "_literals", []);
+    __publicField$3(this, "_variables", []);
+    __publicField$3(this, "_braketCount", 0);
+    __publicField$3(this, "_done", false);
+    this._input = input;
+    this._length = input.length;
+  }
+  concatToLastLiteral(concat) {
+    this._literals.push(this._literals.pop().concat(concat));
+  }
+  concatToLastVariable(concat) {
+    this._variables.push(this._variables.pop().concat(concat));
+  }
+  get() {
+    const rawLiterals = [...this._literals];
+    const literals = Object.assign([], rawLiterals);
+    Object.defineProperty(literals, "raw", { value: rawLiterals, writable: false });
+    return {
+      literals,
+      variables: this._variables
+    };
+  }
+  run() {
+    if (this._length === 0) {
+      this._literals.push("");
+    }
+    while (this._idx < this._length) {
+      const char = this._input.charAt(this._idx);
+      switch (this._mode) {
+        case 0: {
+          if (this._literals.length === 0) {
+            this._literals.push("");
+          }
+          if (char === "{" && this._idx + 1 !== this._length && this._input.charAt(this._idx + 1) === "{") {
+            this._literals.push("");
+            this._variables.push("");
+            this._mode = 1;
+            this._idx += 1;
+          } else {
+            this.concatToLastLiteral(char);
+          }
+          break;
+        }
+        case 1:
+          if (char === "}" && this._input.charAt(this._idx + 1) === "}") {
+            this._mode = 0;
+            this._idx += 1;
+          } else {
+            this.concatToLastVariable(char);
+          }
+          break;
+      }
+      this._idx += 1;
+    }
+    if (this._mode === 1) {
+      this._literals.pop();
+      this.concatToLastLiteral(`{{${this._variables.pop()}`);
+    }
+    this._done = true;
+  }
+};
+const isSquareBrakets = (field) => {
+  const trimmed = field.trim();
+  if (!(trimmed.startsWith("[") && trimmed.endsWith("]"))) {
+    return false;
+  }
+  const inner = trimmed.slice(1).slice(0, -1).trim();
+  if (Number.parseInt(inner).toString(10) !== inner) {
+    return false;
+  }
+  return true;
+};
+const getNumber = (field) => {
+  return Number.parseInt(field.trim().slice(1).slice(0, -1).trim());
+};
+function interpolate$1(context, path, preserveUnknown) {
+  if (!path.trim()) {
+    return preserveUnknown ? `{{${path}}}` : "";
+  }
+  const result = path.trim().split(".").reduce((superctx, field) => {
+    if (Array.isArray(superctx) && isSquareBrakets(field)) {
+      return superctx[getNumber(field)];
+    }
+    if (typeof superctx === "object" && superctx !== null && field in superctx) {
+      return superctx[field];
+    }
+    return void 0;
+  }, { ...context });
+  if (typeof result === "string") {
+    return result;
+  }
+  return preserveUnknown ? `{{${path}}}` : "";
+}
+function parse(input, context, preserveUnknown = false) {
+  const lexer2 = new Lexer$1(input);
+  lexer2.run();
+  const template = lexer2.get();
+  let [acc] = template.literals;
+  for (let i2 = 0; i2 < template.variables.length; i2++) {
+    acc = acc.concat(interpolate$1(context, template.variables[i2], preserveUnknown)).concat(template.literals[i2 + 1]);
+  }
+  return acc;
+}
+const compileObject = (obj, context) => Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, parse(value, context)]));
+const MIA_PREVIEW_ID = "__mia_preview_id";
+const OVERLAY_Z_INDEX = 1e6;
 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) => {
@@ -5179,7 +5022,7 @@ function N(t2, i2, s2 = t2, e2) {
 }
 class S {
   constructor(t2, i2) {
-    this.u = [], this._$AN = void 0, this._$AD = t2, this._$AM = i2;
+    this._$AV = [], this._$AN = void 0, this._$AD = t2, this._$AM = i2;
   }
   get parentNode() {
     return this._$AM.parentNode;
@@ -5187,7 +5030,7 @@ class S {
   get _$AU() {
     return this._$AM._$AU;
   }
-  v(t2) {
+  u(t2) {
     var i2;
     const { el: { content: s2 }, parts: e2 } = this._$AD, o2 = (null !== (i2 = null == t2 ? void 0 : t2.creationScope) && void 0 !== i2 ? i2 : r).importNode(s2, true);
     C.currentNode = o2;
@@ -5195,26 +5038,26 @@ class S {
     for (; void 0 !== d2; ) {
       if (l2 === d2.index) {
         let i3;
-        2 === d2.type ? i3 = new M(n2, n2.nextSibling, this, t2) : 1 === d2.type ? i3 = new d2.ctor(n2, d2.name, d2.strings, this, t2) : 6 === d2.type && (i3 = new z(n2, this, t2)), this.u.push(i3), d2 = e2[++h2];
+        2 === d2.type ? i3 = new M(n2, n2.nextSibling, this, t2) : 1 === d2.type ? i3 = new d2.ctor(n2, d2.name, d2.strings, this, t2) : 6 === d2.type && (i3 = new z(n2, this, t2)), this._$AV.push(i3), d2 = e2[++h2];
       }
       l2 !== (null == d2 ? void 0 : d2.index) && (n2 = C.nextNode(), l2++);
     }
-    return o2;
+    return C.currentNode = r, o2;
   }
-  p(t2) {
+  v(t2) {
     let i2 = 0;
-    for (const s2 of this.u)
+    for (const s2 of this._$AV)
       void 0 !== s2 && (void 0 !== s2.strings ? (s2._$AI(t2, s2, i2), i2 += s2.strings.length - 2) : s2._$AI(t2[i2])), i2++;
   }
 }
 class M {
   constructor(t2, i2, s2, e2) {
     var o2;
-    this.type = 2, this._$AH = A, this._$AN = void 0, this._$AA = t2, this._$AB = i2, this._$AM = s2, this.options = e2, this._$Cm = null === (o2 = null == e2 ? void 0 : e2.isConnected) || void 0 === o2 || o2;
+    this.type = 2, this._$AH = A, this._$AN = void 0, this._$AA = t2, this._$AB = i2, this._$AM = s2, this.options = e2, this._$Cp = null === (o2 = null == e2 ? void 0 : e2.isConnected) || void 0 === o2 || o2;
   }
   get _$AU() {
     var t2, i2;
-    return null !== (i2 = null === (t2 = this._$AM) || void 0 === t2 ? void 0 : t2._$AU) && void 0 !== i2 ? i2 : this._$Cm;
+    return null !== (i2 = null === (t2 = this._$AM) || void 0 === t2 ? void 0 : t2._$AU) && void 0 !== i2 ? i2 : this._$Cp;
   }
   get parentNode() {
     let t2 = this._$AA.parentNode;
@@ -5228,37 +5071,37 @@ class M {
     return this._$AB;
   }
   _$AI(t2, i2 = this) {
-    t2 = N(this, t2, i2), u(t2) ? t2 === A || null == t2 || "" === t2 ? (this._$AH !== A && this._$AR(), this._$AH = A) : t2 !== this._$AH && t2 !== T && this.g(t2) : void 0 !== t2._$litType$ ? this.$(t2) : void 0 !== t2.nodeType ? this.T(t2) : v(t2) ? this.k(t2) : this.g(t2);
+    t2 = N(this, t2, i2), u(t2) ? t2 === A || null == t2 || "" === t2 ? (this._$AH !== A && this._$AR(), this._$AH = A) : t2 !== this._$AH && t2 !== T && this._(t2) : void 0 !== t2._$litType$ ? this.g(t2) : void 0 !== t2.nodeType ? this.$(t2) : v(t2) ? this.T(t2) : this._(t2);
   }
-  S(t2) {
+  k(t2) {
     return this._$AA.parentNode.insertBefore(t2, this._$AB);
   }
-  T(t2) {
-    this._$AH !== t2 && (this._$AR(), this._$AH = this.S(t2));
+  $(t2) {
+    this._$AH !== t2 && (this._$AR(), this._$AH = this.k(t2));
   }
-  g(t2) {
-    this._$AH !== A && u(this._$AH) ? this._$AA.nextSibling.data = t2 : this.T(r.createTextNode(t2)), this._$AH = t2;
+  _(t2) {
+    this._$AH !== A && u(this._$AH) ? this._$AA.nextSibling.data = t2 : this.$(r.createTextNode(t2)), this._$AH = t2;
   }
-  $(t2) {
+  g(t2) {
     var i2;
     const { values: s2, _$litType$: e2 } = t2, o2 = "number" == typeof e2 ? this._$AC(t2) : (void 0 === e2.el && (e2.el = V.createElement(e2.h, this.options)), e2);
     if ((null === (i2 = this._$AH) || void 0 === i2 ? void 0 : i2._$AD) === o2)
-      this._$AH.p(s2);
+      this._$AH.v(s2);
     else {
-      const t3 = new S(o2, this), i3 = t3.v(this.options);
-      t3.p(s2), this.T(i3), this._$AH = t3;
+      const t3 = new S(o2, this), i3 = t3.u(this.options);
+      t3.v(s2), this.$(i3), this._$AH = t3;
     }
   }
   _$AC(t2) {
     let i2 = E.get(t2.strings);
     return void 0 === i2 && E.set(t2.strings, i2 = new V(t2)), i2;
   }
-  k(t2) {
+  T(t2) {
     c(this._$AH) || (this._$AH = [], this._$AR());
     const i2 = this._$AH;
     let s2, e2 = 0;
     for (const o2 of t2)
-      e2 === i2.length ? i2.push(s2 = new M(this.S(d()), this.S(d()), this, this.options)) : s2 = i2[e2], s2._$AI(o2), e2++;
+      e2 === i2.length ? i2.push(s2 = new M(this.k(d()), this.k(d()), this, this.options)) : s2 = i2[e2], s2._$AI(o2), e2++;
     e2 < i2.length && (this._$AR(s2 && s2._$AB.nextSibling, e2), i2.length = e2);
   }
   _$AR(t2 = this._$AA.nextSibling, i2) {
@@ -5270,7 +5113,7 @@ class M {
   }
   setConnected(t2) {
     var i2;
-    void 0 === this._$AM && (this._$Cm = t2, null === (i2 = this._$AP) || void 0 === i2 || i2.call(this, t2));
+    void 0 === this._$AM && (this._$Cp = t2, null === (i2 = this._$AP) || void 0 === i2 || i2.call(this, t2));
   }
 }
 class R {
@@ -5345,7 +5188,7 @@ class z {
   }
 }
 const j = i.litHtmlPolyfillSupport;
-null == j || j(V, M), (null !== (t = i.litHtmlVersions) && void 0 !== t ? t : i.litHtmlVersions = []).push("2.7.0");
+null == j || j(V, M), (null !== (t = i.litHtmlVersions) && void 0 !== t ? t : i.litHtmlVersions = []).push("2.7.4");
 const B = (t2, i2, s2) => {
   var e2, o2;
   const n2 = null !== (e2 = null == s2 ? void 0 : s2.renderBefore) && void 0 !== e2 ? e2 : i2;
@@ -5553,7 +5396,7 @@ const __vitePreload = function preload(baseModule, deps, importerUrl) {
   })).then(() => baseModule());
 };
 function error(message, ...args) {
-  __vitePreload(() => import("./assets/errors-5a0ccde7.js"), true ? [] : void 0, import.meta.url).then(({ default: errorMap }) => {
+  __vitePreload(() => import("./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) => {
@@ -5567,12 +5410,12 @@ function dynamicImportError(name) {
     error("0", name, err.message);
   };
 }
-const logger$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const logger = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   dynamicImportError,
   error
 }, Symbol.toStringTag, { value: "Module" }));
-var logger_default = logger$1;
+var logger_default = logger;
 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) => {
@@ -5807,17 +5650,17 @@ const fromErrorToNotification = (error2) => {
     status: "error"
   };
 };
-const errorHandler = (self2, error2) => postChannel.send(self2.parent, {
+const errorHandler = (channel, error2) => channel.send({
   content: fromErrorToNotification(error2),
   type: "notification"
 });
 const isRealMouseEvent = (event) => "clientX" in event && "clientY" in event;
-function mouseEventFactory(self2, type) {
+function mouseEventFactory(channel, type) {
   return (event) => {
     if (!isRealMouseEvent(event)) {
       return;
     }
-    postChannel.send(self2.parent, {
+    channel.send({
       content: {
         bubbles: true,
         cancelable: false,
@@ -5829,7 +5672,7 @@ function mouseEventFactory(self2, type) {
   };
 }
 const isControlledElement = (tags, element) => tags.has(element.tagName) && element.hasAttribute(MIA_PREVIEW_ID);
-const mouseOnElementFactory = (self2, channels) => {
+const mouseOnElementFactory = (self2, postChannel, channels) => {
   const { document: document2 } = self2;
   return (event) => {
     let content;
@@ -5845,13 +5688,290 @@ const mouseOnElementFactory = (self2, channels) => {
       }, { ids: [], selectors: [] });
     }
     if (channels.mode.getValue() === "select" || content === void 0) {
-      postChannel.send(self2.parent, {
+      postChannel.send({
         content: content && (content.ids.length > 0 ? content : void 0),
         type: "click-element"
       });
     }
   };
 };
+var fromWindowToReceiver = (self2, options) => {
+  return {
+    postMessage: (message) => {
+      self2.postMessage(message, (options == null ? void 0 : options.targetOrigin) ?? "*", options == null ? void 0 : options.transfer);
+    }
+  };
+};
+var SynAck = /* @__PURE__ */ ((SynAck2) => {
+  SynAck2["Ack"] = "ack";
+  SynAck2["Syn"] = "syn";
+  return SynAck2;
+})(SynAck || {});
+var synackKeys = Object.values(SynAck);
+var getData = (message) => message.data;
+var synackFilter = (type) => (data) => data.type === type.toString();
+var isPostChannelMessage = (message) => {
+  const data = message.data;
+  return typeof data === "object" && data !== null && "type" in data && typeof data.type === "string" && "instance" in data && typeof data.instance === "string" && "content" in data;
+};
+var generateDarkColorHex = () => {
+  let color = "#";
+  for (let i2 = 0; i2 < 3; i2++) {
+    color += `0${Math.floor(Math.random() * Math.pow(16, 2) / 2).toString(16)}`.slice(-2);
+  }
+  return color;
+};
+var PostChannel = class {
+  constructor(listener, from2, to, opts) {
+    __publicField(this, "__generateId");
+    __publicField(this, "__instance");
+    __publicField(this, "__colors");
+    __publicField(this, "__listener");
+    __publicField(this, "__log");
+    __publicField(this, "__receiver");
+    __publicField(this, "__subscription");
+    __publicField(this, "__okToWrite");
+    __publicField(this, "__write$");
+    __publicField(this, "__recv$");
+    this.__generateId = () => globalThis.crypto.randomUUID();
+    const instance = this.__generateId();
+    const messages = new ReplaySubject();
+    const fromSubscription = fromEvent(from2, "message").pipe(filter(isPostChannelMessage)).subscribe(messages);
+    this.__subscription = new Subscription();
+    this.__subscription.add(fromSubscription);
+    this.__okToWrite = new ReplaySubject(1);
+    this.__write$ = this.__okToWrite.pipe(take(1));
+    this.__recv$ = messages.asObservable();
+    this.__listener = listener;
+    this.__log = (opts == null ? void 0 : opts.log) && opts.log.bind(this);
+    this.__instance = instance;
+    const color = generateDarkColorHex();
+    this.__colors = {
+      bg: color,
+      fg: `${color}22`
+    };
+    this.__receiver = to;
+    this.__connect(
+      instance,
+      (opts == null ? void 0 : opts.period) ? opts.period : 10
+    );
+  }
+  __connect(instance, period) {
+    const synSubscription = interval(period).subscribe(() => this.__receiver.postMessage({
+      content: instance,
+      instance,
+      type: "syn".toString()
+    }));
+    this.__subscription.add(synSubscription);
+    this.__subscription.add(
+      this.__recv$.pipe(
+        map(getData),
+        filter(synackFilter(
+          "ack"
+          /* Ack */
+        )),
+        filter(({ content }) => content === instance),
+        take(1)
+      ).subscribe(({ instance: foreignInstance }) => {
+        this.__okToWrite.next(0);
+        this.__subscription.add(
+          this.__recv$.pipe(
+            filter(
+              ({ data: { type, instance: incomingInstance } }) => !synackKeys.includes(type) && incomingInstance === foreignInstance
+            )
+          ).subscribe((message) => {
+            this.__listener(message);
+            const { data } = message;
+            if (data._id !== void 0) {
+              this.__receiver.postMessage({
+                ...data,
+                content: data,
+                instance,
+                type: "ack"
+                /* Ack */
+              });
+            }
+          })
+        );
+        synSubscription.unsubscribe();
+      })
+    );
+    this.__subscription.add(
+      this.__recv$.pipe(
+        map(getData),
+        filter(synackFilter(
+          "syn"
+          /* Syn */
+        )),
+        // must check whether is not short-circuiting
+        // in an infinite loop by syncing with itself
+        filter(({ instance: foreignInstance }) => foreignInstance !== instance),
+        take(1)
+      ).subscribe(({ content }) => {
+        this.__receiver.postMessage({
+          content,
+          instance,
+          type: "ack"
+          /* Ack */
+        });
+      })
+    );
+  }
+  __write(message, messageId) {
+    const extra = {};
+    if (messageId !== void 0) {
+      extra._id = messageId;
+    }
+    this.__subscription.add(
+      this.__write$.subscribe(() => {
+        var _a2;
+        const outgoingMessage = Object.assign(
+          message,
+          {
+            instance: this.__instance,
+            ...extra
+          }
+        );
+        this.__receiver.postMessage(outgoingMessage);
+        (_a2 = this.__log) == null ? void 0 : _a2.call(this, outgoingMessage);
+      })
+    );
+  }
+  disconnect() {
+    this.__subscription.unsubscribe();
+  }
+  send(message) {
+    this.__write(message);
+  }
+  ackSend(message) {
+    let done;
+    const promise = new Promise((resolve) => {
+      done = resolve;
+    });
+    const messageId = this.__generateId();
+    this.__subscription.add(
+      this.__recv$.pipe(
+        map(getData),
+        filter(synackFilter(
+          "ack"
+          /* Ack */
+        )),
+        filter(({ _id }) => _id === messageId),
+        take(1)
+      ).subscribe(() => done())
+    );
+    this.__write(message, messageId);
+    return promise;
+  }
+  get instance() {
+    return this.__instance;
+  }
+  get colors() {
+    return this.__colors;
+  }
+  /**
+   * signals readiness on listening and cannot fail but keeps hanging
+   * if not resolved
+   */
+  get ready() {
+    return firstValueFrom(this.__write$).then(() => {
+    });
+  }
+};
+var src_default = PostChannel;
+const registerChannels = () => ({
+  configuration: new ReplaySubject(),
+  focus: new BehaviorSubject(void 0),
+  infos: new ReplaySubject(),
+  mocks: new ReplaySubject(),
+  mode: new BehaviorSubject("select"),
+  notification: new ReplaySubject(),
+  setSourceMap: new ReplaySubject(1),
+  swSourceMapAck: 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 swMakeListener = (_2) => (message) => {
+  const { data } = message;
+  switch (data.type) {
+  }
+};
+const registerServiceWorker = async (self2, channels) => {
+  const { navigator: { serviceWorker: sw } } = self2;
+  return Promise.all([
+    sw.register("./service-worker.js"),
+    sw.ready.then((registration) => {
+      if (!registration.active) {
+        throw new TypeError("smth went wrong on sw activation");
+      }
+      return new src_default(swMakeListener(), window.navigator.serviceWorker, registration.active);
+    })
+  ]).then(([, channel]) => channel);
+};
+const parentMakeListener = (self2, channels) => (message) => {
+  const { data } = message;
+  switch (data.type) {
+    case "options": {
+      const { content: { disableOverlay, redirectTo, timeout, run: run2 } } = data;
+      if (run2) {
+        channels.swSourceMapAck.next(0);
+      }
+      if (disableOverlay) {
+        Object.defineProperty(self2, "__BACKOFFICE_CONFIGURATOR_DISABLE_OVERLAY__", { value: true });
+        channels.mode.next("interact");
+      }
+      if (timeout !== void 0) {
+        Object.defineProperty(self2, "__BACKOFFICE_CONFIGURATOR_PREVIEW_TIMEOUT__", { value: timeout });
+      }
+      const { history } = self2;
+      redirectTo && history.pushState(history.state, "", redirectTo);
+      break;
+    }
+    case "ctrl-space":
+      nextMode(channels.mode);
+      break;
+    case "new-configuration":
+      channels.configuration.next({ ...data.content, type: "reset" });
+      break;
+    case "update":
+      channels.configuration.next({ ...data.content, type: "update" });
+      break;
+    case "focus-element":
+      channels.focus.next(data.content);
+      break;
+    case "set-source-map": {
+      const { dictionary, ...rest } = data.content;
+      channels.setSourceMap.next({
+        ...rest,
+        dictionary: Object.entries(dictionary).reduce((acc, [from2, to]) => {
+          try {
+            const { href: fromUrl } = new URL(from2, self2.location.href);
+            const obj = typeof to === "string" ? { headers: {}, query: {}, to } : to;
+            acc[fromUrl] = {
+              originalFrom: from2,
+              ...obj
+            };
+          } catch (e2) {
+          }
+          return acc;
+        }, {})
+      });
+      break;
+    }
+  }
+};
+const registerParent = (self2, channels) => new src_default(parentMakeListener(self2, channels), self2, fromWindowToReceiver(self2.parent));
 const ctrlSpaceFactory = (channels) => {
   return (evt) => {
     if (evt.ctrlKey && evt.key === " ") {
@@ -5882,49 +6002,42 @@ const requireInfo = (registry, tags) => from(tags.map((tag) => [tag, registry.wh
   mergeMap(extractManifest)
 );
 const BUFFER_TIME = 500;
-function reporter(err) {
+const reporter = (postChannel, err) => {
   if (err instanceof Error) {
-    errorHandler(this, err);
+    errorHandler(postChannel, err);
   }
-}
-function collectInfos(info$, addInfo) {
-  const boundReporter = reporter.bind(this);
-  return info$.pipe(
-    mergeMap(([, { __manifest: { label, description, ...rest }, tag }]) => {
-      delete rest.mocks;
-      return of({ info: { ...translateObject({ description, label }), ...rest }, tag });
-    }),
-    bufferTime(BUFFER_TIME),
-    filter((newInfos) => newInfos.length > 0)
-  ).subscribe({
-    error: boundReporter,
-    next: (extras) => addInfo(extras)
-  });
-}
-function collectMocks(info$) {
-  const boundReporter = reporter.bind(this);
-  return info$.pipe(
-    map(
-      ([, { __manifest: { mocks = {} }, tag }]) => [tag, mocks]
-    )
-  ).subscribe({
-    error: boundReporter,
-    next: (mockPair) => {
-      subjects.mocks.next(mockPair);
-    }
-  });
-}
-async function bootstrap(config2, {
+};
+const collectInfos = (postChannel, info$, addInfo) => info$.pipe(
+  mergeMap(([, { __manifest: { label, description, ...rest }, tag }]) => {
+    delete rest.mocks;
+    return of({ info: { ...translateObject({ description, label }), ...rest }, tag });
+  }),
+  bufferTime(BUFFER_TIME),
+  filter((newInfos) => newInfos.length > 0)
+).subscribe({
+  error: (error2) => reporter(postChannel, error2),
+  next: (extras) => addInfo(extras)
+});
+const collectMocks = (postChannel, subjects, info$) => info$.pipe(
+  map(
+    ([, { __manifest: { mocks = {} }, tag }]) => [tag, mocks]
+  )
+).subscribe({
+  error: (error2) => reporter(postChannel, error2),
+  next: (mockPair) => {
+    subjects.mocks.next(mockPair);
+  }
+});
+async function bootstrap(postChannel, channels, config2, {
   addInfo,
   tags
 }) {
   const { subscription } = this;
-  const boundReporter = reporter.bind(this);
   if (config2) {
     const info$ = requireInfo(this.customElements, tags);
-    return premount(config2, this, boundReporter).then(() => {
-      subscription.add(collectInfos.call(this, info$, addInfo));
-      subscription.add(collectMocks.call(this, info$));
+    return premount(config2, this, (err) => reporter(postChannel, err)).then(() => {
+      subscription.add(collectInfos(postChannel, info$, addInfo));
+      subscription.add(collectMocks(postChannel, channels, info$));
     });
   }
 }
@@ -5933,9 +6046,7 @@ const getPreviewContainer = (frame, root) => {
   let container = root.firstElementChild;
   if (container === null) {
     container = document2.createElement("div");
-    container.style.height = "100%";
-    container.style.width = "100%";
-    container.style.overflow = "auto";
+    container.style.height = "inherit";
     container.style.display = "flex";
     root.appendChild(container);
   }
@@ -5966,7 +6077,7 @@ function fetchMockFactory(instance, fetchFactory, windowHref) {
     var _a2;
     const info = compileObject({ ...url, method }, context);
     const matcher = new URL(info.pathname, (_a2 = info.origin) != null ? _a2 : windowHref);
-    return [matcher.href, method, (injectedInfo, init2) => fetchHandler(injectedInfo, init2).finally(() => {
+    return [matcher.href, method, (injectedInfo, init) => fetchHandler(injectedInfo, init).finally(() => {
       if (notify) {
         this.notify(fetchNotification(method, matcher));
       }
@@ -6043,12 +6154,12 @@ const printHeaders = (headers) => {
   });
   return JSON.stringify(obj);
 };
-const fetchPrint = (window2, url, init2, resHeaders = new Headers()) => {
+const fetchPrint = (window2, url, init, resHeaders = new Headers()) => {
   var _a2;
   const style = window2.origin === "null" ? { background: "antiquewhite", color: "brown" } : { background: "cyan", color: "blue" };
   console.groupCollapsed(`%c Fetching from ${window2.origin} `, Object.entries(style).map(([key, val]) => `${key}: ${val}`).join("; "));
   console.info(
-    `a component fetched with method ${(_a2 = init2 == null ? void 0 : init2.method) != null ? _a2 : "GET"} resource at %c ${url.href} got a response with headers ${printHeaders(resHeaders)}`,
+    `a component fetched with method ${(_a2 = init == null ? void 0 : init.method) != null ? _a2 : "GET"} resource at %c ${url.href} got a response with headers ${printHeaders(resHeaders)}`,
     "background: lightgreen; color: darkgreen"
   );
   console.groupEnd();
@@ -6060,7 +6171,7 @@ const notFoundTagNotification = (tag) => ({
   message: "preview.notifications.no-webcomponent-definition.message",
   status: "warning"
 });
-async function mock(contexts, tags = []) {
+async function mock(postChannel, subjects, contexts, tags = []) {
   const { location: { href }, fetch: originalFetch } = this;
   const urlMaker = urlMakerFactory(this);
   const store = new FetchMockStore(this.notify.bind(this));
@@ -6084,21 +6195,21 @@ async function mock(contexts, tags = []) {
     const instancesCarryingMocks = (_a2 = contexts.get(tag)) != null ? _a2 : [];
     return handler(store, instancesCarryingMocks, fetchFactory, href);
   })).catch(
-    (error2) => error2 instanceof Error && errorHandler(this, error2)
+    (error2) => error2 instanceof Error && errorHandler(postChannel, error2)
   );
-  const mockedFetch = async (info, init2) => {
+  const mockedFetch = async (info, init) => {
     var _a2;
     const url = toURL(urlMaker, info);
-    const mockImplementation = store.match({ method: (_a2 = init2 == null ? void 0 : init2.method) != null ? _a2 : "GET", url });
+    const mockImplementation = store.match({ method: (_a2 = init == null ? void 0 : init.method) != null ? _a2 : "GET", url });
     if (mockImplementation !== void 0) {
-      return mockImplementation(url, init2).then((res) => {
+      return mockImplementation(url, init).then((res) => {
         {
-          fetchPrint(this, url, init2, res.headers);
+          fetchPrint(this, url, init, res.headers);
         }
         return res;
       });
     }
-    return originalFetch(info, init2);
+    return originalFetch(info, init);
   };
   if (this.proxyWindow) {
     const newFetch = Object.assign(
@@ -6282,10 +6393,10 @@ function wrap(frame, notification) {
   const unpatch = domPatch(sandbox);
   return { sandbox, unpatch };
 }
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp2 = Object.defineProperty;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField2 = (obj, key, value) => {
+  __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 function appendOverlay(self2, mode$) {
@@ -6327,8 +6438,9 @@ 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;
 };
@@ -6344,8 +6456,8 @@ function createLifecycle(frame) {
 }
 class Queue {
   constructor() {
-    __publicField(this, "_results", /* @__PURE__ */ new Map());
-    __publicField(this, "_queue", Promise.resolve());
+    __publicField2(this, "_results", /* @__PURE__ */ new Map());
+    __publicField2(this, "_queue", Promise.resolve());
   }
   add(args) {
     const fns = [...args];
@@ -6383,12 +6495,9 @@ const addInfoFactory = (channels) => (info) => {
   channels.infos.next(info);
   info.forEach(({ tag }) => channels.uppercaseTags.add(tag.toUpperCase()));
 };
-const run = (frame, renderRoot, channels) => {
+const run = (frame, renderRoot, postChannel, channels) => {
   const queue = new Queue();
-  const subscription = channels.configuration.pipe(
-    combineLatestWith(subjects.swReady.pipe(take(1))),
-    map(([next]) => next)
-  ).subscribe((next) => {
+  const subscription = channels.configuration.pipe(combineLatestWith(channels.swSourceMapAck)).subscribe(([next]) => {
     const { configuration } = next;
     const { content } = configuration;
     let done;
@@ -6396,8 +6505,8 @@ const run = (frame, renderRoot, channels) => {
       const { contexts, tags } = next;
       done = queue.add([
         () => unmount.call(frame, renderRoot),
-        () => bootstrap.call(frame, configuration, { addInfo: addInfoFactory(channels), tags }),
-        () => mock.call(frame, contexts, next.tags),
+        () => bootstrap.call(frame, postChannel, channels, configuration, { addInfo: addInfoFactory(channels), tags }),
+        () => mock.call(frame, postChannel, channels, contexts, next.tags),
         () => update.call(frame, content, renderRoot).finally(() => channels.updated.next(0))
       ]);
     } else {
@@ -6446,16 +6555,16 @@ const interceptCORSFetch = (self2, notification) => {
     return;
   }
   const originalFetch = self2.fetch.bind(self2);
-  self2.fetch = (input, init2) => {
+  self2.fetch = (input, init) => {
     var _a2;
     const url = toURL(urlMaker, input);
     if (isSameDocumentOriginRequest(document2, url)) {
-      notification.next(fetchNotification((_a2 = init2 == null ? void 0 : init2.method) != null ? _a2 : "GET", url));
+      notification.next(fetchNotification((_a2 = init == null ? void 0 : init.method) != null ? _a2 : "GET", url));
     }
-    return originalFetch(input, init2);
+    return originalFetch(input, init);
   };
 };
-function createComposerApplication(self2, channels) {
+const createComposerApplication = (self2, postChannel, channels) => {
   applyBodyStyle(self2.document);
   interceptCORSFetch(self2, channels.notification);
   const { cleanup: overlayDisplaySubscriptionCleanup } = appendOverlay(self2, channels.mode.asObservable());
@@ -6463,7 +6572,7 @@ function createComposerApplication(self2, channels) {
   const renderRoot = appendRenderRoot(self2.document);
   const frame = createLifecycle(self2);
   const { sandbox: sandboxedWindow, unpatch } = wrap(frame, channels.notification);
-  const updateSubscriptionsCleanup = run(sandboxedWindow, renderRoot, channels);
+  const updateSubscriptionsCleanup = run(sandboxedWindow, renderRoot, postChannel, channels);
   return {
     cleanup: () => {
       updateSubscriptionsCleanup();
@@ -6473,87 +6582,41 @@ function createComposerApplication(self2, channels) {
     },
     sandboxedWindow
   };
-}
-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, sw) {
+function registerParentWindowSenders(chs) {
   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, {
-        content: {},
-        type: "updated"
-      });
-    })
+    chs.updated.subscribe(() => this.send({
+      content: {},
+      type: "updated"
+    }))
   );
   subscription.add(
-    chs.infos.subscribe(
-      (entries) => {
-        postChannel.send(window.parent, {
-          content: entries,
-          type: "tag-info"
-        });
-      }
-    )
+    chs.infos.subscribe((entries) => this.send({
+      content: entries,
+      type: "tag-info"
+    }))
   );
   subscription.add(
-    chs.notification.subscribe(
-      (content) => {
-        postChannel.send(window.parent, {
-          content,
-          type: "notification"
-        });
-      }
-    )
+    chs.notification.subscribe((content) => this.send({
+      content,
+      type: "notification"
+    }))
   );
   subscription.add(
-    chs.mode.subscribe(
-      (mode) => {
-        postChannel.send(window.parent, {
-          content: { mode },
-          type: "ctrl-space"
-        });
+    chs.mode.subscribe((mode) => this.send({
+      content: { mode },
+      type: "ctrl-space"
+    }))
+  );
+  return () => subscription.unsubscribe();
+}
+function registerServiceWorkerSenders(channels) {
+  const subscription = new Subscription();
+  subscription.add(
+    channels.setSourceMap.subscribe(
+      (message) => {
+        this.ackSend({ content: message, type: "set-source-map" }).then(() => channels.swSourceMapAck.next(0)).catch(noop);
       }
     )
   );
@@ -6575,40 +6638,34 @@ function registerCleanups(window2, fns) {
   });
 }
 (async (self2) => {
-  const sw = await init(self2);
-  let serviceWorkerChannelCleanup = noop;
-  const postChannelCleanup = postChannel.recv(self2, self2.top);
-  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 channels = registerChannels();
+  const swRegistration = await registerServiceWorker(self2);
+  const parentWindowRegistration = registerParent(self2, channels);
+  const serviceWorkerSenderCleanup = registerServiceWorkerSenders.call(swRegistration, channels);
+  const parentWindowSenderCleanup = registerParentWindowSenders.call(parentWindowRegistration, channels);
   const listenerCleanup = registerEventListeners(
     self2,
-    { handler: ctrlSpaceFactory(subjects), type: "keydown" },
-    { handler: mouseEventFactory(self2, "mousemove"), type: "mousemove" },
-    { handler: mouseEventFactory(self2, "mousedown"), type: "mousedown" },
-    { handler: mouseOnElementFactory(self2, subjects), type: "mousedown" }
+    { handler: ctrlSpaceFactory(channels), type: "keydown" },
+    { handler: mouseEventFactory(parentWindowRegistration, "mousemove"), type: "mousemove" },
+    { handler: mouseEventFactory(parentWindowRegistration, "mousedown"), type: "mousedown" },
+    { handler: mouseOnElementFactory(self2, parentWindowRegistration, channels), type: "mousedown" }
   );
   const {
     cleanup: composerApplicationCleanup,
     sandboxedWindow
-  } = createComposerApplication(self2, subjects);
+  } = createComposerApplication(self2, parentWindowRegistration, channels);
   registerCleanups(
     sandboxedWindow,
     [
       composerApplicationCleanup,
       listenerCleanup,
-      senderCleanup,
-      serviceWorkerChannelCleanup,
-      postChannelCleanup
+      parentWindowSenderCleanup,
+      serviceWorkerSenderCleanup,
+      () => parentWindowRegistration.disconnect(),
+      () => swRegistration.disconnect()
     ]
   );
-})(window).catch((error2) => {
-  throw error2;
+})(window).catch((err) => {
+  console.error(`[preview] Error Boundary: ${String(err)}`);
+  throw err;
 });