@webiny/app-website-builder 0.0.0-unstable.06b2ede40f

package/BaseEditor/defaultConfig/Content/Preview/ApplyTheme.js

@@ -0,0 +1,51 @@
+import { useEffect } from "react";
+import { useWebsiteBuilderTheme } from "../../../components";
+export const ApplyTheme = () => {
+  const {
+    theme
+  } = useWebsiteBuilderTheme();
+  useEffect(() => {
+    if (!theme) {
+      return;
+    }
+    if (theme.css) {
+      const existing = document.querySelector(`style[id="wb-editor-css"]`);
+      const style = document.createElement("style");
+      style.id = "wb-editor-css";
+      style.innerHTML = theme.css;
+      if (existing) {
+        existing.replaceWith(style);
+      } else {
+        document.head.appendChild(style);
+      }
+    }
+    if (theme.cssVariables) {
+      const existing = document.querySelector(`style[id="wb-editor-css-variables"]`);
+      const style = document.createElement("style");
+      style.id = "wb-editor-css-variables";
+      style.innerHTML = `:root {
+                ${Object.entries(theme.cssVariables).map(([key, value]) => `${key}: ${value}`).join("\n")}
+            `;
+      if (existing) {
+        existing.replaceWith(style);
+      } else {
+        document.head.appendChild(style);
+      }
+    }
+    if (theme.fonts) {
+      theme.fonts.forEach(font => {
+        const existing = document.querySelector(`link[href="${font}"]`);
+        if (existing) {
+          return;
+        }
+        const link = document.createElement("link");
+        link.href = font;
+        link.rel = "stylesheet";
+        document.head.appendChild(link);
+      });
+    }
+  }, [theme]);
+  return null;
+};
+
+//# sourceMappingURL=ApplyTheme.js.map

package/BaseEditor/defaultConfig/Content/Preview/ApplyTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useWebsiteBuilderTheme","ApplyTheme","theme","css","existing","document","querySelector","style","createElement","id","innerHTML","replaceWith","head","appendChild","cssVariables","Object","entries","map","key","value","join","fonts","forEach","font","link","href","rel"],"sources":["ApplyTheme.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components\";\n\nexport const ApplyTheme = () => {\n    const { theme } = useWebsiteBuilderTheme();\n\n    useEffect(() => {\n        if (!theme) {\n            return;\n        }\n\n        if (theme.css) {\n            const existing = document.querySelector(`style[id=\"wb-editor-css\"]`);\n\n            const style = document.createElement(\"style\");\n            style.id = \"wb-editor-css\";\n            style.innerHTML = theme.css;\n\n            if (existing) {\n                existing.replaceWith(style);\n            } else {\n                document.head.appendChild(style);\n            }\n        }\n\n        if (theme.cssVariables) {\n            const existing = document.querySelector(`style[id=\"wb-editor-css-variables\"]`);\n\n            const style = document.createElement(\"style\");\n            style.id = \"wb-editor-css-variables\";\n            style.innerHTML = `:root {\n                ${Object.entries(theme.cssVariables)\n                    .map(([key, value]) => `${key}: ${value}`)\n                    .join(\"\\n\")}\n            `;\n\n            if (existing) {\n                existing.replaceWith(style);\n            } else {\n                document.head.appendChild(style);\n            }\n        }\n\n        if (theme.fonts) {\n            theme.fonts.forEach(font => {\n                const existing = document.querySelector(`link[href=\"${font}\"]`);\n                if (existing) {\n                    return;\n                }\n\n                const link = document.createElement(\"link\");\n                link.href = font;\n                link.rel = \"stylesheet\";\n                document.head.appendChild(link);\n            });\n        }\n    }, [theme]);\n\n    return null;\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,sBAAsB;AAE/B,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAM;IAAEC;EAAM,CAAC,GAAGF,sBAAsB,CAAC,CAAC;EAE1CD,SAAS,CAAC,MAAM;IACZ,IAAI,CAACG,KAAK,EAAE;MACR;IACJ;IAEA,IAAIA,KAAK,CAACC,GAAG,EAAE;MACX,MAAMC,QAAQ,GAAGC,QAAQ,CAACC,aAAa,CAAC,2BAA2B,CAAC;MAEpE,MAAMC,KAAK,GAAGF,QAAQ,CAACG,aAAa,CAAC,OAAO,CAAC;MAC7CD,KAAK,CAACE,EAAE,GAAG,eAAe;MAC1BF,KAAK,CAACG,SAAS,GAAGR,KAAK,CAACC,GAAG;MAE3B,IAAIC,QAAQ,EAAE;QACVA,QAAQ,CAACO,WAAW,CAACJ,KAAK,CAAC;MAC/B,CAAC,MAAM;QACHF,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACN,KAAK,CAAC;MACpC;IACJ;IAEA,IAAIL,KAAK,CAACY,YAAY,EAAE;MACpB,MAAMV,QAAQ,GAAGC,QAAQ,CAACC,aAAa,CAAC,qCAAqC,CAAC;MAE9E,MAAMC,KAAK,GAAGF,QAAQ,CAACG,aAAa,CAAC,OAAO,CAAC;MAC7CD,KAAK,CAACE,EAAE,GAAG,yBAAyB;MACpCF,KAAK,CAACG,SAAS,GAAG;AAC9B,kBAAkBK,MAAM,CAACC,OAAO,CAACd,KAAK,CAACY,YAAY,CAAC,CAC/BG,GAAG,CAAC,CAAC,CAACC,GAAG,EAAEC,KAAK,CAAC,KAAK,GAAGD,GAAG,KAAKC,KAAK,EAAE,CAAC,CACzCC,IAAI,CAAC,IAAI,CAAC;AAC/B,aAAa;MAED,IAAIhB,QAAQ,EAAE;QACVA,QAAQ,CAACO,WAAW,CAACJ,KAAK,CAAC;MAC/B,CAAC,MAAM;QACHF,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACN,KAAK,CAAC;MACpC;IACJ;IAEA,IAAIL,KAAK,CAACmB,KAAK,EAAE;MACbnB,KAAK,CAACmB,KAAK,CAACC,OAAO,CAACC,IAAI,IAAI;QACxB,MAAMnB,QAAQ,GAAGC,QAAQ,CAACC,aAAa,CAAC,cAAciB,IAAI,IAAI,CAAC;QAC/D,IAAInB,QAAQ,EAAE;UACV;QACJ;QAEA,MAAMoB,IAAI,GAAGnB,QAAQ,CAACG,aAAa,CAAC,MAAM,CAAC;QAC3CgB,IAAI,CAACC,IAAI,GAAGF,IAAI;QAChBC,IAAI,CAACE,GAAG,GAAG,YAAY;QACvBrB,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACW,IAAI,CAAC;MACnC,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CAACtB,KAAK,CAAC,CAAC;EAEX,OAAO,IAAI;AACf,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/AwaitIframeUrl.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface AwaitIframeUrlProps {
+    children: (params: {
+        url: string;
+    }) => React.ReactNode;
+}
+export declare const AwaitIframeUrl: ({ children }: AwaitIframeUrlProps) => React.JSX.Element | null;
+export {};

package/BaseEditor/defaultConfig/Content/Preview/AwaitIframeUrl.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { useIframeUrl } from "./useIframeUrl";
+export const AwaitIframeUrl = ({
+  children
+}) => {
+  const url = useIframeUrl();
+  return url ? /*#__PURE__*/React.createElement(React.Fragment, null, children({
+    url
+  })) : null;
+};
+
+//# sourceMappingURL=AwaitIframeUrl.js.map

package/BaseEditor/defaultConfig/Content/Preview/AwaitIframeUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useIframeUrl","AwaitIframeUrl","children","url","createElement","Fragment"],"sources":["AwaitIframeUrl.tsx"],"sourcesContent":["import React from \"react\";\nimport { useIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/useIframeUrl\";\n\ninterface AwaitIframeUrlProps {\n    children: (params: { url: string }) => React.ReactNode;\n}\n\nexport const AwaitIframeUrl = ({ children }: AwaitIframeUrlProps) => {\n    const url = useIframeUrl();\n\n    return url ? <>{children({ url })}</> : null;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY;AAMrB,OAAO,MAAMC,cAAc,GAAGA,CAAC;EAAEC;AAA8B,CAAC,KAAK;EACjE,MAAMC,GAAG,GAAGH,YAAY,CAAC,CAAC;EAE1B,OAAOG,GAAG,gBAAGJ,KAAA,CAAAK,aAAA,CAAAL,KAAA,CAAAM,QAAA,QAAGH,QAAQ,CAAC;IAAEC;EAAI,CAAC,CAAI,CAAC,GAAG,IAAI;AAChD,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/Box.d.ts

@@ -0,0 +1,19 @@
+import type { BoxData } from "@webiny/website-builder-sdk";
+export declare class Box {
+    private readonly box;
+    private readonly _id;
+    constructor(id: string, box: BoxData);
+    get id(): string;
+    get type(): "element" | "element-slot";
+    get depth(): number;
+    get parentId(): string;
+    get parentSlot(): string;
+    get parentIndex(): number;
+    get top(): number;
+    get left(): number;
+    get width(): number;
+    get height(): number;
+    get bottom(): number;
+    get right(): number;
+    toObject(): BoxData;
+}

package/BaseEditor/defaultConfig/Content/Preview/Box.js

@@ -0,0 +1,47 @@
+export class Box {
+  constructor(id, box) {
+    this._id = id;
+    this.box = box;
+  }
+  get id() {
+    return this._id;
+  }
+  get type() {
+    return this.box.type;
+  }
+  get depth() {
+    return this.box.depth;
+  }
+  get parentId() {
+    return this.box.parentId;
+  }
+  get parentSlot() {
+    return this.box.parentSlot;
+  }
+  get parentIndex() {
+    return this.box.parentIndex;
+  }
+  get top() {
+    return this.box.top;
+  }
+  get left() {
+    return this.box.left;
+  }
+  get width() {
+    return this.box.width;
+  }
+  get height() {
+    return this.box.height;
+  }
+  get bottom() {
+    return this.top + this.height;
+  }
+  get right() {
+    return this.left + this.width;
+  }
+  toObject() {
+    return this.box;
+  }
+}
+
+//# sourceMappingURL=Box.js.map

package/BaseEditor/defaultConfig/Content/Preview/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Box","constructor","id","box","_id","type","depth","parentId","parentSlot","parentIndex","top","left","width","height","bottom","right","toObject"],"sources":["Box.ts"],"sourcesContent":["import type { BoxData } from \"@webiny/website-builder-sdk\";\n\nexport class Box {\n    private readonly box: BoxData;\n    private readonly _id: string;\n\n    constructor(id: string, box: BoxData) {\n        this._id = id;\n        this.box = box;\n    }\n\n    get id() {\n        return this._id;\n    }\n\n    get type() {\n        return this.box.type;\n    }\n\n    get depth() {\n        return this.box.depth;\n    }\n\n    get parentId() {\n        return this.box.parentId;\n    }\n\n    get parentSlot() {\n        return this.box.parentSlot;\n    }\n\n    get parentIndex() {\n        return this.box.parentIndex;\n    }\n\n    get top() {\n        return this.box.top;\n    }\n\n    get left() {\n        return this.box.left;\n    }\n\n    get width() {\n        return this.box.width;\n    }\n\n    get height() {\n        return this.box.height;\n    }\n\n    get bottom() {\n        return this.top + this.height;\n    }\n\n    get right() {\n        return this.left + this.width;\n    }\n\n    toObject(): BoxData {\n        return this.box;\n    }\n}\n"],"mappings":"AAEA,OAAO,MAAMA,GAAG,CAAC;EAIbC,WAAWA,CAACC,EAAU,EAAEC,GAAY,EAAE;IAClC,IAAI,CAACC,GAAG,GAAGF,EAAE;IACb,IAAI,CAACC,GAAG,GAAGA,GAAG;EAClB;EAEA,IAAID,EAAEA,CAAA,EAAG;IACL,OAAO,IAAI,CAACE,GAAG;EACnB;EAEA,IAAIC,IAAIA,CAAA,EAAG;IACP,OAAO,IAAI,CAACF,GAAG,CAACE,IAAI;EACxB;EAEA,IAAIC,KAAKA,CAAA,EAAG;IACR,OAAO,IAAI,CAACH,GAAG,CAACG,KAAK;EACzB;EAEA,IAAIC,QAAQA,CAAA,EAAG;IACX,OAAO,IAAI,CAACJ,GAAG,CAACI,QAAQ;EAC5B;EAEA,IAAIC,UAAUA,CAAA,EAAG;IACb,OAAO,IAAI,CAACL,GAAG,CAACK,UAAU;EAC9B;EAEA,IAAIC,WAAWA,CAAA,EAAG;IACd,OAAO,IAAI,CAACN,GAAG,CAACM,WAAW;EAC/B;EAEA,IAAIC,GAAGA,CAAA,EAAG;IACN,OAAO,IAAI,CAACP,GAAG,CAACO,GAAG;EACvB;EAEA,IAAIC,IAAIA,CAAA,EAAG;IACP,OAAO,IAAI,CAACR,GAAG,CAACQ,IAAI;EACxB;EAEA,IAAIC,KAAKA,CAAA,EAAG;IACR,OAAO,IAAI,CAACT,GAAG,CAACS,KAAK;EACzB;EAEA,IAAIC,MAAMA,CAAA,EAAG;IACT,OAAO,IAAI,CAACV,GAAG,CAACU,MAAM;EAC1B;EAEA,IAAIC,MAAMA,CAAA,EAAG;IACT,OAAO,IAAI,CAACJ,GAAG,GAAG,IAAI,CAACG,MAAM;EACjC;EAEA,IAAIE,KAAKA,CAAA,EAAG;IACR,OAAO,IAAI,CAACJ,IAAI,GAAG,IAAI,CAACC,KAAK;EACjC;EAEAI,QAAQA,CAAA,EAAY;IAChB,OAAO,IAAI,CAACb,GAAG;EACnB;AACJ","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/BreakpointSelector.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const BreakpointSelector: () => React.JSX.Element;

package/BaseEditor/defaultConfig/Content/Preview/BreakpointSelector.js

@@ -0,0 +1,38 @@
+import React from "react";
+import classNames from "classnames";
+import { IconButton, Tooltip, Text, Heading } from "@webiny/admin-ui";
+import { useBreakpoint } from "../../../hooks/useBreakpoint";
+import { InlineSvg } from "../../Toolbar/InsertElements/InlineSvg";
+export const BreakpointSelector = () => {
+  const {
+    breakpoint,
+    breakpoints,
+    setBreakpoint
+  } = useBreakpoint();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-align-right wby-bg-neutral-light wby-rounded-md"
+  }, breakpoints.map(bp => {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      key: bp.name,
+      content: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
+        level: 5
+      }, bp.title), /*#__PURE__*/React.createElement(Text, {
+        size: "md"
+      }, bp.description)),
+      side: "bottom",
+      className: classNames("action-wrapper", {
+        active: bp === breakpoint
+      }),
+      trigger: /*#__PURE__*/React.createElement(IconButton, {
+        size: "md",
+        icon: /*#__PURE__*/React.createElement(InlineSvg, {
+          src: bp.icon
+        }),
+        variant: breakpoint.name === bp.name ? "tertiary" : "ghost",
+        onClick: () => setBreakpoint(bp.name)
+      })
+    });
+  }));
+};
+
+//# sourceMappingURL=BreakpointSelector.js.map

package/BaseEditor/defaultConfig/Content/Preview/BreakpointSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","classNames","IconButton","Tooltip","Text","Heading","useBreakpoint","InlineSvg","BreakpointSelector","breakpoint","breakpoints","setBreakpoint","createElement","className","map","bp","key","name","content","level","title","size","description","side","active","trigger","icon","src","variant","onClick"],"sources":["BreakpointSelector.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { IconButton, Tooltip, Text, Heading } from \"@webiny/admin-ui\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg\";\n\nexport const BreakpointSelector = () => {\n    const { breakpoint, breakpoints, setBreakpoint } = useBreakpoint();\n\n    return (\n        <div className={\"wby-align-right wby-bg-neutral-light wby-rounded-md\"}>\n            {breakpoints.map(bp => {\n                return (\n                    <Tooltip\n                        key={bp.name}\n                        content={\n                            <div>\n                                <Heading level={5}>{bp.title}</Heading>\n                                <Text size=\"md\">{bp.description}</Text>\n                            </div>\n                        }\n                        side=\"bottom\"\n                        className={classNames(\"action-wrapper\", {\n                            active: bp === breakpoint\n                        })}\n                        trigger={\n                            <IconButton\n                                size={\"md\"}\n                                icon={<InlineSvg src={bp.icon} />}\n                                variant={breakpoint.name === bp.name ? \"tertiary\" : \"ghost\"}\n                                onClick={() => setBreakpoint(bp.name)}\n                            />\n                        }\n                    />\n                );\n            })}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,UAAU,EAAEC,OAAO,EAAEC,IAAI,EAAEC,OAAO,QAAQ,kBAAkB;AACrE,SAASC,aAAa;AACtB,SAASC,SAAS;AAElB,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAM;IAAEC,UAAU;IAAEC,WAAW;IAAEC;EAAc,CAAC,GAAGL,aAAa,CAAC,CAAC;EAElE,oBACIN,KAAA,CAAAY,aAAA;IAAKC,SAAS,EAAE;EAAsD,GACjEH,WAAW,CAACI,GAAG,CAACC,EAAE,IAAI;IACnB,oBACIf,KAAA,CAAAY,aAAA,CAACT,OAAO;MACJa,GAAG,EAAED,EAAE,CAACE,IAAK;MACbC,OAAO,eACHlB,KAAA,CAAAY,aAAA,2BACIZ,KAAA,CAAAY,aAAA,CAACP,OAAO;QAACc,KAAK,EAAE;MAAE,GAAEJ,EAAE,CAACK,KAAe,CAAC,eACvCpB,KAAA,CAAAY,aAAA,CAACR,IAAI;QAACiB,IAAI,EAAC;MAAI,GAAEN,EAAE,CAACO,WAAkB,CACrC,CACR;MACDC,IAAI,EAAC,QAAQ;MACbV,SAAS,EAAEZ,UAAU,CAAC,gBAAgB,EAAE;QACpCuB,MAAM,EAAET,EAAE,KAAKN;MACnB,CAAC,CAAE;MACHgB,OAAO,eACHzB,KAAA,CAAAY,aAAA,CAACV,UAAU;QACPmB,IAAI,EAAE,IAAK;QACXK,IAAI,eAAE1B,KAAA,CAAAY,aAAA,CAACL,SAAS;UAACoB,GAAG,EAAEZ,EAAE,CAACW;QAAK,CAAE,CAAE;QAClCE,OAAO,EAAEnB,UAAU,CAACQ,IAAI,KAAKF,EAAE,CAACE,IAAI,GAAG,UAAU,GAAG,OAAQ;QAC5DY,OAAO,EAAEA,CAAA,KAAMlB,aAAa,CAACI,EAAE,CAACE,IAAI;MAAE,CACzC;IACJ,CACJ,CAAC;EAEV,CAAC,CACA,CAAC;AAEd,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/DocumentPreview.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const DocumentPreview: () => React.JSX.Element;

package/BaseEditor/defaultConfig/Content/Preview/DocumentPreview.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument";
+import { Preview } from "./Preview";
+export const DocumentPreview = () => {
+  const {
+    id
+  } = useSelectFromDocument(document => {
+    return {
+      id: document.id
+    };
+  });
+  return /*#__PURE__*/React.createElement(Preview, {
+    key: id
+  });
+};
+
+//# sourceMappingURL=DocumentPreview.js.map

package/BaseEditor/defaultConfig/Content/Preview/DocumentPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useSelectFromDocument","Preview","DocumentPreview","id","document","createElement","key"],"sources":["DocumentPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { Preview } from \"./Preview\";\n\nexport const DocumentPreview = () => {\n    const { id } = useSelectFromDocument(document => {\n        return { id: document.id };\n    });\n\n    return <Preview key={id} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,qBAAqB;AAC9B,SAASC,OAAO;AAEhB,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAM;EACjC,MAAM;IAAEC;EAAG,CAAC,GAAGH,qBAAqB,CAACI,QAAQ,IAAI;IAC7C,OAAO;MAAED,EAAE,EAAEC,QAAQ,CAACD;IAAG,CAAC;EAC9B,CAAC,CAAC;EAEF,oBAAOJ,KAAA,CAAAM,aAAA,CAACJ,OAAO;IAACK,GAAG,EAAEH;EAAG,CAAE,CAAC;AAC/B,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/DropZoneManager.d.ts

@@ -0,0 +1,34 @@
+import type { Box } from "./Box";
+type DropPosition = number | null;
+export interface DropZoneProximity {
+    box: Box;
+    position: DropPosition;
+}
+interface DropzoneEntry {
+    id: string;
+    box: Box;
+    onProximityChange: (proximity: DropZoneProximity | null) => void;
+}
+export declare class DropZoneManager {
+    private mouse;
+    private zones;
+    private currentTargetId;
+    private currentPosition;
+    private animationFrame;
+    private currentBox;
+    constructor(mouse: {
+        x: number;
+        y: number;
+    });
+    register(entry: DropzoneEntry): void;
+    unregister(id: string): void;
+    start(): void;
+    stop(): void;
+    getLastMatchedPosition(): {
+        parentId: string;
+        slot: string;
+        index: number;
+    } | null;
+    tick(): void;
+}
+export {};

package/BaseEditor/defaultConfig/Content/Preview/DropZoneManager.js

@@ -0,0 +1,83 @@
+export class DropZoneManager {
+  zones = new Map();
+  currentTargetId = null;
+  currentPosition = null;
+  animationFrame = null;
+  currentBox = null;
+  constructor(mouse) {
+    this.mouse = mouse;
+  }
+  register(entry) {
+    if (entry.id === "root") {
+      return;
+    }
+    this.zones.set(entry.id, entry);
+  }
+  unregister(id) {
+    this.zones.delete(id);
+  }
+  start() {
+    const runDropzoneLoop = () => {
+      this.tick();
+      this.animationFrame = requestAnimationFrame(runDropzoneLoop);
+    };
+    this.animationFrame = requestAnimationFrame(runDropzoneLoop);
+  }
+  stop() {
+    if (this.animationFrame) {
+      cancelAnimationFrame(this.animationFrame);
+    }
+  }
+  getLastMatchedPosition() {
+    if (!this.currentBox) {
+      return null;
+    }
+    return {
+      parentId: this.currentBox.parentId,
+      slot: this.currentBox.parentSlot,
+      index: this.currentBox.parentIndex + (this.currentPosition ?? 0)
+    };
+  }
+  tick() {
+    const threshold = 10;
+    const mouseX = this.mouse.x;
+    const mouseY = this.mouse.y;
+    let matchedId = null;
+    let matchedPosition = null;
+    let matchedBox = null;
+    for (const [id, {
+      box
+    }] of this.zones) {
+      const isWithinX = mouseX >= box.left && mouseX <= box.right;
+      if (!isWithinX) {
+        continue;
+      }
+      if (mouseY >= box.top - threshold && mouseY <= box.top + threshold) {
+        matchedId = id;
+        matchedPosition = 0; // before
+        matchedBox = box;
+        break;
+      }
+      if (mouseY >= box.bottom - threshold && mouseY <= box.bottom + threshold) {
+        matchedId = id;
+        matchedPosition = 1; // after
+        matchedBox = box;
+        break;
+      }
+    }
+    if (matchedId !== this.currentTargetId || matchedPosition !== this.currentPosition) {
+      this.currentTargetId = matchedId;
+      this.currentPosition = matchedPosition;
+      this.currentBox = matchedBox;
+      for (const [id, entry] of this.zones) {
+        const isTarget = id === matchedId;
+        entry.onProximityChange(isTarget ? {
+          box: matchedBox,
+          position: matchedPosition
+        } : null);
+      }
+    }
+  }
+}
+
+//# sourceMappingURL=DropZoneManager.js.map

package/BaseEditor/defaultConfig/Content/Preview/DropZoneManager.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DropZoneManager","zones","Map","currentTargetId","currentPosition","animationFrame","currentBox","constructor","mouse","register","entry","id","set","unregister","delete","start","runDropzoneLoop","tick","requestAnimationFrame","stop","cancelAnimationFrame","getLastMatchedPosition","parentId","slot","parentSlot","index","parentIndex","threshold","mouseX","x","mouseY","y","matchedId","matchedPosition","matchedBox","box","isWithinX","left","right","top","bottom","isTarget","onProximityChange","position"],"sources":["DropZoneManager.ts"],"sourcesContent":["import type { Box } from \"./Box\";\n\ntype DropPosition = number | null;\n\nexport interface DropZoneProximity {\n    box: Box;\n    position: DropPosition;\n}\n\ninterface DropzoneEntry {\n    id: string;\n    box: Box;\n    onProximityChange: (proximity: DropZoneProximity | null) => void;\n}\n\nexport class DropZoneManager {\n    private zones = new Map<string, DropzoneEntry>();\n    private currentTargetId: string | null = null;\n    private currentPosition: DropPosition = null;\n    private animationFrame: number | null = null;\n    private currentBox: Box | null = null;\n\n    constructor(private mouse: { x: number; y: number }) {}\n\n    register(entry: DropzoneEntry) {\n        if (entry.id === \"root\") {\n            return;\n        }\n\n        this.zones.set(entry.id, entry);\n    }\n\n    unregister(id: string) {\n        this.zones.delete(id);\n    }\n\n    start() {\n        const runDropzoneLoop = () => {\n            this.tick();\n            this.animationFrame = requestAnimationFrame(runDropzoneLoop);\n        };\n        this.animationFrame = requestAnimationFrame(runDropzoneLoop);\n    }\n\n    stop() {\n        if (this.animationFrame) {\n            cancelAnimationFrame(this.animationFrame);\n        }\n    }\n\n    getLastMatchedPosition() {\n        if (!this.currentBox) {\n            return null;\n        }\n\n        return {\n            parentId: this.currentBox.parentId,\n            slot: this.currentBox.parentSlot,\n            index: this.currentBox.parentIndex + (this.currentPosition ?? 0)\n        };\n    }\n\n    tick() {\n        const threshold = 10;\n        const mouseX = this.mouse.x;\n        const mouseY = this.mouse.y;\n\n        let matchedId: string | null = null;\n        let matchedPosition: DropPosition = null;\n        let matchedBox: Box | null = null;\n\n        for (const [id, { box }] of this.zones) {\n            const isWithinX = mouseX >= box.left && mouseX <= box.right;\n\n            if (!isWithinX) {\n                continue;\n            }\n\n            if (mouseY >= box.top - threshold && mouseY <= box.top + threshold) {\n                matchedId = id;\n                matchedPosition = 0; // before\n                matchedBox = box;\n                break;\n            }\n\n            if (mouseY >= box.bottom - threshold && mouseY <= box.bottom + threshold) {\n                matchedId = id;\n                matchedPosition = 1; // after\n                matchedBox = box;\n                break;\n            }\n        }\n\n        if (matchedId !== this.currentTargetId || matchedPosition !== this.currentPosition) {\n            this.currentTargetId = matchedId;\n            this.currentPosition = matchedPosition;\n            this.currentBox = matchedBox;\n\n            for (const [id, entry] of this.zones) {\n                const isTarget = id === matchedId;\n                entry.onProximityChange(\n                    isTarget ? { box: matchedBox!, position: matchedPosition } : null\n                );\n            }\n        }\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/DropZoneManagerProvider.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { DropZoneManager } from "./DropZoneManager";
+export declare const DropZoneManagerProvider: {
+    ({ children, ...props }: {
+        dropzoneManager: DropZoneManager;
+    } & {
+        children: import("react").ReactNode;
+    }): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const useDropZoneManager: () => DropZoneManager;

package/BaseEditor/defaultConfig/Content/Preview/DropZoneManagerProvider.js

@@ -0,0 +1,11 @@
+import { createGenericContext } from "@webiny/app-admin";
+const DropZoneManagerContext = createGenericContext("DropzoneManager");
+export const DropZoneManagerProvider = DropZoneManagerContext.Provider;
+export const useDropZoneManager = () => {
+  const {
+    dropzoneManager
+  } = DropZoneManagerContext.useHook();
+  return dropzoneManager;
+};
+
+//# sourceMappingURL=DropZoneManagerProvider.js.map

package/BaseEditor/defaultConfig/Content/Preview/DropZoneManagerProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createGenericContext","DropZoneManagerContext","DropZoneManagerProvider","Provider","useDropZoneManager","dropzoneManager","useHook"],"sources":["DropZoneManagerProvider.tsx"],"sourcesContent":["import { createGenericContext } from \"@webiny/app-admin\";\nimport type { DropZoneManager } from \"./DropZoneManager\";\n\nconst DropZoneManagerContext = createGenericContext<{ dropzoneManager: DropZoneManager }>(\n    \"DropzoneManager\"\n);\n\nexport const DropZoneManagerProvider = DropZoneManagerContext.Provider;\n\nexport const useDropZoneManager = () => {\n    const { dropzoneManager } = DropZoneManagerContext.useHook();\n\n    return dropzoneManager;\n};\n"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,mBAAmB;AAGxD,MAAMC,sBAAsB,GAAGD,oBAAoB,CAC/C,iBACJ,CAAC;AAED,OAAO,MAAME,uBAAuB,GAAGD,sBAAsB,CAACE,QAAQ;AAEtE,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAM;IAAEC;EAAgB,CAAC,GAAGJ,sBAAsB,CAACK,OAAO,CAAC,CAAC;EAE5D,OAAOD,eAAe;AAC1B,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/HoverManager.d.ts

@@ -0,0 +1,23 @@
+import type { Boxes } from "../../../hooks/Boxes";
+type HoverCallback = (id: string | null) => void;
+/**
+ * Determine which box the mouse is hovering, accounting for visual depth.
+ */
+export declare class HoverManager {
+    private mouse;
+    private getAllBoxes;
+    private hoveredId;
+    private callbacks;
+    private running;
+    private margin;
+    constructor(mouse: {
+        x: number;
+        y: number;
+    }, getAllBoxes: () => Boxes);
+    onHoverChange(cb: HoverCallback): () => void;
+    destroy(): void;
+    private notify;
+    private start;
+    private stop;
+}
+export {};

package/BaseEditor/defaultConfig/Content/Preview/HoverManager.js

@@ -0,0 +1,82 @@
+/**
+ * Determine which box the mouse is hovering, accounting for visual depth.
+ */
+export class HoverManager {
+  hoveredId = null;
+  callbacks = new Set();
+  running = false;
+  margin = 0;
+  constructor(mouse, getAllBoxes) {
+    this.mouse = mouse;
+    this.getAllBoxes = getAllBoxes;
+  }
+  onHoverChange(cb) {
+    this.callbacks.add(cb);
+    if (!this.running) {
+      this.start();
+    }
+    return () => {
+      this.callbacks.delete(cb);
+      if (this.callbacks.size === 0) {
+        this.stop();
+      }
+    };
+  }
+  destroy() {
+    this.callbacks.clear();
+    this.stop();
+  }
+  notify(id) {
+    if (id !== this.hoveredId) {
+      this.hoveredId = id;
+      this.callbacks.forEach(cb => cb(id));
+    }
+  }
+  start() {
+    this.running = true;
+    const loop = () => {
+      const boxes = this.getAllBoxes();
+      const {
+        x,
+        y
+      } = this.mouse;
+      const target = document.elementFromPoint(x, y);
+      if (target?.getAttribute("data-role") === "element-overlay-label") {
+        const targetId = target.getAttribute("data-label-for");
+        if (targetId) {
+          const box = boxes.get(targetId);
+          this.notify(box ? box.id : null);
+          if (this.running) {
+            requestAnimationFrame(loop);
+          }
+          return;
+        }
+      }
+      const isIgnored = target?.closest(`[data-hover-manager="ignore"]`);
+      if (isIgnored) {
+        if (this.running) {
+          requestAnimationFrame(loop);
+        }
+        return;
+      }
+
+      // highest depth wins
+      const highestBox = Array.from(boxes.entries()).sort(([, a], [, b]) => (b.depth ?? 0) - (a.depth ?? 0)).find(([, box]) => {
+        const right = box.left + box.width;
+        const bottom = box.top + box.height;
+        return x >= box.left - this.margin && x <= right + this.margin && y >= box.top - this.margin && y <= bottom + this.margin;
+      });
+      this.notify(highestBox ? highestBox[0] : null);
+      if (this.running) {
+        requestAnimationFrame(loop);
+      }
+    };
+    requestAnimationFrame(loop);
+  }
+  stop() {
+    this.running = false;
+    this.notify(null);
+  }
+}
+
+//# sourceMappingURL=HoverManager.js.map

package/BaseEditor/defaultConfig/Content/Preview/HoverManager.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["HoverManager","hoveredId","callbacks","Set","running","margin","constructor","mouse","getAllBoxes","onHoverChange","cb","add","start","delete","size","stop","destroy","clear","notify","id","forEach","loop","boxes","x","y","target","document","elementFromPoint","getAttribute","targetId","box","get","requestAnimationFrame","isIgnored","closest","highestBox","Array","from","entries","sort","a","b","depth","find","right","left","width","bottom","top","height"],"sources":["HoverManager.ts"],"sourcesContent":["import type { Boxes } from \"~/BaseEditor/hooks/Boxes\";\n\ntype HoverCallback = (id: string | null) => void;\n\n/**\n * Determine which box the mouse is hovering, accounting for visual depth.\n */\nexport class HoverManager {\n    private hoveredId: string | null = null;\n    private callbacks = new Set<HoverCallback>();\n    private running = false;\n    private margin = 0;\n\n    constructor(private mouse: { x: number; y: number }, private getAllBoxes: () => Boxes) {}\n\n    onHoverChange(cb: HoverCallback): () => void {\n        this.callbacks.add(cb);\n        if (!this.running) {\n            this.start();\n        }\n\n        return () => {\n            this.callbacks.delete(cb);\n            if (this.callbacks.size === 0) {\n                this.stop();\n            }\n        };\n    }\n\n    destroy() {\n        this.callbacks.clear();\n        this.stop();\n    }\n\n    private notify(id: string | null) {\n        if (id !== this.hoveredId) {\n            this.hoveredId = id;\n            this.callbacks.forEach(cb => cb(id));\n        }\n    }\n\n    private start() {\n        this.running = true;\n\n        const loop = () => {\n            const boxes = this.getAllBoxes();\n            const { x, y } = this.mouse;\n\n            const target = document.elementFromPoint(x, y);\n            if (target?.getAttribute(\"data-role\") === \"element-overlay-label\") {\n                const targetId = target.getAttribute(\"data-label-for\");\n                if (targetId) {\n                    const box = boxes.get(targetId);\n                    this.notify(box ? box.id : null);\n                    if (this.running) {\n                        requestAnimationFrame(loop);\n                    }\n                    return;\n                }\n            }\n\n            const isIgnored = target?.closest(`[data-hover-manager=\"ignore\"]`);\n            if (isIgnored) {\n                if (this.running) {\n                    requestAnimationFrame(loop);\n                }\n                return;\n            }\n\n            // highest depth wins\n            const highestBox = Array.from(boxes.entries())\n                .sort(([, a], [, b]) => (b.depth ?? 0) - (a.depth ?? 0))\n                .find(([, box]) => {\n                    const right = box.left + box.width;\n                    const bottom = box.top + box.height;\n\n                    return (\n                        x >= box.left - this.margin &&\n                        x <= right + this.margin &&\n                        y >= box.top - this.margin &&\n                        y <= bottom + this.margin\n                    );\n                });\n\n            this.notify(highestBox ? highestBox[0] : null);\n\n            if (this.running) {\n                requestAnimationFrame(loop);\n            }\n        };\n\n        requestAnimationFrame(loop);\n    }\n\n    private stop() {\n        this.running = false;\n        this.notify(null);\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/Iframe.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { Messenger } from "@webiny/website-builder-sdk";
+import type { ViewportManager } from "@webiny/website-builder-sdk";
+interface IframeProps {
+    url: string;
+    timestamp: number;
+    showLoading: boolean;
+    viewportManager: ViewportManager;
+    onConnected: (messenger: Messenger) => void;
+}
+export declare const Iframe: (({ url, timestamp, ...props }: IframeProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export {};

package/BaseEditor/defaultConfig/Content/Preview/Iframe.js

@@ -0,0 +1,46 @@
+import React, { useMemo, useRef } from "react";
+import { ElementOverlays } from "./Overlays/ElementOverlays";
+import { ConnectEditorToPreview } from "../../../../DocumentEditor/ConnectEditorToPreview";
+import { useResponsiveContainer } from "./useResponsiveContainer";
+import { OverlayLoader } from "@webiny/admin-ui";
+import { observer } from "mobx-react-lite";
+export const Iframe = observer(({
+  url,
+  timestamp,
+  ...props
+}) => {
+  const iframeRef = useRef(null);
+  const previewWidth = useResponsiveContainer(props.viewportManager);
+  const iframeUrl = useMemo(() => {
+    const localUrl = new URL(url);
+    localUrl.searchParams.set("wb.ts", timestamp.toString());
+    return localUrl.toString();
+  }, [url, timestamp]);
+  return /*#__PURE__*/React.createElement("div", {
+    key: iframeUrl,
+    className: "wby-relative wby-flex wby-flex-col wby-items-center",
+    "data-role": "responsive-container"
+  }, /*#__PURE__*/React.createElement(ConnectEditorToPreview, {
+    iframeRef: iframeRef,
+    onConnected: props.onConnected
+  }), props.showLoading ? /*#__PURE__*/React.createElement(OverlayLoader, {
+    size: "lg",
+    variant: "accent",
+    text: "Loading preview...",
+    className: "wby-bg-neutral-base"
+  }) : null, /*#__PURE__*/React.createElement("div", {
+    className: "wby-min-h-[calc(100vh-43px-50px-31px)] wby-max-h-[calc(100vh-43px-50px)] wby-box-border  wby-overflow-hidden",
+    style: {
+      width: previewWidth
+    }
+  }, /*#__PURE__*/React.createElement(ElementOverlays, null), /*#__PURE__*/React.createElement("iframe", {
+    id: "preview-iframe",
+    className: "wby-w-full wby-bg-white wby-border-none wby-overflow-scroll wby-min-h-[inherit] wby-pointer-events-none",
+    src: iframeUrl,
+    ref: iframeRef,
+    sandbox: "allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"
+  })));
+});
+Iframe.displayName = "Iframe";
+
+//# sourceMappingURL=Iframe.js.map

package/BaseEditor/defaultConfig/Content/Preview/Iframe.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","useRef","ElementOverlays","ConnectEditorToPreview","useResponsiveContainer","OverlayLoader","observer","Iframe","url","timestamp","props","iframeRef","previewWidth","viewportManager","iframeUrl","localUrl","URL","searchParams","set","toString","createElement","key","className","onConnected","showLoading","size","variant","text","style","width","id","src","ref","sandbox","displayName"],"sources":["Iframe.tsx"],"sourcesContent":["import React, { useMemo, useRef } from \"react\";\nimport { ElementOverlays } from \"./Overlays/ElementOverlays\";\nimport { ConnectEditorToPreview } from \"~/DocumentEditor/ConnectEditorToPreview\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { useResponsiveContainer } from \"~/BaseEditor/defaultConfig/Content/Preview/useResponsiveContainer\";\nimport { OverlayLoader } from \"@webiny/admin-ui\";\nimport type { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { observer } from \"mobx-react-lite\";\n\ninterface IframeProps {\n    url: string;\n    timestamp: number;\n    showLoading: boolean;\n    viewportManager: ViewportManager;\n    onConnected: (messenger: Messenger) => void;\n}\n\nexport const Iframe = observer(({ url, timestamp, ...props }: IframeProps) => {\n    const iframeRef = useRef<HTMLIFrameElement>(null);\n    const previewWidth = useResponsiveContainer(props.viewportManager);\n\n    const iframeUrl = useMemo(() => {\n        const localUrl = new URL(url);\n        localUrl.searchParams.set(\"wb.ts\", timestamp.toString());\n        return localUrl.toString();\n    }, [url, timestamp]);\n\n    return (\n        <div\n            key={iframeUrl}\n            className={\"wby-relative wby-flex wby-flex-col wby-items-center\"}\n            data-role={\"responsive-container\"}\n        >\n            <ConnectEditorToPreview iframeRef={iframeRef} onConnected={props.onConnected} />\n            {props.showLoading ? (\n                <OverlayLoader\n                    size=\"lg\"\n                    variant=\"accent\"\n                    text=\"Loading preview...\"\n                    className={\"wby-bg-neutral-base\"}\n                />\n            ) : null}\n            {/* Height = viewport height - top bar - address bar - breadcrumbs. */}\n            <div\n                className=\"wby-min-h-[calc(100vh-43px-50px-31px)] wby-max-h-[calc(100vh-43px-50px)] wby-box-border  wby-overflow-hidden\"\n                style={{ width: previewWidth }}\n            >\n                <ElementOverlays />\n                <iframe\n                    id={\"preview-iframe\"}\n                    className={\n                        \"wby-w-full wby-bg-white wby-border-none wby-overflow-scroll wby-min-h-[inherit] wby-pointer-events-none\"\n                    }\n                    src={iframeUrl}\n                    ref={iframeRef}\n                    sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\"\n                />\n            </div>\n        </div>\n    );\n});\n\nIframe.displayName = \"Iframe\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAC9C,SAASC,eAAe;AACxB,SAASC,sBAAsB;AAE/B,SAASC,sBAAsB;AAC/B,SAASC,aAAa,QAAQ,kBAAkB;AAEhD,SAASC,QAAQ,QAAQ,iBAAiB;AAU1C,OAAO,MAAMC,MAAM,GAAGD,QAAQ,CAAC,CAAC;EAAEE,GAAG;EAAEC,SAAS;EAAE,GAAGC;AAAmB,CAAC,KAAK;EAC1E,MAAMC,SAAS,GAAGV,MAAM,CAAoB,IAAI,CAAC;EACjD,MAAMW,YAAY,GAAGR,sBAAsB,CAACM,KAAK,CAACG,eAAe,CAAC;EAElE,MAAMC,SAAS,GAAGd,OAAO,CAAC,MAAM;IAC5B,MAAMe,QAAQ,GAAG,IAAIC,GAAG,CAACR,GAAG,CAAC;IAC7BO,QAAQ,CAACE,YAAY,CAACC,GAAG,CAAC,OAAO,EAAET,SAAS,CAACU,QAAQ,CAAC,CAAC,CAAC;IACxD,OAAOJ,QAAQ,CAACI,QAAQ,CAAC,CAAC;EAC9B,CAAC,EAAE,CAACX,GAAG,EAAEC,SAAS,CAAC,CAAC;EAEpB,oBACIV,KAAA,CAAAqB,aAAA;IACIC,GAAG,EAAEP,SAAU;IACfQ,SAAS,EAAE,qDAAsD;IACjE,aAAW;EAAuB,gBAElCvB,KAAA,CAAAqB,aAAA,CAACjB,sBAAsB;IAACQ,SAAS,EAAEA,SAAU;IAACY,WAAW,EAAEb,KAAK,CAACa;EAAY,CAAE,CAAC,EAC/Eb,KAAK,CAACc,WAAW,gBACdzB,KAAA,CAAAqB,aAAA,CAACf,aAAa;IACVoB,IAAI,EAAC,IAAI;IACTC,OAAO,EAAC,QAAQ;IAChBC,IAAI,EAAC,oBAAoB;IACzBL,SAAS,EAAE;EAAsB,CACpC,CAAC,GACF,IAAI,eAERvB,KAAA,CAAAqB,aAAA;IACIE,SAAS,EAAC,8GAA8G;IACxHM,KAAK,EAAE;MAAEC,KAAK,EAAEjB;IAAa;EAAE,gBAE/Bb,KAAA,CAAAqB,aAAA,CAAClB,eAAe,MAAE,CAAC,eACnBH,KAAA,CAAAqB,aAAA;IACIU,EAAE,EAAE,gBAAiB;IACrBR,SAAS,EACL,yGACH;IACDS,GAAG,EAAEjB,SAAU;IACfkB,GAAG,EAAErB,SAAU;IACfsB,OAAO,EAAC;EAA0F,CACrG,CACA,CACJ,CAAC;AAEd,CAAC,CAAC;AAEF1B,MAAM,CAAC2B,WAAW,GAAG,QAAQ","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/KeyboardShortcuts.d.ts

@@ -0,0 +1 @@
+export declare const KeyboardShortcuts: () => null;