@comet/site-react 9.0.0-beta.3 → 9.0.0-beta.4

package/lib/graphQLFetch/graphQLFetch.js

@@ -1,125 +1 @@
-function convertPreviewDataToHeaders(previewData) {
-  const { includeInvisibleBlocks, includeInvisiblePages } = {
-    includeInvisiblePages: !!previewData,
-    includeInvisibleBlocks: previewData && previewData.includeInvisible
-  };
-  const headers = {};
-  const includeInvisibleContentHeaderEntries = [];
-  if (includeInvisiblePages) {
-    includeInvisibleContentHeaderEntries.push("Pages:Unpublished");
-  }
-  if (includeInvisibleBlocks) {
-    includeInvisibleContentHeaderEntries.push("Blocks:Invisible");
-  }
-  if (includeInvisibleContentHeaderEntries.length > 0) {
-    headers["x-include-invisible-content"] = includeInvisibleContentHeaderEntries.join(",");
-    headers["x-preview-dam-urls"] = "1";
-  }
-  return headers;
-}
-const gql = (chunks, ...variables) => {
-  return chunks.reduce((acc, chunk, index) => {
-    let variable;
-    if (index in variables) {
-      if (typeof variables[index] !== "string") {
-        let errorMessage = `Non-string variable in the GraphQL document
-
-This is most likely due to importing a GraphQL document from a React Client Component.
-All GraphQL documents need to be imported from React Server Components (i.e. no "use client" notation).`;
-        if (chunk.trim().length > 0) {
-          errorMessage += `
-
-The error occurred in the following GraphQL document:
-${chunk}`;
-        }
-        throw new Error(errorMessage);
-      } else {
-        variable = variables[index];
-      }
-    } else {
-      variable = "";
-    }
-    return `${acc}${chunk}${variable}`;
-  }, ``);
-};
-function createFetchWithPreviewHeaders(fetch, previewData) {
-  const defaultHeaders = convertPreviewDataToHeaders(previewData);
-  return createFetchWithDefaults(fetch, { headers: defaultHeaders });
-}
-function createFetchWithDefaults(fetch, defaults) {
-  return async function(input, init) {
-    return fetch(input, {
-      ...defaults,
-      ...init,
-      headers: {
-        ...defaults.headers,
-        ...init == null ? void 0 : init.headers
-      }
-    });
-  };
-}
-function createGraphQLFetch(fetch, url) {
-  return async function(query, variables, init) {
-    let response;
-    if ((init == null ? void 0 : init.method) === "GET") {
-      const fetchUrl = new URL(url);
-      fetchUrl.searchParams.append("query", query);
-      fetchUrl.searchParams.append("variables", JSON.stringify(variables));
-      response = await fetch(fetchUrl, {
-        ...init,
-        headers: {
-          /**
-           * It's recommended to add the `Apollo-Require-Preflight` header to GET requests, running on an Apollo Server 4.
-           *
-           * If this header is missing, Apollo Server 4 will return: This operation has been blocked as a potential Cross-Site Request Forgery (CSRF).
-           *
-           * see: https://www.apollographql.com/docs/graphos/routing/security/csrf#enable-csrf-prevention
-           */
-          "Apollo-Require-Preflight": "true",
-          ...init.headers
-        }
-      });
-    } else {
-      response = await fetch(url, {
-        method: "POST",
-        ...init,
-        headers: { "Content-Type": "application/json", ...init == null ? void 0 : init.headers },
-        body: JSON.stringify({
-          query,
-          variables
-        })
-      });
-    }
-    if (!response.ok) {
-      let errorMessage = `Network response was not ok. Status: ${response.status}`;
-      const body = await response.text();
-      try {
-        const json = JSON.parse(body);
-        const { errors: errors2 } = json;
-        if (errors2) {
-          errorMessage += `
-
-GraphQL error(s):
-- ${errors2.map((error) => error.message).join("\n- ")}`;
-        }
-      } catch {
-        errorMessage += `
-${body}`;
-      }
-      throw new Error(errorMessage);
-    }
-    const { data, errors } = await response.json();
-    if (errors) {
-      throw new Error(`GraphQL error(s):
-- ${errors.map((error) => error.message).join("\n- ")}`);
-    }
-    return data;
-  };
-}
-export {
-  convertPreviewDataToHeaders,
-  createFetchWithDefaults,
-  createFetchWithPreviewHeaders,
-  createGraphQLFetch,
-  gql
-};
+function e(e){const{includeInvisibleBlocks:n,includeInvisiblePages:r}={includeInvisiblePages:!!e,includeInvisibleBlocks:e&&e.includeInvisible},t={},i=[];return r&&i.push("Pages:Unpublished"),n&&i.push("Blocks:Invisible"),i.length>0&&(t["x-include-invisible-content"]=i.join(","),t["x-preview-dam-urls"]="1"),t}const n=(e,...n)=>e.reduce((e,r,t)=>{let i;if(t in n){if("string"!=typeof n[t]){let e='Non-string variable in the GraphQL document\n\nThis is most likely due to importing a GraphQL document from a React Client Component.\nAll GraphQL documents need to be imported from React Server Components (i.e. no "use client" notation).';throw r.trim().length>0&&(e+=`\n\nThe error occurred in the following GraphQL document:\n${r}`),new Error(e)}i=n[t]}else i="";return`${e}${r}${i}`},"");function r(n,r){return t(n,{headers:e(r)})}function t(e,n){return async function(r,t){return e(r,{...n,...t,headers:{...n.headers,...t?.headers}})}}function i(e,n){return async function(r,t,i){let o;if("GET"===i?.method){const s=new URL(n);s.searchParams.append("query",r),s.searchParams.append("variables",JSON.stringify(t)),o=await e(s,{...i,headers:{"Apollo-Require-Preflight":"true",...i.headers}})}else o=await e(n,{method:"POST",...i,headers:{"Content-Type":"application/json",...i?.headers},body:JSON.stringify({query:r,variables:t})});if(!o.ok){let e=`Network response was not ok. Status: ${o.status}`;const n=await o.text();try{const r=JSON.parse(n),{errors:t}=r;t&&(e+=`\n\nGraphQL error(s):\n- ${t.map(e=>e.message).join("\n- ")}`)}catch{e+=`\n${n}`}throw new Error(e)}const{data:s,errors:a}=await o.json();if(a)throw new Error(`GraphQL error(s):\n- ${a.map(e=>e.message).join("\n- ")}`);return s}}export{e as convertPreviewDataToHeaders,t as createFetchWithDefaults,r as createFetchWithPreviewHeaders,i as createGraphQLFetch,n as gql};

package/lib/iframebridge/IFrameBridge.js

@@ -1,254 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { decodeJwt } from "jose";
-import isEqual from "lodash.isequal";
-import { useState, useRef, useCallback, useEffect, useMemo, createContext } from "react";
-import { useDebounceCallback } from "usehooks-ts";
-import styles from "./IFrameBridge.module.scss.js";
-import { AdminMessageType, IFrameMessageType } from "./IFrameMessage.js";
-import { PreviewOverlay } from "./PreviewOverlay.js";
-import { getRecursiveChildrenOfPreviewElement, getCombinedPositioningOfElements, PREVIEW_ELEMENT_SCROLLED_INTO_VIEW_EVENT } from "./utils.js";
-const IFrameBridgeContext = createContext({
-  hasBridge: false,
-  showOutlines: false,
-  showOnlyVisible: false,
-  sendSelectComponent: () => {
-  },
-  sendHoverComponent: () => {
-  },
-  sendMessage: () => {
-  },
-  contentScope: void 0,
-  contentScopeJwt: "",
-  graphQLApiUrl: void 0,
-  previewElementsData: [],
-  removePreviewElement: () => {
-  },
-  addPreviewElement: () => {
-  }
-});
-function getContentScopeFromJwt(jwt) {
-  try {
-    const parsedJwt = decodeJwt(jwt);
-    return parsedJwt.scope;
-  } catch (e) {
-    console.error("Failed to parse content scope JWT", e);
-    return void 0;
-  }
-}
-const IFrameBridgeProvider = ({ children }) => {
-  var _a;
-  const [block, setBlock] = useState(void 0);
-  const [showOnlyVisible, setShowOnlyVisible] = useState(false);
-  const [selectedAdminRoute, setSelectedAdminRoute] = useState(void 0);
-  const [hoveredAdminRoute, setHoveredAdminRoute] = useState(null);
-  const [showOutlines, setShowOutlines] = useState(false);
-  const [contentScope, setContentScope] = useState(void 0);
-  const [contentScopeJwt, setContentScopeJwt] = useState("");
-  const [graphQLApiUrl, setGraphQLApiUrl] = useState("");
-  const [previewElements, setPreviewElements] = useState([]);
-  const [previewElementsData, setPreviewElementsData] = useState([]);
-  const childrenWrapperRef = useRef(null);
-  const childrenWrapperWidth = (_a = childrenWrapperRef.current) == null ? void 0 : _a.offsetWidth;
-  const recalculatePreviewElementsData = useCallback(() => {
-    if (!childrenWrapperWidth) {
-      return;
-    }
-    const newPreviewElementsData = previewElements.map((previewElement) => {
-      const childNodes = getRecursiveChildrenOfPreviewElement(previewElement.element);
-      const positioning = getCombinedPositioningOfElements(childNodes);
-      const isRenderedOutsideOfViewportWidth = positioning.left > childrenWrapperWidth;
-      if (isRenderedOutsideOfViewportWidth) {
-        return {
-          adminRoute: previewElement.adminRoute,
-          label: previewElement.label,
-          position: {
-            top: positioning.top,
-            left: positioning.left,
-            width: 0,
-            height: positioning.height
-          }
-        };
-      }
-      const spaceBetweenRightEdgeOfElementAndRightEdgeOfViewport = positioning.left + positioning.width - childrenWrapperWidth;
-      const tooWideForPreviewViewportByPixels = spaceBetweenRightEdgeOfElementAndRightEdgeOfViewport > 0 ? spaceBetweenRightEdgeOfElementAndRightEdgeOfViewport : 0;
-      return {
-        adminRoute: previewElement.adminRoute,
-        label: previewElement.label,
-        position: {
-          top: positioning.top,
-          left: positioning.left,
-          width: positioning.width - tooWideForPreviewViewportByPixels,
-          height: positioning.height
-        }
-      };
-    }).filter((elementData) => elementData.position.width !== 0).sort((previousElementData, nextElementData) => {
-      const previousSize = previousElementData.position.width * previousElementData.position.height;
-      const nextSize = nextElementData.position.width * nextElementData.position.height;
-      return nextSize - previousSize;
-    }).map((elementData, index) => {
-      return {
-        ...elementData,
-        position: {
-          ...elementData.position,
-          zIndex: index + 1
-        }
-      };
-    });
-    setPreviewElementsData((previousElementsData) => {
-      const dataDidNotChange = isEqual(previousElementsData, newPreviewElementsData);
-      if (dataDidNotChange) {
-        return previousElementsData;
-      }
-      return newPreviewElementsData;
-    });
-  }, [previewElements, childrenWrapperWidth]);
-  useEffect(() => {
-    if (childrenWrapperRef.current) {
-      const mutationObserver = new MutationObserver(() => {
-        recalculatePreviewElementsData();
-      });
-      const resizeObserver = new ResizeObserver(() => {
-        recalculatePreviewElementsData();
-      });
-      mutationObserver.observe(childrenWrapperRef.current, { childList: true, subtree: true, attributes: true });
-      resizeObserver.observe(childrenWrapperRef.current);
-      return () => {
-        mutationObserver.disconnect();
-        resizeObserver.disconnect();
-      };
-    }
-  }, [recalculatePreviewElementsData]);
-  useEffect(() => {
-    previewElements.forEach((previewElement) => {
-      previewElement.element.addEventListener(PREVIEW_ELEMENT_SCROLLED_INTO_VIEW_EVENT, recalculatePreviewElementsData);
-    });
-    return () => {
-      previewElements.forEach((previewElement) => {
-        previewElement.element.removeEventListener(PREVIEW_ELEMENT_SCROLLED_INTO_VIEW_EVENT, recalculatePreviewElementsData);
-      });
-    };
-  }, [previewElements, recalculatePreviewElementsData]);
-  const sendMessage = useCallback((message) => {
-    window.parent.postMessage(JSON.stringify(message), "*");
-  }, []);
-  const debounceDeactivateOutlines = useDebounceCallback(() => {
-    setShowOutlines(false);
-  }, 2500);
-  const onReceiveMessage = useCallback(
-    (message) => {
-      switch (message.cometType) {
-        case AdminMessageType.Block:
-          setBlock(message.data.block);
-          break;
-        case AdminMessageType.ShowOnlyVisible:
-          setShowOnlyVisible(message.data.showOnlyVisible);
-          break;
-        case AdminMessageType.SelectComponent:
-          setSelectedAdminRoute(
-            message.data.adminRoute.lastIndexOf("#") > 0 ? message.data.adminRoute.substr(0, message.data.adminRoute.lastIndexOf("#")) : message.data.adminRoute
-          );
-          break;
-        case AdminMessageType.HoverComponent:
-          setHoveredAdminRoute(message.data.adminRoute);
-          setShowOutlines(true);
-          debounceDeactivateOutlines();
-          break;
-        case AdminMessageType.ContentScope:
-          setContentScope(getContentScopeFromJwt(message.data.contentScopeJwt));
-          setContentScopeJwt(message.data.contentScopeJwt);
-          break;
-        case AdminMessageType.GraphQLApiUrl:
-          setGraphQLApiUrl(message.data.graphQLApiUrl);
-          break;
-      }
-    },
-    [debounceDeactivateOutlines]
-  );
-  useEffect(() => {
-    if (typeof window === "undefined") {
-      return;
-    }
-    const handleMessage = (e) => {
-      try {
-        const message = JSON.parse(e.data);
-        if (message.hasOwnProperty("cometType")) {
-          onReceiveMessage(message);
-        }
-      } catch {
-      }
-    };
-    window.addEventListener("message", handleMessage, false);
-    sendMessage({ cometType: IFrameMessageType.Ready });
-    return () => {
-      window.removeEventListener("message", handleMessage, false);
-    };
-  }, [onReceiveMessage, sendMessage]);
-  const addPreviewElement = useCallback(
-    (element) => {
-      setPreviewElements((prev) => [...prev, element]);
-    },
-    [setPreviewElements]
-  );
-  const removePreviewElement = useCallback(
-    (element) => {
-      setPreviewElements((prev) => prev.filter((el) => el.adminRoute !== element.adminRoute));
-    },
-    [setPreviewElements]
-  );
-  const iFrameBridgeValues = useMemo(
-    () => ({
-      showOutlines,
-      hasBridge: true,
-      block,
-      showOnlyVisible,
-      selectedAdminRoute,
-      hoveredAdminRoute,
-      sendSelectComponent: (adminRoute) => {
-        setSelectedAdminRoute(adminRoute);
-        sendMessage({ cometType: IFrameMessageType.SelectComponent, data: { adminRoute } });
-      },
-      sendHoverComponent: (route) => {
-        sendMessage({ cometType: IFrameMessageType.HoverComponent, data: { route } });
-      },
-      sendMessage,
-      contentScope,
-      contentScopeJwt,
-      graphQLApiUrl,
-      previewElementsData,
-      addPreviewElement,
-      removePreviewElement
-    }),
-    [
-      showOutlines,
-      block,
-      showOnlyVisible,
-      selectedAdminRoute,
-      hoveredAdminRoute,
-      sendMessage,
-      contentScope,
-      contentScopeJwt,
-      graphQLApiUrl,
-      previewElementsData,
-      addPreviewElement,
-      removePreviewElement
-    ]
-  );
-  return /* @__PURE__ */ jsx(IFrameBridgeContext.Provider, { value: iFrameBridgeValues, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      onMouseMove: () => {
-        setShowOutlines(true);
-        debounceDeactivateOutlines();
-      },
-      children: [
-        /* @__PURE__ */ jsx(PreviewOverlay, {}),
-        /* @__PURE__ */ jsx("div", { ref: childrenWrapperRef, className: styles.childrenWrapper, children })
-      ]
-    }
-  ) });
-};
-export {
-  IFrameBridgeContext,
-  IFrameBridgeProvider
-};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{decodeJwt as o}from"jose";import n from"lodash.isequal";import{useState as r,useRef as i,useCallback as s,useEffect as a,useMemo as d,createContext as c}from"react";import{useDebounceCallback as l}from"usehooks-ts";import m from"./IFrameBridge.module.scss.js";import{AdminMessageType as p,IFrameMessageType as h}from"./IFrameMessage.js";import{PreviewOverlay as u}from"./PreviewOverlay.js";import{getRecursiveChildrenOfPreviewElement as v,getCombinedPositioningOfElements as w,PREVIEW_ELEMENT_SCROLLED_INTO_VIEW_EVENT as f}from"./utils.js";const b=c({hasBridge:!1,showOutlines:!1,showOnlyVisible:!1,sendSelectComponent:()=>{},sendHoverComponent:()=>{},sendMessage:()=>{},contentScope:void 0,contentScopeJwt:"",graphQLApiUrl:void 0,previewElementsData:[],removePreviewElement:()=>{},addPreviewElement:()=>{}});const g=({children:c})=>{const[g,y]=r(void 0),[R,O]=r(!1),[S,E]=r(void 0),[k,C]=r(null),[L,J]=r(!1),[M,P]=r(void 0),[j,A]=r(""),[T,x]=r(""),[I,B]=r([]),[H,Q]=r([]),U=i(null),V=U.current?.offsetWidth,F=s(()=>{if(!V)return;const e=I.map(e=>{const t=v(e.element),o=w(t);if(o.left>V)return{adminRoute:e.adminRoute,label:e.label,position:{top:o.top,left:o.left,width:0,height:o.height}};const n=o.left+o.width-V,r=n>0?n:0;return{adminRoute:e.adminRoute,label:e.label,position:{top:o.top,left:o.left,width:o.width-r,height:o.height}}}).filter(e=>0!==e.position.width).sort((e,t)=>{const o=e.position.width*e.position.height;return t.position.width*t.position.height-o}).map((e,t)=>({...e,position:{...e.position,zIndex:t+1}}));Q(t=>n(t,e)?t:e)},[I,V]);a(()=>{if(U.current){const e=new MutationObserver(()=>{F()}),t=new ResizeObserver(()=>{F()});return e.observe(U.current,{childList:!0,subtree:!0,attributes:!0}),t.observe(U.current),()=>{e.disconnect(),t.disconnect()}}},[F]),a(()=>(I.forEach(e=>{e.element.addEventListener(f,F)}),()=>{I.forEach(e=>{e.element.removeEventListener(f,F)})}),[I,F]);const N=s(e=>{window.parent.postMessage(JSON.stringify(e),"*")},[]),W=l(()=>{J(!1)},2500),z=s(e=>{switch(e.cometType){case p.Block:y(e.data.block);break;case p.ShowOnlyVisible:O(e.data.showOnlyVisible);break;case p.SelectComponent:E(e.data.adminRoute.lastIndexOf("#")>0?e.data.adminRoute.substr(0,e.data.adminRoute.lastIndexOf("#")):e.data.adminRoute);break;case p.HoverComponent:C(e.data.adminRoute),J(!0),W();break;case p.ContentScope:P(function(e){try{return o(e).scope}catch(t){return void console.error("Failed to parse content scope JWT",t)}}(e.data.contentScopeJwt)),A(e.data.contentScopeJwt);break;case p.GraphQLApiUrl:x(e.data.graphQLApiUrl)}},[W]);a(()=>{if("undefined"==typeof window)return;const e=e=>{try{const t=JSON.parse(e.data);t.hasOwnProperty("cometType")&&z(t)}catch{}};return window.addEventListener("message",e,!1),N({cometType:h.Ready}),()=>{window.removeEventListener("message",e,!1)}},[z,N]);const D=s(e=>{B(t=>[...t,e])},[B]),q=s(e=>{B(t=>t.filter(t=>t.adminRoute!==e.adminRoute))},[B]),G=d(()=>({showOutlines:L,hasBridge:!0,block:g,showOnlyVisible:R,selectedAdminRoute:S,hoveredAdminRoute:k,sendSelectComponent:e=>{E(e),N({cometType:h.SelectComponent,data:{adminRoute:e}})},sendHoverComponent:e=>{N({cometType:h.HoverComponent,data:{route:e}})},sendMessage:N,contentScope:M,contentScopeJwt:j,graphQLApiUrl:T,previewElementsData:H,addPreviewElement:D,removePreviewElement:q}),[L,g,R,S,k,N,M,j,T,H,D,q]);/* @__PURE__ */
+return e(b.Provider,{value:G,children:/* @__PURE__ */t("div",{onMouseMove:()=>{J(!0),W()},children:[
+/* @__PURE__ */e(u,{}),
+/* @__PURE__ */e("div",{ref:U,className:m.childrenWrapper,children:c})]})})};export{b as IFrameBridgeContext,g as IFrameBridgeProvider};

package/lib/iframebridge/IFrameBridge.module.scss.js

@@ -1,8 +1 @@
-const childrenWrapper = "_childrenWrapper_qguhx_1";
-const styles = {
-  childrenWrapper
-};
-export {
-  childrenWrapper,
-  styles as default
-};
+const r="_childrenWrapper_qguhx_1",e={childrenWrapper:r};export{r as childrenWrapper,e as default};

package/lib/iframebridge/IFrameMessage.js

@@ -1,21 +1 @@
-var IFrameMessageType = /* @__PURE__ */ ((IFrameMessageType2) => {
-  IFrameMessageType2["Ready"] = "Ready";
-  IFrameMessageType2["SelectComponent"] = "SelectComponent";
-  IFrameMessageType2["HoverComponent"] = "HoverComponent";
-  IFrameMessageType2["OpenLink"] = "OpenLink";
-  IFrameMessageType2["SitePreviewLocation"] = "SitePreviewLocation";
-  return IFrameMessageType2;
-})(IFrameMessageType || {});
-var AdminMessageType = /* @__PURE__ */ ((AdminMessageType2) => {
-  AdminMessageType2["Block"] = "Block";
-  AdminMessageType2["ShowOnlyVisible"] = "ShowOnlyVisible";
-  AdminMessageType2["SelectComponent"] = "SelectComponent";
-  AdminMessageType2["HoverComponent"] = "HoverComponent";
-  AdminMessageType2["ContentScope"] = "ContentScope";
-  AdminMessageType2["GraphQLApiUrl"] = "GraphQLApiUrl";
-  return AdminMessageType2;
-})(AdminMessageType || {});
-export {
-  AdminMessageType,
-  IFrameMessageType
-};
+var e=/* @__PURE__ */(e=>(e.Ready="Ready",e.SelectComponent="SelectComponent",e.HoverComponent="HoverComponent",e.OpenLink="OpenLink",e.SitePreviewLocation="SitePreviewLocation",e))(e||{}),o=/* @__PURE__ */(e=>(e.Block="Block",e.ShowOnlyVisible="ShowOnlyVisible",e.SelectComponent="SelectComponent",e.HoverComponent="HoverComponent",e.ContentScope="ContentScope",e.GraphQLApiUrl="GraphQLApiUrl",e))(o||{});export{o as AdminMessageType,e as IFrameMessageType};

package/lib/iframebridge/Preview.js

@@ -1,57 +1,2 @@
 "use client";
-import { jsx, Fragment } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
-import scrollIntoView from "scroll-into-view-if-needed";
-import styles from "./Preview.module.scss.js";
-import { useIFrameBridge } from "./useIFrameBridge.js";
-import { PREVIEW_ELEMENT_SCROLLED_INTO_VIEW_EVENT, BLOCK_PREVIEW_CONTAINER_DATA_ATTRIBUTE } from "./utils.js";
-const Preview = ({ adminRoute, children, label, enabledAutoScrolling = true }) => {
-  const { addPreviewElement, removePreviewElement, ...iFrameBridge } = useIFrameBridge();
-  const isSelected = adminRoute === iFrameBridge.selectedAdminRoute;
-  const isHovered = adminRoute === iFrameBridge.hoveredAdminRoute;
-  const previewElementContainerRef = useRef(null);
-  useEffect(() => {
-    const previewElement = previewElementContainerRef.current ? {
-      label,
-      adminRoute,
-      element: previewElementContainerRef.current
-    } : null;
-    if (previewElement) {
-      addPreviewElement(previewElement);
-      return () => {
-        removePreviewElement(previewElement);
-      };
-    }
-  }, [label, adminRoute, addPreviewElement, removePreviewElement]);
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      var _a;
-      if (enabledAutoScrolling) {
-        if (isHovered || isSelected) {
-          if ((_a = previewElementContainerRef.current) == null ? void 0 : _a.firstElementChild) {
-            scrollIntoView(previewElementContainerRef.current.firstElementChild, {
-              scrollMode: "if-needed",
-              block: "center",
-              inline: "nearest",
-              behavior: "smooth"
-            });
-            setTimeout(() => {
-              var _a2;
-              (_a2 = previewElementContainerRef.current) == null ? void 0 : _a2.dispatchEvent(new Event(PREVIEW_ELEMENT_SCROLLED_INTO_VIEW_EVENT));
-            }, 600);
-          }
-        }
-      }
-    }, 500);
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [enabledAutoScrolling, isHovered, isSelected]);
-  if (iFrameBridge.hasBridge) {
-    return /* @__PURE__ */ jsx("div", { ref: previewElementContainerRef, className: styles.previewElementContainer, ...{ [BLOCK_PREVIEW_CONTAINER_DATA_ATTRIBUTE]: "" }, children });
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children });
-};
-export {
-  Preview
-};
+import{jsx as e,Fragment as r}from"react/jsx-runtime";import{useRef as t,useEffect as n}from"react";import i from"scroll-into-view-if-needed";import o from"./Preview.module.scss.js";import{useIFrameBridge as l}from"./useIFrameBridge.js";import{PREVIEW_ELEMENT_SCROLLED_INTO_VIEW_EVENT as m,BLOCK_PREVIEW_CONTAINER_DATA_ATTRIBUTE as s}from"./utils.js";const c=({adminRoute:c,children:d,label:u,enabledAutoScrolling:a=!0})=>{const{addPreviewElement:f,removePreviewElement:v,...h}=l(),p=c===h.selectedAdminRoute,E=c===h.hoveredAdminRoute,w=t(null);return n(()=>{const e=w.current?{label:u,adminRoute:c,element:w.current}:null;if(e)return f(e),()=>{v(e)}},[u,c,f,v]),n(()=>{const e=setTimeout(()=>{a&&(E||p)&&w.current?.firstElementChild&&(i(w.current.firstElementChild,{scrollMode:"if-needed",block:"center",inline:"nearest",behavior:"smooth"}),setTimeout(()=>{w.current?.dispatchEvent(new Event(m))},600))},500);return()=>{clearTimeout(e)}},[a,E,p]),h.hasBridge?/* @__PURE__ */e("div",{ref:w,className:o.previewElementContainer,[s]:"",children:d}):/* @__PURE__ */e(r,{children:d})};export{c as Preview};

package/lib/iframebridge/Preview.module.scss.js

@@ -1,8 +1 @@
-const previewElementContainer = "_previewElementContainer_nwhl6_1";
-const styles = {
-  previewElementContainer
-};
-export {
-  styles as default,
-  previewElementContainer
-};
+const e="_previewElementContainer_nwhl6_1",n={previewElementContainer:e};export{n as default,e as previewElementContainer};

package/lib/iframebridge/PreviewOverlay.js

@@ -1,28 +1 @@
-import { jsx } from "react/jsx-runtime";
-import styles from "./PreviewOverlay.module.scss.js";
-import { PreviewOverlayElement } from "./PreviewOverlayElement.js";
-import { useIFrameBridge } from "./useIFrameBridge.js";
-let lastSelectedElementPath = "";
-const PreviewOverlay = () => {
-  const iFrameBridge = useIFrameBridge();
-  let bottomMostElementPosition = 0;
-  iFrameBridge.previewElementsData.forEach((element) => {
-    if (element.position.zIndex > 1) {
-      return;
-    }
-    const elementBottom = element.position.top + element.position.height;
-    if (elementBottom > bottomMostElementPosition) {
-      bottomMostElementPosition = elementBottom;
-    }
-  });
-  return /* @__PURE__ */ jsx("div", { className: styles.root, style: { "--height": `${bottomMostElementPosition}px` }, children: iFrameBridge.previewElementsData.map((element, index) => {
-    const isSelected = element.adminRoute === iFrameBridge.selectedAdminRoute;
-    if (isSelected && lastSelectedElementPath !== element.adminRoute) {
-      lastSelectedElementPath = element.adminRoute;
-    }
-    return /* @__PURE__ */ jsx(PreviewOverlayElement, { element }, index);
-  }) });
-};
-export {
-  PreviewOverlay
-};
+import{jsx as e}from"react/jsx-runtime";import t from"./PreviewOverlay.module.scss.js";import{PreviewOverlayElement as o}from"./PreviewOverlayElement.js";import{useIFrameBridge as r}from"./useIFrameBridge.js";let i="";const m=()=>{const m=r();let s=0;return m.previewElementsData.forEach(e=>{if(e.position.zIndex>1)return;const t=e.position.top+e.position.height;t>s&&(s=t)}),/* @__PURE__ */e("div",{className:t.root,style:{"--height":`${s}px`},children:m.previewElementsData.map((t,r)=>(t.adminRoute===m.selectedAdminRoute&&i!==t.adminRoute&&(i=t.adminRoute),/* @__PURE__ */e(o,{element:t},r)))})};export{m as PreviewOverlay};

package/lib/iframebridge/PreviewOverlay.module.scss.js

@@ -1,8 +1 @@
-const root = "_root_v4248_1";
-const styles = {
-  root
-};
-export {
-  styles as default,
-  root
-};
+const o="_root_v4248_1",t={root:o};export{t as default,o as root};

package/lib/iframebridge/PreviewOverlayElement.js

@@ -1,36 +1,2 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import styles from "./PreviewOverlayElement.module.scss.js";
-import { useIFrameBridge } from "./useIFrameBridge.js";
-const PreviewOverlayElement = ({ element }) => {
-  const iFrameBridge = useIFrameBridge();
-  const isSelected = element.adminRoute === iFrameBridge.selectedAdminRoute;
-  const isHovered = element.adminRoute === iFrameBridge.hoveredAdminRoute;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx(
-        styles.root,
-        iFrameBridge.showOutlines && !isHovered && styles.showBlockOutlines,
-        isSelected && styles.blockIsSelected,
-        isHovered && styles.isHoveredInBlockList
-      ),
-      title: element.label,
-      onClick: () => {
-        iFrameBridge.sendSelectComponent(element.adminRoute);
-      },
-      onMouseEnter: () => {
-        iFrameBridge.sendHoverComponent(element.adminRoute);
-      },
-      onMouseLeave: () => {
-        iFrameBridge.sendHoverComponent(null);
-      },
-      style: element.position,
-      children: /* @__PURE__ */ jsx("div", { className: styles.label, children: element.label })
-    },
-    element.adminRoute
-  );
-};
-export {
-  PreviewOverlayElement
-};
+import{jsx as e}from"react/jsx-runtime";import o from"clsx";import t from"./PreviewOverlayElement.module.scss.js";import{useIFrameBridge as n}from"./useIFrameBridge.js";const s=({element:s})=>{const l=n(),i=s.adminRoute===l.selectedAdminRoute,m=s.adminRoute===l.hoveredAdminRoute;/* @__PURE__ */
+return e("div",{className:o(t.root,l.showOutlines&&!m&&t.showBlockOutlines,i&&t.blockIsSelected,m&&t.isHoveredInBlockList),title:s.label,onClick:()=>{l.sendSelectComponent(s.adminRoute)},onMouseEnter:()=>{l.sendHoverComponent(s.adminRoute)},onMouseLeave:()=>{l.sendHoverComponent(null)},style:s.position,children:/* @__PURE__ */e("div",{className:t.label,children:s.label})},s.adminRoute)};export{s as PreviewOverlayElement};

package/lib/iframebridge/PreviewOverlayElement.module.scss.js

@@ -1,20 +1 @@
-const root = "_root_1ya0k_1";
-const isHoveredInBlockList = "_isHoveredInBlockList_1ya0k_24";
-const showBlockOutlines = "_showBlockOutlines_1ya0k_32";
-const blockIsSelected = "_blockIsSelected_1ya0k_37";
-const label = "_label_1ya0k_40";
-const styles = {
-  root,
-  isHoveredInBlockList,
-  showBlockOutlines,
-  blockIsSelected,
-  label
-};
-export {
-  blockIsSelected,
-  styles as default,
-  isHoveredInBlockList,
-  label,
-  root,
-  showBlockOutlines
-};
+const e="_root_1ya0k_1",o="_isHoveredInBlockList_1ya0k_24",l="_showBlockOutlines_1ya0k_32",_="_blockIsSelected_1ya0k_37",s="_label_1ya0k_40",k={root:e,isHoveredInBlockList:o,showBlockOutlines:l,blockIsSelected:_,label:s};export{_ as blockIsSelected,k as default,o as isHoveredInBlockList,s as label,e as root,l as showBlockOutlines};

package/lib/iframebridge/useBlockPreviewFetch.js

@@ -1,30 +1,2 @@
 "use client";
-import { useState, useEffect } from "react";
-import { createFetchInMemoryCache } from "../graphQLFetch/fetchInMemoryCache.js";
-import { createGraphQLFetch, createFetchWithDefaults, convertPreviewDataToHeaders } from "../graphQLFetch/graphQLFetch.js";
-import { useIFrameBridge } from "./useIFrameBridge.js";
-const cachingFetch = createFetchInMemoryCache(fetch);
-function useBlockPreviewFetch(apiUrl) {
-  const { showOnlyVisible, graphQLApiUrl } = useIFrameBridge();
-  const [graphQLFetch, setGraphQLFetch] = useState(
-    () => apiUrl ? createBlockPreviewFetch(apiUrl, !showOnlyVisible) : void 0
-  );
-  useEffect(() => {
-    if (graphQLApiUrl) {
-      setGraphQLFetch(() => createBlockPreviewFetch(graphQLApiUrl, !showOnlyVisible));
-    }
-  }, [showOnlyVisible, graphQLApiUrl]);
-  return {
-    graphQLFetch,
-    fetch: cachingFetch
-  };
-}
-function createBlockPreviewFetch(graphqlApiUrl, includeInvisible) {
-  return createGraphQLFetch(
-    createFetchWithDefaults(cachingFetch, { headers: convertPreviewDataToHeaders({ includeInvisible }), credentials: "include" }),
-    graphqlApiUrl
-  );
-}
-export {
-  useBlockPreviewFetch
-};
+import{useState as r,useEffect as e}from"react";import{createFetchInMemoryCache as t}from"../graphQLFetch/fetchInMemoryCache.js";import{createGraphQLFetch as c,createFetchWithDefaults as i,convertPreviewDataToHeaders as o}from"../graphQLFetch/graphQLFetch.js";import{useIFrameBridge as h}from"./useIFrameBridge.js";const n=t(fetch);function p(t){const{showOnlyVisible:c,graphQLApiUrl:i}=h(),[o,p]=r(()=>t?s(t,!c):void 0);return e(()=>{i&&p(()=>s(i,!c))},[c,i]),{graphQLFetch:o,fetch:n}}function s(r,e){return c(i(n,{headers:o({includeInvisible:e}),credentials:"include"}),r)}export{p as useBlockPreviewFetch};

package/lib/iframebridge/useIFrameBridge.js

@@ -1,8 +1 @@
-import { useContext } from "react";
-import { IFrameBridgeContext } from "./IFrameBridge.js";
-function useIFrameBridge() {
-  return useContext(IFrameBridgeContext);
-}
-export {
-  useIFrameBridge
-};
+import{useContext as r}from"react";import{IFrameBridgeContext as o}from"./IFrameBridge.js";function t(){return r(o)}export{t as useIFrameBridge};