@sitecore-feaas/clientside 0.0.9 → 0.1.0

package/dist/node/index.js

@@ -17,10 +17,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -42,25 +38,6 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 
-// src/dom.ts
-var dom_exports = {};
-__export(dom_exports, {
-  autoloadScripts: () => autoloadScripts,
-  cleanCollectionBit: () => cleanCollectionBit,
-  loadScript: () => loadScript,
-  normalizeCollectionScope: () => normalizeCollectionScope,
-  observeDOMElement: () => observeDOMElement,
-  queryScopes: () => queryScopes,
-  renderComponent: () => renderComponent,
-  renderComponentElement: () => renderComponentElement,
-  renderComponentPromise: () => renderComponentPromise,
-  renderDOMContent: () => renderDOMContent,
-  renderDOMElement: () => renderDOMElement,
-  renderStylesheet: () => renderStylesheet,
-  renderStylesheetPromise: () => renderStylesheetPromise,
-  setDOMAttribute: () => setDOMAttribute
-});
-
 // ../node_modules/jsonpath-plus/dist/index-browser-esm.js
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -796,20 +773,22 @@ function fetchAndRevalidate(url, options, validator, callback) {
 
 // src/cloud.ts
 function getComponentURL({
-  hostname = "https://feaascomponentsapidev.blob.core.windows.net",
+  cdn = "https://feaascomponentsapidev.blob.core.windows.net",
+  hostname,
   library,
   component,
   version,
   revision = "published"
 }) {
-  return `${hostname}/components/${library}/${component}/${version}/${revision}.html`;
+  return `${cdn || hostname}/components/${library}/${component}/${version}/${revision}.html`;
 }
 function getStylesheetURL({
-  hostname = `https://feaascomponentsapidev.blob.core.windows.net`,
+  cdn = `https://feaascomponentsapidev.blob.core.windows.net`,
+  hostname,
   library,
   revision = "published"
 }) {
-  return `${hostname}/styles/${library}/${revision}.css`;
+  return `${cdn || hostname}/styles/${library}/${revision}.css`;
 }
 function fetchComponent(props, callback) {
   return __async(this, null, function* () {
@@ -1119,59 +1098,356 @@ function renderComponentPromise(props, root) {
   });
 }
 
-// src/webcomponent.ts
-var webcomponent_exports = {};
-__export(webcomponent_exports, {
-  HTMLFeaasComponent: () => HTMLFeaasComponent,
-  HTMLFeaasStylesheet: () => HTMLFeaasStylesheet
-});
-var WebComponent = typeof HTMLElement == "undefined" ? class {
-} : HTMLElement;
-var HTMLFeaasComponent = class extends WebComponent {
+// src/components/FEAASBase.tsx
+var FEAASBase = class extends HTMLElement {
   constructor() {
     super(...arguments);
-    this.connected = false;
-    this.template = null;
-    this.data = void 0;
-    this.isFetching = false;
+    this.connected = null;
+    this.refs = {};
+    this.descendants = [];
+    this.onLoad = (payload) => {
+      if (payload == null)
+        return;
+      this.payload = payload;
+      this.render();
+    };
+  }
+  getProps(context) {
+    return {};
   }
-  static get observedAttributes() {
-    return ["data", "library", "component", "version", "revision", "hostname", "template"];
+  getRoot() {
+    return this;
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.set();
   }
   connectedCallback() {
-    this.connected = true;
-    this.render();
+    console.log("FEAAS: Connected", this);
+    this.connected = new Event("feaasConnected", { bubbles: true, composed: true });
+    this.dispatchEvent(this.connected);
+    this.addEventListener("feaasConnected", this);
+    this.addEventListener("feaasDisconnected", this);
+    this.set();
   }
   disconnectedCallback() {
+    console.log("FEAAS: Disconnected", this);
+    this.removeEventListener("feaasConnected", this);
+    this.removeEventListener("feaasDisconnected", this);
+    this.dispatchEvent(new Event("feaasDisconnected", { bubbles: true, composed: true }));
+    this.connected = null;
+  }
+  handleEvent(event) {
+    switch (event.type) {
+      case "feaasConnected":
+        this.adoptedCallback(event);
+        break;
+      case "feaasDisconnected":
+        this.orphanCallback(event);
+        break;
+    }
   }
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (!this.connected)
+  orphanCallback(event) {
+    const target = event.composedPath()[0];
+    const index = this.descendants.indexOf(target);
+    if (index == -1)
       return;
-    if (name == "template") {
-      this.template = newValue;
-    } else if (name != "date") {
-      this.template = null;
+    console.log("FEAAS: Orphaning", this, target);
+    this.descendants.splice(index, -1);
+    this.refs[target.getComponentName()] = null;
+    if (target.refs.parent == this)
+      target.refs.parent = null;
+    if (target.refs.top == this) {
+      target.refs.top = target.refs.parent;
     }
-    if (name == "data" && this.children.length > 0) {
-      this.update();
-    } else {
-      cancelAnimationFrame(this.rendering);
-      this.rendering = requestAnimationFrame(() => {
+  }
+  adoptedCallback(event) {
+    var _a, _b;
+    const target = event.composedPath()[0];
+    this.descendants.push(target);
+    console.log("FEAAS: Adopting", this, target);
+    this.refs[target.getComponentName()] = target;
+    target.refs.top = this;
+    (_a = target.refs).parent || (_a.parent = this);
+    if (target.renderReact) {
+      for (var p = target.refs.parent; p; p = p.refs.parent) {
+        if (p.renderReact) {
+          (_b = target.refs).parentReact || (_b.parentReact = p);
+          target.refs.topReact = p;
+        }
+      }
+    }
+  }
+  getComponentName() {
+    return this.tagName.replace("FEAAS-", "").toLowerCase();
+  }
+  isReadyToLoad() {
+    return this.payload === void 0 && this.getAttribute("hidden") == null;
+  }
+  reify() {
+    return __async(this, null, function* () {
+      if (this.payload !== void 0) {
         this.render();
+      } else if (this.isReadyToLoad()) {
+        this.payload = null;
+        this.load().then(this.onLoad);
+      }
+    });
+  }
+  load() {
+    return Promise.resolve(null);
+  }
+  render(nested = false) {
+    var _a, _b, _c;
+    console.log("FEAAS: React", this.tagName, this.payload);
+    if (this.payload == null)
+      return;
+    const { React, ReactDOM } = this.payload || {};
+    if (!React)
+      throw new Error(`${this.tagName}: React is not present in payload`);
+    if (!ReactDOM)
+      throw new Error(`${this.tagName}: ReactDOM is not present in payload`);
+    if (!this.refs.topReact && !this.forceUpdateReact) {
+      ReactDOM.render(React.createElement(this.getReactWrapper()), this.getReactRoot());
+    } else if (this.forceUpdateReact) {
+      (_a = this.forceUpdateReact) == null ? void 0 : _a.call(this);
+    } else {
+      (_c = (_b = this.refs.topReact).forceUpdateReact) == null ? void 0 : _c.call(_b);
+    }
+  }
+  invokeReactRendering() {
+    const { React, ReactDOM } = this.payload || {};
+    const children = this.descendants.filter((r) => {
+      return r.refs.parentReact == this && r.payload;
+    }).map((child, index) => {
+      return React.createElement(this.getReactWrapper(child), {
+        key: this.tagName + "-" + index,
+        slot: child.getAttribute("slot")
       });
+    });
+    return this.renderReact(__spreadProps(__spreadValues({}, this.props), { children }), this.payload);
+  }
+  getReactWrapper(target = this, displayName = target.tagName) {
+    const Wrapper = target.reactWrapper || (target.reactWrapper = (props) => {
+      if (target.renderReact) {
+        const { React, ReactDOM } = target.payload || {};
+        const [value, forceUpdateReact] = React.useReducer((r) => r + 1, 0);
+        target.forceUpdateReact = forceUpdateReact;
+        return ReactDOM.createPortal(<>{target.invokeReactRendering()}</>, target.getReactRoot());
+      } else {
+        return target.render();
+      }
+    });
+    Object.assign(Wrapper, {
+      displayName
+    });
+    return Wrapper;
+  }
+  getUID() {
+    return this.uid || (this.uid = String(Math.random()));
+  }
+  getReactRoot() {
+    return this.getRoot();
+  }
+  set(overrides) {
+    this.overrides = __spreadValues(__spreadValues({}, this.overrides), overrides);
+    this.props = __spreadValues(__spreadValues({}, this.getProps()), this.overrides);
+    for (var property in this.props) {
+      const value = this.props[property];
+      if (this.props[property] == null) {
+        this.removeAttribute(property);
+      } else if (typeof value == "string" || typeof value == "number") {
+        if (this.getAttribute(property) != String(value))
+          this.setAttribute(property, String(value));
+      }
     }
+    this.scheduleRender();
   }
-  update() {
-    renderDOMElement(this, this.getProps().data);
+  scheduleRender() {
+    cancelAnimationFrame(this.nextRender);
+    this.nextRender = requestAnimationFrame(() => {
+      this.reify();
+    });
   }
-  setData(data) {
-    this.data = data;
-    if (this.children.length > 0) {
-      this.update();
+  formatURL(src, hostname) {
+    if (typeof src == "string" && src.match(/\/[^\/]/)) {
+      return hostname + src;
     } else {
-      this.render();
+      return src;
     }
   }
+  getContextAttribute(name, element = this) {
+    var _a, _b;
+    return (_b = (_a = element.closest(`[${name}]`)) == null ? void 0 : _a.getAttribute(name)) != null ? _b : this.getAttribute(name);
+  }
+  static register(tagName) {
+    if (!window.customElements.get(tagName)) {
+      window.customElements.define(tagName, this);
+    }
+  }
+};
+
+// src/components/FEAASLoader.ts
+function FEAASLoaderProps(element = this) {
+  return {
+    hidden: (element == null ? void 0 : element.getAttribute("hidden")) != null
+  };
+}
+var FEAASLoader = class extends FEAASBase {
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name == "hidden") {
+      this.style.setProperty("display", "block", "important");
+      this.style.setProperty("transition", "opacity 0.3s", "important");
+      if (newValue) {
+        this.style.setProperty("opacity", "0", "important");
+        this.style.pointerEvents = "none";
+      } else {
+        this.style.setProperty("opacity", "1", "important");
+        this.style.pointerEvents = "all";
+      }
+    }
+  }
+  connectedCallback() {
+    this.attributeChangedCallback("hidden", this.getAttribute("hidden"), this.getAttribute("hidden"));
+    this.stylesheet = document.createElement("style");
+    this.stylesheet.textContent = `
+  #loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f6f6ff;
+    z-index: 1000;
+  }
+  @keyframes loader-circular-track {
+    0% {
+      stroke-dasharray: 1, 400;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 400, 400;
+      stroke-dashoffset: -100;
+    }
+    100% {
+      stroke-dasharray: 400, 400;
+      stroke-dashoffset: -260;
+    }
+  }
+  
+  @keyframes loader-circular-spinner {
+    0% {
+      transform: rotate(0deg);
+    }
+  
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  #loader .spinner {
+    width: 48px;
+    height: 48px;
+  }
+  `;
+    this.loader = document.createElement("div");
+    this.loader.id = "loader";
+    this.loader.innerHTML = `
+  <div class="spinner">
+    <svg
+      viewBox="0 0 100 100"
+      style="
+        animation: 2s linear 0s infinite normal none running loader-circular-spinner;
+        display: block;
+        width: 48px;
+        height: 48px;
+      "
+    >
+      <circle fill="transparent" cx="50" cy="50" r="42" stroke="rgba(0,0,0,0.1)" stroke-width="10px"></circle>
+      <circle
+        fill="transparent"
+        stroke="#5548D9"
+        cx="50"
+        cy="50"
+        r="42"
+        stroke-width="10px"
+        stroke-linecap="round"
+        style="animation: 1.5s linear 0s infinite normal none running loader-circular-track"
+      ></circle>
+    </svg>
+  </div>`;
+    this.getRoot().appendChild(this.stylesheet);
+    this.getRoot().appendChild(this.loader);
+  }
+};
+FEAASLoader.observedAttributes = ["hidden"];
+FEAASLoader.register("feaas-loader");
+
+// src/components/FEAASStylesheet.ts
+function FEAASStylesheetProps(element = this) {
+  var _a;
+  return {
+    library: element == null ? void 0 : element.getContextAttribute("library"),
+    revision: (_a = element == null ? void 0 : element.getAttribute("revision")) != null ? _a : "published",
+    cdn: element == null ? void 0 : element.getContextAttribute("cdn")
+  };
+}
+var FEAASStylesheet = class extends FEAASBase {
+  getProps() {
+    return FEAASStylesheetProps(this);
+  }
+  isReadyToLoad() {
+    return this.props.library != null && this.props.revision != null && this.props.cdn != null;
+  }
+  load() {
+    return __async(this, null, function* () {
+      fetchStylesheet(this.props, this.onLoad);
+    });
+  }
+  render() {
+    if (!this.stylesheet) {
+      this.stylesheet = document.createElement("style");
+      this.appendChild(this.stylesheet);
+    }
+    this.stylesheet.textContent = this.payload;
+  }
+};
+FEAASStylesheet.register("feaas-stylesheet");
+
+// src/components/FEAASComponent.ts
+function FEAASComponentsProps(element = this) {
+  let data;
+  const dataValue = element.getAttribute("data");
+  if (dataValue != null) {
+    try {
+      data = typeof dataValue == "string" ? JSON.parse(dataValue) : {};
+    } catch (e) {
+    }
+  }
+  return {
+    data: data != null ? data : {},
+    library: element.getAttribute("library"),
+    component: element.getAttribute("component"),
+    version: element.getAttribute("version"),
+    revision: element.getAttribute("revision"),
+    hostname: element.getAttribute("hostname"),
+    cdn: element.getContextAttribute("cdn"),
+    template: element.getAttribute("template")
+  };
+}
+var FEAASComponent = class extends FEAASBase {
+  setData(data) {
+    this.set({ data });
+  }
+  getProps() {
+    return FEAASComponentsProps(this);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.payload = void 0;
+    this.needsRefresh = true;
+    super.attributeChangedCallback(name, oldValue, newValue);
+  }
   getOriginal() {
     const scope = this.getAttribute("data-path-scope");
     if (!scope)
@@ -1185,277 +1461,372 @@ var HTMLFeaasComponent = class extends WebComponent {
     }
     return last;
   }
-  getData() {
-    var _a;
-    if (this.data) {
-      return this.data;
-    }
-    if (this.getAttribute("data")) {
-      const dataValue = this.getAttribute("data");
-      return typeof dataValue == "string" ? JSON.parse(dataValue) : {};
-    }
-    return ((_a = this.getOriginal()) == null ? void 0 : _a.getData()) || {};
-    return {};
+  isReadyToLoad() {
+    return super.isReadyToLoad() && this.props.library != null && this.props.component != null && this.props.version != null;
   }
-  render() {
-    if (this.getOriginal()) {
-      return;
-    }
-    const newProps = this.getProps();
-    if (this.template == null) {
-      if (!this.isFetching) {
-        if (newProps.component != null && newProps.version != null) {
-          this.isFetching = true;
-          fetchComponent(newProps, (template) => {
-            this.template = template;
-            this.isFetching = false;
-            renderDOMContent(this, this.template, newProps.data);
-          }).catch(() => {
-            console.error(
-              `FEAAS: Could not fetch component: ${newProps.component}/${newProps.version}/${newProps.revision}`
-            );
-          });
-        }
+  load() {
+    return __async(this, null, function* () {
+      if (this.getOriginal()) {
+        return;
+      }
+      try {
+        fetchComponent(this.props, this.onLoad);
+      } catch (e) {
+        console.error(
+          `FEAAS: Could not fetch component: ${this.props.component}/${this.props.version}/${this.props.revision}`
+        );
       }
+    });
+  }
+  render() {
+    if (Array.from(this.children).filter((c) => c.tagName != "BR").length > 0 && !this.needsRefresh) {
+      renderDOMElement(this, this.props.data);
     } else {
-      renderDOMContent(this, this.template, newProps.data);
+      this.needsRefresh = true;
+      if (this.getOriginal()) {
+        return;
+      }
+      renderDOMContent(this, this.payload, this.props.data);
     }
   }
-  getProps() {
-    return {
-      data: this.getData(),
-      library: this.getAttribute("library") || void 0,
-      component: this.getAttribute("component") || void 0,
-      version: this.getAttribute("version") || void 0,
-      revision: this.getAttribute("revision") || void 0,
-      hostname: patchHostname(this.getAttribute("hostname") || void 0)
-    };
-  }
 };
-var HTMLFeaasStylesheet = class extends WebComponent {
+FEAASComponent.observedAttributes = ["library", "component", "version", "revision", "hostname", "cdn", "template", "data"];
+FEAASComponent.register("feaas-component");
+
+// src/components/FEAASEditor.tsx
+function getFramePosition(element) {
+  let positions = [];
+  if (element) {
+    let currentWindow = element.ownerDocument.defaultView;
+    let currentParentWindow;
+    let rect;
+    while (currentWindow !== window.top) {
+      currentParentWindow = currentWindow.parent;
+      for (let idx = 0; idx < currentParentWindow.frames.length; idx++)
+        if (currentParentWindow.frames[idx] === currentWindow) {
+          for (let frameElement of currentParentWindow.document.getElementsByTagName("iframe")) {
+            if (frameElement.contentWindow === currentWindow) {
+              rect = frameElement.getBoundingClientRect();
+              const style = frameElement.contentWindow.getComputedStyle(frameElement);
+              positions.push({
+                left: rect.left + parseInt(style.borderLeftWidth),
+                top: rect.top + parseInt(style.borderTopWidth)
+              });
+            }
+          }
+          currentWindow = currentParentWindow;
+          break;
+        }
+    }
+  }
+  return positions.reduce(
+    (accumulator, currentValue) => {
+      return {
+        left: accumulator.left + currentValue.left,
+        top: accumulator.top + currentValue.top
+      };
+    },
+    { left: 0, top: 0 }
+  );
+}
+function FEAASEditorProps(element = this) {
+  var _a;
+  return {
+    context: HTMLElement,
+    frontend: element == null ? void 0 : element.getContextAttribute("frontend"),
+    src: (_a = element == null ? void 0 : element.getAttribute("src")) != null ? _a : "/assets/editor.js",
+    library: element == null ? void 0 : element.getAttribute("library"),
+    component: element == null ? void 0 : element.getAttribute("component"),
+    version: element == null ? void 0 : element.getAttribute("version"),
+    revision: (element == null ? void 0 : element.getAttribute("revision")) || "saved",
+    hidden: (element == null ? void 0 : element.getAttribute("hidden")) != null,
+    for: element == null ? void 0 : element.getAttribute("for")
+  };
+}
+var FEAASEditor = class extends FEAASBase {
   constructor() {
     super(...arguments);
-    this.connected = false;
+    this.framePoint = { top: 0, left: 0 };
+    this.wrapperRect = { top: 0, left: 0, width: 0, height: 0 };
+    this.bodyRect = { top: 0, left: 0, width: 0, height: 0 };
+    this.getTarget = () => {
+      return document.querySelector("iframe").contentWindow.document.getElementById(this.props.for);
+    };
+    this.onChromeMeasureElement = (element, rect) => {
+      if (rect == null) {
+        rect = element.getBoundingClientRect();
+      }
+      if (element.ownerDocument == document) {
+        return {
+          left: rect.left - this.bodyRect.left,
+          top: rect.top - this.bodyRect.top,
+          width: rect.width,
+          height: rect.height
+        };
+      }
+      return {
+        left: rect.left + this.framePoint.left - this.bodyRect.left,
+        top: rect.top + this.framePoint.top - this.bodyRect.top,
+        width: rect.width,
+        height: rect.height
+      };
+    };
+    this.onBeforeMeasure = (refs) => {
+      if (refs.memoized.focusable)
+        this.framePoint = getFramePosition(refs.memoized.focusable);
+      this.wrapperRect = this.wrapper.getBoundingClientRect();
+      this.bodyRect = this.wrapper.ownerDocument.body.parentElement.getBoundingClientRect();
+    };
+    this.onMeasure = () => {
+    };
+    this.onPosition = ({ focusable, root }) => {
+      const chrome = this.wrapper.querySelector(".editor-chrome");
+      const absolute = this.wrapper.querySelector(".ui.overlays");
+      if (focusable) {
+        const topbarHeight = 64;
+        const padding = 16;
+        chrome.style.width = focusable.width + padding * 2 + "px";
+        chrome.style.height = focusable.height + padding * 1 + topbarHeight + "px";
+        chrome.style.left = focusable.left - padding + "px";
+        chrome.style.top = focusable.top - topbarHeight + "px";
+        if (absolute) {
+          absolute.style.left = root.left + "px";
+          absolute.style.top = root.top + "px";
+        }
+      } else {
+        chrome.style.left = "-1000px";
+        chrome.style.top = "-1000px";
+      }
+    };
   }
-  static get observedAttributes() {
-    return ["library", "revision", "hostname"];
+  getProps() {
+    return FEAASEditorProps(this);
   }
-  connectedCallback() {
-    this.connected = true;
-    this.render();
+  load() {
+    return import(this.formatURL(this.props.src, this.props.frontend));
+  }
+  renderReact({ children, component: componentId, version: versionId }, {
+    Editor,
+    VersionStatusList,
+    Version,
+    EditorUIUndo,
+    EditorUIMode,
+    React: { useEffect, useMemo, useState },
+    Chakra: { HStack, Box },
+    Chrome,
+    ReactDOM,
+    useSDK,
+    useSlots,
+    useModelObserver
+  }) {
+    if (!this.payload)
+      return;
+    const { sdk } = useSDK();
+    const [component, setComponent] = useState();
+    const library = sdk.library;
+    useEffect(() => {
+      return setComponent(library.components.getItem(componentId));
+    }, [componentId, library]);
+    useEffect(() => {
+      component == null ? void 0 : component.versions.fetch();
+    }, [component]);
+    const target = useMemo(this.getTarget, [this.props.for]);
+    const observedVersions = useModelObserver(component == null ? void 0 : component.versions);
+    const versions = useMemo(() => {
+      return (observedVersions == null ? void 0 : observedVersions.filter((v) => v.id == versionId || !versionId)) || [];
+    }, [observedVersions]);
+    if (!component)
+      return;
+    return useSlots(children, ({ picker, children: children2 }) => <Box ref={(el) => this.wrapper = el}><Box className="editor-wrapper" position="absolute" left={0} top={0}><Editor sdk={sdk} library={sdk.library} component={component} versions={versions} context={{
+      onChromeMeasure: this.onMeasure,
+      onChromeBeforeMeasure: this.onBeforeMeasure,
+      onChromeMeasureElement: this.onChromeMeasureElement,
+      onChromePosition: this.onPosition
+    }}>{({ editor, status, isArchivedDisplayed }) => ({
+      after: children2,
+      picker,
+      chrome: editor && <Chrome />,
+      children: component.reduceVersionRevisions(versions).filter((snapshot) => {
+        var _a;
+        return isArchivedDisplayed || !((_a = snapshot.saved || snapshot.draft) == null ? void 0 : _a.deletedAt);
+      }).map((snapshot, index) => <Box key={snapshot.head.id} position="absolute" left={0} top={0} className="editor-chrome" p={4} boxShadow="2xl" pointerEvents="none">
+        <Box className="borders" pointerEvents="none" left={0} width="4" top={0} bottom={0} backdropFilter="blur(2px)" background="rgb(244 244 244 / 80%)" position="absolute" />
+        <Box className="borders" pointerEvents="none" right={0} width="4" top={0} bottom={0} backdropFilter="blur(2px)" background="rgb(244 244 244 / 80%)" position="absolute" />
+        <Box className="borders" pointerEvents="none" top={0} height="16" left={0} right={0} backdropFilter="blur(2px)" background="rgb(244 244 244 / 80%)" position="absolute" />
+        <Box className="borders" pointerEvents="none" bottom={0} height="4" left={0} right={0} backdropFilter="blur(2px)" background="rgb(244 244 244 / 80%)" position="absolute" />
+        <Version version={snapshot.head} node={target}>{{
+          left: <HStack justifyContent="space-between">
+            <EditorUIUndo size="sm" editor={status == "ready" ? editor : null} />
+            <EditorUIMode size="sm" />
+          </HStack>,
+          middle: <VersionStatusList />
+        }}</Version>
+      </Box>)
+    })}</Editor></Box></Box>);
+  }
+  isReadyToLoad() {
+    return this.props.component != null && this.props.version != null;
   }
-  attributeChangedCallback() {
-    if (this.connected)
-      this.render();
+};
+FEAASEditor.register("feaas-editor");
+
+// src/components/FEAASPicker.tsx
+function FEAASPickerProps(element = this) {
+  var _a, _b;
+  return {
+    part: (element == null ? void 0 : element.getAttribute("part")) || "picker",
+    slot: (element == null ? void 0 : element.getAttribute("part")) || "slot",
+    mode: element == null ? void 0 : element.getAttribute("mode"),
+    frontend: (_a = element == null ? void 0 : element.getContextAttribute("frontend")) != null ? _a : "https://components.sitecorecloud.io",
+    src: (_b = element == null ? void 0 : element.getAttribute("src")) != null ? _b : "/assets/picker.js",
+    hidden: (element == null ? void 0 : element.getAttribute("hidden")) != null,
+    context: void 0,
+    onClose: void 0
+  };
+}
+var FEAASPicker = class extends FEAASBase {
+  getProps() {
+    return FEAASPickerProps(this);
   }
-  render() {
-    const props = this.getProps();
-    fetchStylesheet(props, (cssText) => {
-      this.innerHTML = "<style>" + cssText + "</style>";
-    }).catch((e) => {
-      console.error(`FEAAS: Could not fetch stylesheet for library ${props.library}`);
-    });
+  load() {
+    return import(this.formatURL(this.props.src, this.props.frontend));
   }
-  getProps() {
-    return {
-      library: this.getAttribute("library") || void 0,
-      revision: this.getAttribute("revision") || void 0,
-      hostname: patchHostname(this.getAttribute("hostname") || void 0)
-    };
+  renderReact({ context, mode, children }, { Picker, React, ReactDOM }) {
+    return <Picker mode={mode || void 0} onClose={this.props.onClose} context={context}>{children}</Picker>;
   }
 };
-function patchHostname(url) {
-  if (typeof url == "string" && (location.hostname.includes("pages-staging") || location.hostname.includes("staging-staging"))) {
-    return url.replace("components.sitecorecloud.io", "components-staging.sitecore-staging.cloud").replace("feaascompontsapiprod", "feaascomponentsstaging");
-  } else {
-    return url;
-  }
+FEAASPicker.register("feaas-picker");
+function FEAASPickerLazyProps(element = this) {
+  var _a, _b;
+  return {
+    library: (element == null ? void 0 : element.getAttribute("library")) || "library",
+    mode: element == null ? void 0 : element.getAttribute("mode"),
+    frontend: (_a = element == null ? void 0 : element.getContextAttribute("frontend")) != null ? _a : "https://components.sitecorecloud.io",
+    src: (_b = element == null ? void 0 : element.getAttribute("src")) != null ? _b : "/assets/picker.js",
+    hidden: (element == null ? void 0 : element.getAttribute("hidden")) != null,
+    context: null,
+    getToken: null
+  };
 }
-var HTMLFeaasPickerLazy = class extends WebComponent {
+var FEAASPickerLazy = class extends FEAASBase {
   constructor() {
     super(...arguments);
-    this.src = "https://components.sitecorecloud.io/assets/picker.js";
+    this.payload = null;
     this.onClose = () => {
-      this.set({
-        mode: null
-      });
-    };
-    this.onScriptLoaded = () => {
-      this.element = document.createElement("feaas-picker");
-      this.element.style.cssText = "border: 0; width: 100%; height: 100%; display: block";
-      this.appendChild(this.element);
-      this.set(this.getProps());
+      this.setAttribute("hidden", "hidden");
     };
   }
-  static get observedAttributes() {
-    return ["library", "mode", "hidden", "src"];
-  }
-  connectedCallback() {
-    this.loader = document.createElement("feaas-loader");
-    this.loader.style.cssText = "position: absolute; top: 0; left: 0; right: 0;bottom: 0; ";
-    this.appendChild(this.loader);
-  }
-  load() {
-    if (!this.script) {
-      this.script = document.createElement("script");
-      this.script.type = "module";
-      this.script.onload = this.onScriptLoaded;
-      this.script.src = patchHostname(this.src);
-      this.script.crossOrigin = "anonymous";
-      this.appendChild(this.script);
-    }
-  }
   getProps() {
-    return {
-      mode: this.getAttribute("mode"),
-      context: this.context,
-      library: this.getAttribute("library"),
-      src: this.getAttribute("src")
-    };
+    return FEAASPickerLazyProps(this);
   }
-  attributeChangedCallback(name, oldValue, newValue) {
-    this.set(this.getProps());
-  }
-  set(options) {
-    Object.assign(this, options);
-    const keys = Object.keys(this.getProps());
-    for (var key of keys) {
-      const value = this[key];
-      if (value == null) {
-        this.removeAttribute(key);
-      } else if (this.getAttribute(key) != String(value)) {
-        this.setAttribute(key, String(value));
-      }
-    }
-    if (this.mode) {
-      this.removeAttribute("hidden");
-    } else if (this.getAttribute("hidden") == null) {
-      this.setAttribute("hidden", "hidden");
-    }
-    if (this.mode && !this.hidden) {
-      this.load();
-    }
-    if (this.element && this.element.set) {
-      this.element.onClose = this.onClose;
-      this.element.getToken = this.getToken;
-      this.element.set(options);
-    }
+  render() {
+    const { frontend, library, getToken, src, mode, context } = this.props;
+    if (this.children.length == 0)
+      this.innerHTML = `
+        <feaas-context src='/components/providers/ContextProvider.tsx' library='${library}'>
+          <feaas-picker mode='${mode}'> 
+          <feaas-loader />
+        </feaas-context>
+      `;
+    this.refs.context.set({
+      frontend,
+      library,
+      getToken
+    });
+    this.refs.picker.set({
+      frontend,
+      context,
+      src,
+      mode,
+      onClose: this.onClose
+    });
   }
 };
-var HTMLFeaasLoader = class extends WebComponent {
-  static get observedAttributes() {
-    return ["hidden"];
-  }
-  connectedCallback() {
-    this.style.opacity = "1";
-    this.style.transition = "opacity 0.1s 0.2s";
-    this.stylesheet = document.createElement("style");
-    this.stylesheet.textContent = `
-#loader {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #f6f6ff;
-  z-index: 1000;
-  opacity: 1;
-  transition: top 0.3s, background-color 0.7s 0.3s;
-}
-@keyframes loader-disappearance {
-  100% {
-    opacity: 0;
-  }
+FEAASPickerLazy.register("feaas-picker-lazy");
+
+// src/components/FEAASContext.tsx
+function FEAASContextProps(element = this) {
+  var _a, _b, _c, _d;
+  return {
+    library: element == null ? void 0 : element.getAttribute("library"),
+    src: (_a = element == null ? void 0 : element.getAttribute("src")) != null ? _a : "/assets/context.js",
+    frontend: (_b = element == null ? void 0 : element.getAttribute("frontend")) != null ? _b : "https://components.sitecoreclud.io",
+    backend: (_c = element == null ? void 0 : element.getAttribute("backend")) != null ? _c : "https://components-api.sitecoreclud.io",
+    cdn: (_d = element == null ? void 0 : element.getAttribute("cdn")) != null ? _d : "https://feaascompontsapiprod.blob.core.windows.net",
+    getToken: null
+  };
 }
-@keyframes loader-appearance {
-  0% {
-    opacity: 0;
+var FEAASContext = class extends FEAASBase {
+  getProps() {
+    return FEAASContextProps(this);
   }
-}
-@keyframes loader-circular-track {
-  0% {
-    stroke-dasharray: 1, 400;
-    stroke-dashoffset: 0;
+  load() {
+    return import(this.formatURL(this.props.src, this.props.frontend));
   }
-  50% {
-    stroke-dasharray: 400, 400;
-    stroke-dashoffset: -100;
+  getTheme(theme) {
+    return theme;
   }
-  100% {
-    stroke-dasharray: 400, 400;
-    stroke-dashoffset: -260;
+  getRoot() {
+    return this.shadowRoot || this.attachShadow({ mode: "open" });
   }
-}
-
-@keyframes loader-circular-spinner {
-  0% {
-    transform: rotate(0deg);
+  getReactRoot() {
+    if (!this.reactRoot) {
+      this.reactRoot = document.createElement("div");
+      this.getRoot().appendChild(this.reactRoot);
+    }
+    return this.reactRoot;
   }
-
-  100% {
-    transform: rotate(360deg);
+  adoptedCallback(event) {
+    super.adoptedCallback(event);
+    const target = event.composedPath()[0];
+    if (target.parentNode != this.getRoot()) {
+      this.getRoot().appendChild(target);
+    }
   }
-}
-#loader .spinner {
-  animation: loader-disappearance 0.6s both;
-  width: 48px;
-  height: 48px;
-}
-#loader .spinner {
-  animation: loader-appearance 0.6s both;
-}
-`;
-    this.root = this.attachShadow({ mode: "open" });
-    this.loader = document.createElement("div");
-    this.loader.id = "loader";
-    this.loader.innerHTML = `
-<div class="spinner">
-  <svg
-    viewBox="0 0 100 100"
-    style="
-      animation: 2s linear 0s infinite normal none running loader-circular-spinner;
-      display: block;
-      width: 48px;
-      height: 48px;
-    "
-  >
-    <circle fill="transparent" cx="50" cy="50" r="42" stroke="rgba(0,0,0,0.1)" stroke-width="10px"></circle>
-    <circle
-      fill="transparent"
-      stroke="#5548D9"
-      cx="50"
-      cy="50"
-      r="42"
-      stroke-width="10px"
-      stroke-linecap="round"
-      style="animation: 1.5s linear 0s infinite normal none running loader-circular-track"
-    ></circle>
-  </svg>
-</div>`;
-    this.shadowRoot.appendChild(this.stylesheet);
-    this.shadowRoot.appendChild(this.loader);
+  renderReact({ children, library }, { AppContext, Chakra: { Button, Tooltip }, React: { useRef } }) {
+    Tooltip.defaultProps = {
+      hasArrow: true,
+      placement: "top",
+      portalProps: {
+        containerRef: { current: this.getRoot() }
+      }
+    };
+    return <AppContext libraryId={this.props.library} container={this.getRoot()} getTheme={this.getTheme} modalProps={{
+      portalProps: {
+        containerRef: { current: this.getRoot() }
+      }
+    }} chakraProps={{
+      cssVarsRoot: ":host",
+      resetCSS: true,
+      toastOptions: {
+        portalProps: {
+          containerRef: { current: this.getRoot() }
+        }
+      }
+    }}>{children}</AppContext>;
   }
 };
-if (typeof window != "undefined" && !window.customElements.get("feaas-stylesheet")) {
-  window.customElements.define("feaas-stylesheet", HTMLFeaasStylesheet);
-  window.customElements.define("feaas-component", HTMLFeaasComponent);
-  window.customElements.define("feaas-picker-lazy", HTMLFeaasPickerLazy);
-  if (!window.customElements.get("feaas-loader"))
-    window.customElements.define("feaas-loader", HTMLFeaasLoader);
-}
-
-// src/index.ts
-var src_default = __spreadValues(__spreadValues({}, dom_exports), webcomponent_exports);
+FEAASContext.observedAttributes = ["library", "component", "version", "revision", "hostname", "template"];
+FEAASContext.register("feaas-context");
 export {
-  HTMLFeaasComponent,
-  HTMLFeaasStylesheet,
+  FEAASComponent,
+  FEAASComponentsProps,
+  FEAASContext,
+  FEAASContextProps,
+  FEAASEditor,
+  FEAASEditorProps,
+  FEAASLoader,
+  FEAASLoaderProps,
+  FEAASPicker,
+  FEAASPickerLazy,
+  FEAASPickerLazyProps,
+  FEAASPickerProps,
+  FEAASStylesheet,
+  FEAASStylesheetProps,
   autoloadScripts,
   cleanCollectionBit,
-  src_default as default,
   fetchAndRevalidate,
+  getFramePosition,
   loadScript,
   normalizeCollectionScope,
   observeDOMElement,