payload 2.0.0-beta.2 → 2.0.0-beta.4

package/dist/admin/components/views/LivePreview/Toolbar/SizeInput/index.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PreviewFrameSizeInput", {
+    enumerable: true,
+    get: function() {
+        return PreviewFrameSizeInput;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _context = require("../../PreviewContext/context");
+require("./index.scss");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const baseClass = 'live-preview-toolbar';
+const PreviewFrameSizeInput = (props)=>{
+    const { axis } = props;
+    const { setHeight, setWidth, size } = (0, _context.useLivePreviewContext)();
+    // const [size, setSize] = React.useState<string>(() => {
+    //   if (sizeToUse === 'width') {
+    //     return deviceSize?.width.toFixed(0)
+    //   }
+    //   return deviceSize?.height.toFixed(0)
+    // })
+    // useEffect(() => {
+    //   if (sizeToUse === 'width') {
+    //     setSize(deviceSize?.width.toFixed(0))
+    //   } else {
+    //     setSize(deviceSize?.height.toFixed(0))
+    //   }
+    // }, [deviceSize])
+    const handleChange = (0, _react.useCallback)((e)=>{
+        if (axis === 'x') {
+            setWidth(Number(e.target.value));
+        } else {
+            setHeight(Number(e.target.value));
+        }
+    }, [
+        axis,
+        setWidth,
+        setHeight
+    ]);
+    const sizeValue = axis === 'x' ? size?.width : size?.height;
+    return /*#__PURE__*/ _react.default.createElement("input", {
+        className: `${baseClass}__size`,
+        disabled: true // enable this once its wired up properly
+        ,
+        onChange: handleChange,
+        type: "number",
+        value: sizeValue
+    });
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L1Rvb2xiYXIvU2l6ZUlucHV0L2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlQ2FsbGJhY2sgfSBmcm9tICdyZWFjdCdcblxuaW1wb3J0IHsgdXNlTGl2ZVByZXZpZXdDb250ZXh0IH0gZnJvbSAnLi4vLi4vUHJldmlld0NvbnRleHQvY29udGV4dCdcbmltcG9ydCAnLi9pbmRleC5zY3NzJ1xuXG5jb25zdCBiYXNlQ2xhc3MgPSAnbGl2ZS1wcmV2aWV3LXRvb2xiYXInXG5cbmV4cG9ydCBjb25zdCBQcmV2aWV3RnJhbWVTaXplSW5wdXQ6IFJlYWN0LkZDPHtcbiAgYXhpcz86ICd4JyB8ICd5J1xufT4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgeyBheGlzIH0gPSBwcm9wc1xuXG4gIGNvbnN0IHsgc2V0SGVpZ2h0LCBzZXRXaWR0aCwgc2l6ZSB9ID0gdXNlTGl2ZVByZXZpZXdDb250ZXh0KClcblxuICAvLyBjb25zdCBbc2l6ZSwgc2V0U2l6ZV0gPSBSZWFjdC51c2VTdGF0ZTxzdHJpbmc+KCgpID0+IHtcbiAgLy8gICBpZiAoc2l6ZVRvVXNlID09PSAnd2lkdGgnKSB7XG4gIC8vICAgICByZXR1cm4gZGV2aWNlU2l6ZT8ud2lkdGgudG9GaXhlZCgwKVxuICAvLyAgIH1cblxuICAvLyAgIHJldHVybiBkZXZpY2VTaXplPy5oZWlnaHQudG9GaXhlZCgwKVxuICAvLyB9KVxuXG4gIC8vIHVzZUVmZmVjdCgoKSA9PiB7XG4gIC8vICAgaWYgKHNpemVUb1VzZSA9PT0gJ3dpZHRoJykge1xuICAvLyAgICAgc2V0U2l6ZShkZXZpY2VTaXplPy53aWR0aC50b0ZpeGVkKDApKVxuICAvLyAgIH0gZWxzZSB7XG4gIC8vICAgICBzZXRTaXplKGRldmljZVNpemU/LmhlaWdodC50b0ZpeGVkKDApKVxuICAvLyAgIH1cbiAgLy8gfSwgW2RldmljZVNpemVdKVxuXG4gIGNvbnN0IGhhbmRsZUNoYW5nZSA9IHVzZUNhbGxiYWNrKFxuICAgIChlOiBSZWFjdC5DaGFuZ2VFdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4ge1xuICAgICAgaWYgKGF4aXMgPT09ICd4Jykge1xuICAgICAgICBzZXRXaWR0aChOdW1iZXIoZS50YXJnZXQudmFsdWUpKVxuICAgICAgfSBlbHNlIHtcbiAgICAgICAgc2V0SGVpZ2h0KE51bWJlcihlLnRhcmdldC52YWx1ZSkpXG4gICAgICB9XG4gICAgfSxcbiAgICBbYXhpcywgc2V0V2lkdGgsIHNldEhlaWdodF0sXG4gIClcblxuICBjb25zdCBzaXplVmFsdWUgPSBheGlzID09PSAneCcgPyBzaXplPy53aWR0aCA6IHNpemU/LmhlaWdodFxuXG4gIHJldHVybiAoXG4gICAgPGlucHV0XG4gICAgICBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX3NpemVgfVxuICAgICAgZGlzYWJsZWQgLy8gZW5hYmxlIHRoaXMgb25jZSBpdHMgd2lyZWQgdXAgcHJvcGVybHlcbiAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICB0eXBlPVwibnVtYmVyXCJcbiAgICAgIHZhbHVlPXtzaXplVmFsdWV9XG4gICAgLz5cbiAgKVxufVxuIl0sIm5hbWVzIjpbIlByZXZpZXdGcmFtZVNpemVJbnB1dCIsImJhc2VDbGFzcyIsInByb3BzIiwiYXhpcyIsInNldEhlaWdodCIsInNldFdpZHRoIiwic2l6ZSIsInVzZUxpdmVQcmV2aWV3Q29udGV4dCIsImhhbmRsZUNoYW5nZSIsInVzZUNhbGxiYWNrIiwiZSIsIk51bWJlciIsInRhcmdldCIsInZhbHVlIiwic2l6ZVZhbHVlIiwid2lkdGgiLCJoZWlnaHQiLCJpbnB1dCIsImNsYXNzTmFtZSIsImRpc2FibGVkIiwib25DaGFuZ2UiLCJ0eXBlIl0sIm1hcHBpbmdzIjoiOzs7OytCQU9hQTs7O2VBQUFBOzs7K0RBUHNCO3lCQUVHO1FBQy9COzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBRVAsTUFBTUMsWUFBWTtBQUVYLE1BQU1ELHdCQUVSLENBQUNFO0lBQ0osTUFBTSxFQUFFQyxJQUFJLEVBQUUsR0FBR0Q7SUFFakIsTUFBTSxFQUFFRSxTQUFTLEVBQUVDLFFBQVEsRUFBRUMsSUFBSSxFQUFFLEdBQUdDLElBQUFBLDhCQUFxQjtJQUUzRCx5REFBeUQ7SUFDekQsaUNBQWlDO0lBQ2pDLDBDQUEwQztJQUMxQyxNQUFNO0lBRU4seUNBQXlDO0lBQ3pDLEtBQUs7SUFFTCxvQkFBb0I7SUFDcEIsaUNBQWlDO0lBQ2pDLDRDQUE0QztJQUM1QyxhQUFhO0lBQ2IsNkNBQTZDO0lBQzdDLE1BQU07SUFDTixtQkFBbUI7SUFFbkIsTUFBTUMsZUFBZUMsSUFBQUEsa0JBQVcsRUFDOUIsQ0FBQ0M7UUFDQyxJQUFJUCxTQUFTLEtBQUs7WUFDaEJFLFNBQVNNLE9BQU9ELEVBQUVFLE1BQU0sQ0FBQ0MsS0FBSztRQUNoQyxPQUFPO1lBQ0xULFVBQVVPLE9BQU9ELEVBQUVFLE1BQU0sQ0FBQ0MsS0FBSztRQUNqQztJQUNGLEdBQ0E7UUFBQ1Y7UUFBTUU7UUFBVUQ7S0FBVTtJQUc3QixNQUFNVSxZQUFZWCxTQUFTLE1BQU1HLE1BQU1TLFFBQVFULE1BQU1VO0lBRXJELHFCQUNFLDZCQUFDQztRQUNDQyxXQUFXLENBQUMsRUFBRWpCLFVBQVUsTUFBTSxDQUFDO1FBQy9Ca0IsVUFBQUEsS0FBUyx5Q0FBeUM7O1FBQ2xEQyxVQUFVWjtRQUNWYSxNQUFLO1FBQ0xSLE9BQU9DOztBQUdiIn0=

package/dist/admin/components/views/LivePreview/Toolbar/SizeInput/index.scss

@@ -0,0 +1,14 @@
+@import '../../../../../scss/styles.scss';
+
+.live-preview-toolbar {
+  &__size {
+    width: 50px;
+    height: var(--base);
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--theme-elevation-200);
+    background: var(--theme-elevation-100);
+    border-radius: 2px;
+    font-size: small;
+  }
+}

package/dist/admin/components/views/LivePreview/Toolbar/index.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LivePreviewToolbar", {
+    enumerable: true,
+    get: function() {
+        return LivePreviewToolbar;
+    }
+});
+const _core = require("@dnd-kit/core");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _ = require("../../..");
+const _ExternalLink = require("../../../graphics/ExternalLink");
+const _Drag = /*#__PURE__*/ _interop_require_default(require("../../../icons/Drag"));
+const _context = require("../PreviewContext/context");
+const _SizeInput = require("./SizeInput");
+require("./index.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const baseClass = 'live-preview-toolbar';
+const LivePreviewToolbar = (props)=>{
+    const { popupState: { openPopupWindow }, style, url } = props;
+    const { breakpoint, breakpoints, setBreakpoint, setZoom, zoom } = (0, _context.useLivePreviewContext)();
+    const { attributes, listeners, setNodeRef, transform } = (0, _core.useDraggable)({
+        id: 'live-preview-toolbar'
+    });
+    return /*#__PURE__*/ _react.default.createElement("div", {
+        className: baseClass,
+        style: {
+            ...style,
+            transform: transform ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)` : undefined
+        }
+    }, /*#__PURE__*/ _react.default.createElement("button", {
+        ...listeners,
+        ...attributes,
+        className: `${baseClass}__drag-handle`,
+        ref: setNodeRef,
+        type: "button"
+    }, /*#__PURE__*/ _react.default.createElement(_Drag.default, null)), /*#__PURE__*/ _react.default.createElement("div", {
+        className: `${baseClass}__controls`
+    }, breakpoints?.length > 0 && /*#__PURE__*/ _react.default.createElement("select", {
+        className: `${baseClass}__breakpoint`,
+        onChange: (e)=>setBreakpoint(e.target.value),
+        value: breakpoint
+    }, breakpoints.map((bp)=>/*#__PURE__*/ _react.default.createElement("option", {
+            key: bp.name,
+            value: bp.name
+        }, bp.label))), /*#__PURE__*/ _react.default.createElement("div", {
+        className: `${baseClass}__device-size`
+    }, /*#__PURE__*/ _react.default.createElement(_SizeInput.PreviewFrameSizeInput, {
+        axis: "x"
+    }), /*#__PURE__*/ _react.default.createElement("span", {
+        className: `${baseClass}__size-divider`
+    }, /*#__PURE__*/ _react.default.createElement(_.X, null)), /*#__PURE__*/ _react.default.createElement(_SizeInput.PreviewFrameSizeInput, {
+        axis: "y"
+    })), /*#__PURE__*/ _react.default.createElement("select", {
+        className: `${baseClass}__zoom`,
+        onChange: (e)=>setZoom(Number(e.target.value) / 100),
+        value: zoom * 100
+    }, /*#__PURE__*/ _react.default.createElement("option", {
+        value: 50
+    }, "50%"), /*#__PURE__*/ _react.default.createElement("option", {
+        value: 75
+    }, "75%"), /*#__PURE__*/ _react.default.createElement("option", {
+        value: 100
+    }, "100%"), /*#__PURE__*/ _react.default.createElement("option", {
+        value: 125
+    }, "125%"), /*#__PURE__*/ _react.default.createElement("option", {
+        value: 150
+    }, "150%"), /*#__PURE__*/ _react.default.createElement("option", {
+        value: 200
+    }, "200%")), /*#__PURE__*/ _react.default.createElement("a", {
+        className: `${baseClass}__external`,
+        href: url,
+        onClick: openPopupWindow,
+        type: "button"
+    }, /*#__PURE__*/ _react.default.createElement(_ExternalLink.ExternalLinkIcon, null))));
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L1Rvb2xiYXIvaW5kZXgudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHVzZURyYWdnYWJsZSB9IGZyb20gJ0BkbmQta2l0L2NvcmUnXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5cbmltcG9ydCB0eXBlIHsgVG9vbGJhclByb3ZpZGVyUHJvcHMgfSBmcm9tICcuLi9QcmV2aWV3Q29udGV4dCdcblxuaW1wb3J0IHsgWCB9IGZyb20gJy4uLy4uLy4uJ1xuaW1wb3J0IHsgRXh0ZXJuYWxMaW5rSWNvbiB9IGZyb20gJy4uLy4uLy4uL2dyYXBoaWNzL0V4dGVybmFsTGluaydcbmltcG9ydCBEcmFnSGFuZGxlIGZyb20gJy4uLy4uLy4uL2ljb25zL0RyYWcnXG5pbXBvcnQgeyB1c2VMaXZlUHJldmlld0NvbnRleHQgfSBmcm9tICcuLi9QcmV2aWV3Q29udGV4dC9jb250ZXh0J1xuaW1wb3J0IHsgUHJldmlld0ZyYW1lU2l6ZUlucHV0IH0gZnJvbSAnLi9TaXplSW5wdXQnXG5pbXBvcnQgJy4vaW5kZXguc2NzcydcblxuY29uc3QgYmFzZUNsYXNzID0gJ2xpdmUtcHJldmlldy10b29sYmFyJ1xuXG5leHBvcnQgY29uc3QgTGl2ZVByZXZpZXdUb29sYmFyOiBSZWFjdC5GQzxcbiAgT21pdDxUb29sYmFyUHJvdmlkZXJQcm9wcywgJ2NoaWxkcmVuJz4gJiB7XG4gICAgaWZyYW1lUmVmOiBSZWFjdC5SZWZPYmplY3Q8SFRNTElGcmFtZUVsZW1lbnQ+XG4gICAgc3R5bGU/OiBSZWFjdC5DU1NQcm9wZXJ0aWVzXG4gIH1cbj4gPSAocHJvcHMpID0+IHtcbiAgY29uc3Qge1xuICAgIHBvcHVwU3RhdGU6IHsgb3BlblBvcHVwV2luZG93IH0sXG4gICAgc3R5bGUsXG4gICAgdXJsLFxuICB9ID0gcHJvcHNcblxuICBjb25zdCB7IGJyZWFrcG9pbnQsIGJyZWFrcG9pbnRzLCBzZXRCcmVha3BvaW50LCBzZXRab29tLCB6b29tIH0gPSB1c2VMaXZlUHJldmlld0NvbnRleHQoKVxuXG4gIGNvbnN0IHsgYXR0cmlidXRlcywgbGlzdGVuZXJzLCBzZXROb2RlUmVmLCB0cmFuc2Zvcm0gfSA9IHVzZURyYWdnYWJsZSh7XG4gICAgaWQ6ICdsaXZlLXByZXZpZXctdG9vbGJhcicsXG4gIH0pXG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjbGFzc05hbWU9e2Jhc2VDbGFzc31cbiAgICAgIHN0eWxlPXt7XG4gICAgICAgIC4uLnN0eWxlLFxuICAgICAgICB0cmFuc2Zvcm06IHRyYW5zZm9ybVxuICAgICAgICAgID8gYHRyYW5zbGF0ZTNkKCR7dHJhbnNmb3JtPy54IHx8IDB9cHgsICR7dHJhbnNmb3JtPy55IHx8IDB9cHgsIDApYFxuICAgICAgICAgIDogdW5kZWZpbmVkLFxuICAgICAgfX1cbiAgICA+XG4gICAgICA8YnV0dG9uXG4gICAgICAgIHsuLi5saXN0ZW5lcnN9XG4gICAgICAgIHsuLi5hdHRyaWJ1dGVzfVxuICAgICAgICBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2RyYWctaGFuZGxlYH1cbiAgICAgICAgcmVmPXtzZXROb2RlUmVmfVxuICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgID5cbiAgICAgICAgPERyYWdIYW5kbGUgLz5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2NvbnRyb2xzYH0+XG4gICAgICAgIHticmVha3BvaW50cz8ubGVuZ3RoID4gMCAmJiAoXG4gICAgICAgICAgPHNlbGVjdFxuICAgICAgICAgICAgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19icmVha3BvaW50YH1cbiAgICAgICAgICAgIG9uQ2hhbmdlPXsoZSkgPT4gc2V0QnJlYWtwb2ludChlLnRhcmdldC52YWx1ZSl9XG4gICAgICAgICAgICB2YWx1ZT17YnJlYWtwb2ludH1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7YnJlYWtwb2ludHMubWFwKChicCkgPT4gKFxuICAgICAgICAgICAgICA8b3B0aW9uIGtleT17YnAubmFtZX0gdmFsdWU9e2JwLm5hbWV9PlxuICAgICAgICAgICAgICAgIHticC5sYWJlbH1cbiAgICAgICAgICAgICAgPC9vcHRpb24+XG4gICAgICAgICAgICApKX1cbiAgICAgICAgICA8L3NlbGVjdD5cbiAgICAgICAgKX1cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2RldmljZS1zaXplYH0+XG4gICAgICAgICAgPFByZXZpZXdGcmFtZVNpemVJbnB1dCBheGlzPVwieFwiIC8+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19zaXplLWRpdmlkZXJgfT5cbiAgICAgICAgICAgIDxYIC8+XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgIDxQcmV2aWV3RnJhbWVTaXplSW5wdXQgYXhpcz1cInlcIiAvPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPHNlbGVjdFxuICAgICAgICAgIGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fem9vbWB9XG4gICAgICAgICAgb25DaGFuZ2U9eyhlKSA9PiBzZXRab29tKE51bWJlcihlLnRhcmdldC52YWx1ZSkgLyAxMDApfVxuICAgICAgICAgIHZhbHVlPXt6b29tICogMTAwfVxuICAgICAgICA+XG4gICAgICAgICAgPG9wdGlvbiB2YWx1ZT17NTB9PjUwJTwvb3B0aW9uPlxuICAgICAgICAgIDxvcHRpb24gdmFsdWU9ezc1fT43NSU8L29wdGlvbj5cbiAgICAgICAgICA8b3B0aW9uIHZhbHVlPXsxMDB9PjEwMCU8L29wdGlvbj5cbiAgICAgICAgICA8b3B0aW9uIHZhbHVlPXsxMjV9PjEyNSU8L29wdGlvbj5cbiAgICAgICAgICA8b3B0aW9uIHZhbHVlPXsxNTB9PjE1MCU8L29wdGlvbj5cbiAgICAgICAgICA8b3B0aW9uIHZhbHVlPXsyMDB9PjIwMCU8L29wdGlvbj5cbiAgICAgICAgPC9zZWxlY3Q+XG4gICAgICAgIDxhIGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fZXh0ZXJuYWxgfSBocmVmPXt1cmx9IG9uQ2xpY2s9e29wZW5Qb3B1cFdpbmRvd30gdHlwZT1cImJ1dHRvblwiPlxuICAgICAgICAgIDxFeHRlcm5hbExpbmtJY29uIC8+XG4gICAgICAgIDwvYT5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICApXG59XG4iXSwibmFtZXMiOlsiTGl2ZVByZXZpZXdUb29sYmFyIiwiYmFzZUNsYXNzIiwicHJvcHMiLCJwb3B1cFN0YXRlIiwib3BlblBvcHVwV2luZG93Iiwic3R5bGUiLCJ1cmwiLCJicmVha3BvaW50IiwiYnJlYWtwb2ludHMiLCJzZXRCcmVha3BvaW50Iiwic2V0Wm9vbSIsInpvb20iLCJ1c2VMaXZlUHJldmlld0NvbnRleHQiLCJhdHRyaWJ1dGVzIiwibGlzdGVuZXJzIiwic2V0Tm9kZVJlZiIsInRyYW5zZm9ybSIsInVzZURyYWdnYWJsZSIsImlkIiwiZGl2IiwiY2xhc3NOYW1lIiwieCIsInkiLCJ1bmRlZmluZWQiLCJidXR0b24iLCJyZWYiLCJ0eXBlIiwiRHJhZ0hhbmRsZSIsImxlbmd0aCIsInNlbGVjdCIsIm9uQ2hhbmdlIiwiZSIsInRhcmdldCIsInZhbHVlIiwibWFwIiwiYnAiLCJvcHRpb24iLCJrZXkiLCJuYW1lIiwibGFiZWwiLCJQcmV2aWV3RnJhbWVTaXplSW5wdXQiLCJheGlzIiwic3BhbiIsIlgiLCJOdW1iZXIiLCJhIiwiaHJlZiIsIm9uQ2xpY2siLCJFeHRlcm5hbExpbmtJY29uIl0sIm1hcHBpbmdzIjoiOzs7OytCQWNhQTs7O2VBQUFBOzs7c0JBZGdCOzhEQUNYO2tCQUlBOzhCQUNlOzZEQUNWO3lCQUNlOzJCQUNBO1FBQy9COzs7Ozs7QUFFUCxNQUFNQyxZQUFZO0FBRVgsTUFBTUQscUJBS1QsQ0FBQ0U7SUFDSCxNQUFNLEVBQ0pDLFlBQVksRUFBRUMsZUFBZSxFQUFFLEVBQy9CQyxLQUFLLEVBQ0xDLEdBQUcsRUFDSixHQUFHSjtJQUVKLE1BQU0sRUFBRUssVUFBVSxFQUFFQyxXQUFXLEVBQUVDLGFBQWEsRUFBRUMsT0FBTyxFQUFFQyxJQUFJLEVBQUUsR0FBR0MsSUFBQUEsOEJBQXFCO0lBRXZGLE1BQU0sRUFBRUMsVUFBVSxFQUFFQyxTQUFTLEVBQUVDLFVBQVUsRUFBRUMsU0FBUyxFQUFFLEdBQUdDLElBQUFBLGtCQUFZLEVBQUM7UUFDcEVDLElBQUk7SUFDTjtJQUVBLHFCQUNFLDZCQUFDQztRQUNDQyxXQUFXbkI7UUFDWEksT0FBTztZQUNMLEdBQUdBLEtBQUs7WUFDUlcsV0FBV0EsWUFDUCxDQUFDLFlBQVksRUFBRUEsV0FBV0ssS0FBSyxFQUFFLElBQUksRUFBRUwsV0FBV00sS0FBSyxFQUFFLE1BQU0sQ0FBQyxHQUNoRUM7UUFDTjtxQkFFQSw2QkFBQ0M7UUFDRSxHQUFHVixTQUFTO1FBQ1osR0FBR0QsVUFBVTtRQUNkTyxXQUFXLENBQUMsRUFBRW5CLFVBQVUsYUFBYSxDQUFDO1FBQ3RDd0IsS0FBS1Y7UUFDTFcsTUFBSztxQkFFTCw2QkFBQ0MsYUFBVSx3QkFFYiw2QkFBQ1I7UUFBSUMsV0FBVyxDQUFDLEVBQUVuQixVQUFVLFVBQVUsQ0FBQztPQUNyQ08sYUFBYW9CLFNBQVMsbUJBQ3JCLDZCQUFDQztRQUNDVCxXQUFXLENBQUMsRUFBRW5CLFVBQVUsWUFBWSxDQUFDO1FBQ3JDNkIsVUFBVSxDQUFDQyxJQUFNdEIsY0FBY3NCLEVBQUVDLE1BQU0sQ0FBQ0MsS0FBSztRQUM3Q0EsT0FBTzFCO09BRU5DLFlBQVkwQixHQUFHLENBQUMsQ0FBQ0MsbUJBQ2hCLDZCQUFDQztZQUFPQyxLQUFLRixHQUFHRyxJQUFJO1lBQUVMLE9BQU9FLEdBQUdHLElBQUk7V0FDakNILEdBQUdJLEtBQUssbUJBS2pCLDZCQUFDcEI7UUFBSUMsV0FBVyxDQUFDLEVBQUVuQixVQUFVLGFBQWEsQ0FBQztxQkFDekMsNkJBQUN1QyxnQ0FBcUI7UUFBQ0MsTUFBSztzQkFDNUIsNkJBQUNDO1FBQUt0QixXQUFXLENBQUMsRUFBRW5CLFVBQVUsY0FBYyxDQUFDO3FCQUMzQyw2QkFBQzBDLEdBQUMsd0JBRUosNkJBQUNILGdDQUFxQjtRQUFDQyxNQUFLO3VCQUU5Qiw2QkFBQ1o7UUFDQ1QsV0FBVyxDQUFDLEVBQUVuQixVQUFVLE1BQU0sQ0FBQztRQUMvQjZCLFVBQVUsQ0FBQ0MsSUFBTXJCLFFBQVFrQyxPQUFPYixFQUFFQyxNQUFNLENBQUNDLEtBQUssSUFBSTtRQUNsREEsT0FBT3RCLE9BQU87cUJBRWQsNkJBQUN5QjtRQUFPSCxPQUFPO09BQUksc0JBQ25CLDZCQUFDRztRQUFPSCxPQUFPO09BQUksc0JBQ25CLDZCQUFDRztRQUFPSCxPQUFPO09BQUssdUJBQ3BCLDZCQUFDRztRQUFPSCxPQUFPO09BQUssdUJBQ3BCLDZCQUFDRztRQUFPSCxPQUFPO09BQUssdUJBQ3BCLDZCQUFDRztRQUFPSCxPQUFPO09BQUssd0JBRXRCLDZCQUFDWTtRQUFFekIsV0FBVyxDQUFDLEVBQUVuQixVQUFVLFVBQVUsQ0FBQztRQUFFNkMsTUFBTXhDO1FBQUt5QyxTQUFTM0M7UUFBaUJzQixNQUFLO3FCQUNoRiw2QkFBQ3NCLDhCQUFnQjtBQUszQiJ9

package/dist/admin/components/views/LivePreview/Toolbar/index.scss

@@ -0,0 +1,82 @@
+@import '../../../../scss/styles.scss';
+
+.live-preview-toolbar {
+  display: flex;
+  background-color: var(--theme-bg);
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 1px;
+  color: var(--theme-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+
+  &__drag-handle {
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: grab;
+
+    .icon--drag-handle .fill {
+      fill: var(--theme-elevation-300);
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  &__controls {
+    padding: 6px 6px 6px 0;
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) / 3);
+  }
+
+  &__breakpoint {
+    border: none;
+    background: transparent;
+    height: var(--base);
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &__device-size {
+    display: flex;
+    align-items: center;
+  }
+
+  &__size {
+    width: 50px;
+    height: var(--base);
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--theme-elevation-200);
+    background: var(--theme-elevation-100);
+    border-radius: 2px;
+    font-size: small;
+  }
+
+  &__zoom {
+    width: 55px;
+    border: none;
+    background: transparent;
+    height: var(--base);
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &__external {
+    flex-shrink: 0;
+    display: flex;
+    width: var(--base);
+    height: var(--base);
+    align-items: center;
+    justify-content: center;
+    padding: 6px 0;
+  }
+}

package/dist/admin/components/views/LivePreview/ToolbarArea/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ToolbarArea", {
+    enumerable: true,
+    get: function() {
+        return ToolbarArea;
+    }
+});
+const _core = require("@dnd-kit/core");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+require("./index.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const baseClass = 'toolbar-area';
+const ToolbarArea = (props)=>{
+    const { children } = props;
+    const { setNodeRef } = (0, _core.useDroppable)({
+        id: 'live-preview-area'
+    });
+    return /*#__PURE__*/ _react.default.createElement("div", {
+        className: baseClass,
+        ref: setNodeRef
+    }, children);
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L1Rvb2xiYXJBcmVhL2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB1c2VEcm9wcGFibGUgfSBmcm9tICdAZG5kLWtpdC9jb3JlJ1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgJy4vaW5kZXguc2NzcydcblxuY29uc3QgYmFzZUNsYXNzID0gJ3Rvb2xiYXItYXJlYSdcblxuZXhwb3J0IGNvbnN0IFRvb2xiYXJBcmVhOiBSZWFjdC5GQzx7XG4gIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGVcbn0+ID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IHsgY2hpbGRyZW4gfSA9IHByb3BzXG5cbiAgY29uc3QgeyBzZXROb2RlUmVmIH0gPSB1c2VEcm9wcGFibGUoe1xuICAgIGlkOiAnbGl2ZS1wcmV2aWV3LWFyZWEnLFxuICB9KVxuXG4gIHJldHVybiAoXG4gICAgPGRpdiBjbGFzc05hbWU9e2Jhc2VDbGFzc30gcmVmPXtzZXROb2RlUmVmfT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L2Rpdj5cbiAgKVxufVxuIl0sIm5hbWVzIjpbIlRvb2xiYXJBcmVhIiwiYmFzZUNsYXNzIiwicHJvcHMiLCJjaGlsZHJlbiIsInNldE5vZGVSZWYiLCJ1c2VEcm9wcGFibGUiLCJpZCIsImRpdiIsImNsYXNzTmFtZSIsInJlZiJdLCJtYXBwaW5ncyI6Ijs7OzsrQkFPYUE7OztlQUFBQTs7O3NCQVBnQjs4REFDWDtRQUVYOzs7Ozs7QUFFUCxNQUFNQyxZQUFZO0FBRVgsTUFBTUQsY0FFUixDQUFDRTtJQUNKLE1BQU0sRUFBRUMsUUFBUSxFQUFFLEdBQUdEO0lBRXJCLE1BQU0sRUFBRUUsVUFBVSxFQUFFLEdBQUdDLElBQUFBLGtCQUFZLEVBQUM7UUFDbENDLElBQUk7SUFDTjtJQUVBLHFCQUNFLDZCQUFDQztRQUFJQyxXQUFXUDtRQUFXUSxLQUFLTDtPQUM3QkQ7QUFHUCJ9

package/dist/admin/components/views/LivePreview/ToolbarArea/index.scss

@@ -0,0 +1,6 @@
+@import '../../../../scss/styles.scss';
+
+.toolbar-area {
+  width: 100%;
+  height: 100%;
+}

package/dist/admin/components/views/LivePreview/index.js

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LivePreviewView", {
+    enumerable: true,
+    get: function() {
+        return LivePreviewView;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reacti18next = require("react-i18next");
+const _getTranslation = require("../../../../utilities/getTranslation");
+const _DocumentControls = require("../../elements/DocumentControls");
+const _Gutter = require("../../elements/Gutter");
+const _RenderFields = /*#__PURE__*/ _interop_require_default(require("../../forms/RenderFields"));
+const _filterFields = require("../../forms/RenderFields/filterFields");
+const _fieldtypes = require("../../forms/field-types");
+const _LeaveWithoutSaving = /*#__PURE__*/ _interop_require_default(require("../../modals/LeaveWithoutSaving"));
+const _Meta = /*#__PURE__*/ _interop_require_default(require("../../utilities/Meta"));
+const _PreviewWindow = require("./PreviewWindow");
+require("./index.scss");
+const _usePopupWindow = require("./usePopupWindow");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const baseClass = 'live-preview';
+const LivePreviewView = (props)=>{
+    const { i18n, t } = (0, _reacti18next.useTranslation)('general');
+    let url;
+    if ('collection' in props) {
+        url = props?.collection.admin.livePreview.url;
+    }
+    if ('global' in props) {
+        url = props?.global.admin.livePreview.url;
+    }
+    const popupState = (0, _usePopupWindow.usePopupWindow)({
+        eventType: 'livePreview',
+        href: url
+    });
+    const { apiURL, data, permissions } = props;
+    let collection;
+    let global;
+    let disableActions;
+    let disableLeaveWithoutSaving;
+    let hasSavePermission;
+    let isEditing;
+    let id;
+    if ('collection' in props) {
+        collection = props?.collection;
+        disableActions = props?.disableActions;
+        disableLeaveWithoutSaving = props?.disableLeaveWithoutSaving;
+        hasSavePermission = props?.hasSavePermission;
+        isEditing = props?.isEditing;
+        id = props?.id;
+    }
+    if ('global' in props) {
+        global = props?.global;
+    }
+    const { fields } = collection;
+    const sidebarFields = (0, _filterFields.filterFields)({
+        fieldSchema: fields,
+        fieldTypes: _fieldtypes.fieldTypes,
+        filter: (field)=>field?.admin?.position === 'sidebar',
+        permissions: permissions.fields,
+        readOnly: !hasSavePermission
+    });
+    return /*#__PURE__*/ _react.default.createElement(_react.Fragment, null, /*#__PURE__*/ _react.default.createElement(_DocumentControls.DocumentControls, {
+        apiURL: apiURL,
+        collection: collection,
+        data: data,
+        disableActions: disableActions,
+        global: global,
+        hasSavePermission: hasSavePermission,
+        id: id,
+        isEditing: isEditing,
+        permissions: permissions
+    }), /*#__PURE__*/ _react.default.createElement("div", {
+        className: [
+            baseClass,
+            popupState?.isPopupOpen && `${baseClass}--detached`
+        ].filter(Boolean).join(' ')
+    }, /*#__PURE__*/ _react.default.createElement("div", {
+        className: `${baseClass}__main`
+    }, /*#__PURE__*/ _react.default.createElement(_Meta.default, {
+        description: t('editing'),
+        keywords: `${(0, _getTranslation.getTranslation)(collection.labels.singular, i18n)}, Payload, CMS`,
+        title: `${isEditing ? t('editing') : t('creating')} - ${(0, _getTranslation.getTranslation)(collection.labels.singular, i18n)}`
+    }), !(collection.versions?.drafts && collection.versions?.drafts?.autosave) && !disableLeaveWithoutSaving && /*#__PURE__*/ _react.default.createElement(_LeaveWithoutSaving.default, null), /*#__PURE__*/ _react.default.createElement(_Gutter.Gutter, {
+        className: `${baseClass}__edit`
+    }, /*#__PURE__*/ _react.default.createElement(_RenderFields.default, {
+        fieldSchema: fields,
+        fieldTypes: _fieldtypes.fieldTypes,
+        filter: (field)=>!field?.admin?.position || field?.admin?.position !== 'sidebar',
+        permissions: permissions.fields,
+        readOnly: !hasSavePermission
+    }), sidebarFields && sidebarFields.length > 0 && /*#__PURE__*/ _react.default.createElement(_RenderFields.default, {
+        fieldTypes: _fieldtypes.fieldTypes,
+        fields: sidebarFields
+    }))), /*#__PURE__*/ _react.default.createElement(_PreviewWindow.PreviewWindow, {
+        ...props,
+        popupState: popupState,
+        url: url
+    })));
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgRnJhZ21lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCdcblxuaW1wb3J0IHR5cGUgeyBTYW5pdGl6ZWRDb2xsZWN0aW9uQ29uZmlnLCBTYW5pdGl6ZWRHbG9iYWxDb25maWcgfSBmcm9tICcuLi8uLi8uLi8uLi9leHBvcnRzL3R5cGVzJ1xuaW1wb3J0IHR5cGUgeyBFZGl0Vmlld1Byb3BzIH0gZnJvbSAnLi4vdHlwZXMnXG5cbmltcG9ydCB7IGdldFRyYW5zbGF0aW9uIH0gZnJvbSAnLi4vLi4vLi4vLi4vdXRpbGl0aWVzL2dldFRyYW5zbGF0aW9uJ1xuaW1wb3J0IHsgRG9jdW1lbnRDb250cm9scyB9IGZyb20gJy4uLy4uL2VsZW1lbnRzL0RvY3VtZW50Q29udHJvbHMnXG5pbXBvcnQgeyBHdXR0ZXIgfSBmcm9tICcuLi8uLi9lbGVtZW50cy9HdXR0ZXInXG5pbXBvcnQgUmVuZGVyRmllbGRzIGZyb20gJy4uLy4uL2Zvcm1zL1JlbmRlckZpZWxkcydcbmltcG9ydCB7IGZpbHRlckZpZWxkcyB9IGZyb20gJy4uLy4uL2Zvcm1zL1JlbmRlckZpZWxkcy9maWx0ZXJGaWVsZHMnXG5pbXBvcnQgeyBmaWVsZFR5cGVzIH0gZnJvbSAnLi4vLi4vZm9ybXMvZmllbGQtdHlwZXMnXG5pbXBvcnQgTGVhdmVXaXRob3V0U2F2aW5nIGZyb20gJy4uLy4uL21vZGFscy9MZWF2ZVdpdGhvdXRTYXZpbmcnXG5pbXBvcnQgTWV0YSBmcm9tICcuLi8uLi91dGlsaXRpZXMvTWV0YSdcbmltcG9ydCB7IFByZXZpZXdXaW5kb3cgfSBmcm9tICcuL1ByZXZpZXdXaW5kb3cnXG5pbXBvcnQgJy4vaW5kZXguc2NzcydcbmltcG9ydCB7IHVzZVBvcHVwV2luZG93IH0gZnJvbSAnLi91c2VQb3B1cFdpbmRvdydcblxuY29uc3QgYmFzZUNsYXNzID0gJ2xpdmUtcHJldmlldydcblxuZXhwb3J0IGNvbnN0IExpdmVQcmV2aWV3VmlldzogUmVhY3QuRkM8RWRpdFZpZXdQcm9wcz4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgeyBpMThuLCB0IH0gPSB1c2VUcmFuc2xhdGlvbignZ2VuZXJhbCcpXG5cbiAgbGV0IHVybFxuXG4gIGlmICgnY29sbGVjdGlvbicgaW4gcHJvcHMpIHtcbiAgICB1cmwgPSBwcm9wcz8uY29sbGVjdGlvbi5hZG1pbi5saXZlUHJldmlldy51cmxcbiAgfVxuXG4gIGlmICgnZ2xvYmFsJyBpbiBwcm9wcykge1xuICAgIHVybCA9IHByb3BzPy5nbG9iYWwuYWRtaW4ubGl2ZVByZXZpZXcudXJsXG4gIH1cblxuICBjb25zdCBwb3B1cFN0YXRlID0gdXNlUG9wdXBXaW5kb3coe1xuICAgIGV2ZW50VHlwZTogJ2xpdmVQcmV2aWV3JyxcbiAgICBocmVmOiB1cmwsXG4gIH0pXG5cbiAgY29uc3QgeyBhcGlVUkwsIGRhdGEsIHBlcm1pc3Npb25zIH0gPSBwcm9wc1xuXG4gIGxldCBjb2xsZWN0aW9uOiBTYW5pdGl6ZWRDb2xsZWN0aW9uQ29uZmlnXG4gIGxldCBnbG9iYWw6IFNhbml0aXplZEdsb2JhbENvbmZpZ1xuICBsZXQgZGlzYWJsZUFjdGlvbnM6IGJvb2xlYW5cbiAgbGV0IGRpc2FibGVMZWF2ZVdpdGhvdXRTYXZpbmc6IGJvb2xlYW5cbiAgbGV0IGhhc1NhdmVQZXJtaXNzaW9uOiBib29sZWFuXG4gIGxldCBpc0VkaXRpbmc6IGJvb2xlYW5cbiAgbGV0IGlkOiBzdHJpbmdcblxuICBpZiAoJ2NvbGxlY3Rpb24nIGluIHByb3BzKSB7XG4gICAgY29sbGVjdGlvbiA9IHByb3BzPy5jb2xsZWN0aW9uXG4gICAgZGlzYWJsZUFjdGlvbnMgPSBwcm9wcz8uZGlzYWJsZUFjdGlvbnNcbiAgICBkaXNhYmxlTGVhdmVXaXRob3V0U2F2aW5nID0gcHJvcHM/LmRpc2FibGVMZWF2ZVdpdGhvdXRTYXZpbmdcbiAgICBoYXNTYXZlUGVybWlzc2lvbiA9IHByb3BzPy5oYXNTYXZlUGVybWlzc2lvblxuICAgIGlzRWRpdGluZyA9IHByb3BzPy5pc0VkaXRpbmdcbiAgICBpZCA9IHByb3BzPy5pZFxuICB9XG5cbiAgaWYgKCdnbG9iYWwnIGluIHByb3BzKSB7XG4gICAgZ2xvYmFsID0gcHJvcHM/Lmdsb2JhbFxuICB9XG5cbiAgY29uc3QgeyBmaWVsZHMgfSA9IGNvbGxlY3Rpb25cblxuICBjb25zdCBzaWRlYmFyRmllbGRzID0gZmlsdGVyRmllbGRzKHtcbiAgICBmaWVsZFNjaGVtYTogZmllbGRzLFxuICAgIGZpZWxkVHlwZXMsXG4gICAgZmlsdGVyOiAoZmllbGQpID0+IGZpZWxkPy5hZG1pbj8ucG9zaXRpb24gPT09ICdzaWRlYmFyJyxcbiAgICBwZXJtaXNzaW9uczogcGVybWlzc2lvbnMuZmllbGRzLFxuICAgIHJlYWRPbmx5OiAhaGFzU2F2ZVBlcm1pc3Npb24sXG4gIH0pXG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8RG9jdW1lbnRDb250cm9sc1xuICAgICAgICBhcGlVUkw9e2FwaVVSTH1cbiAgICAgICAgY29sbGVjdGlvbj17Y29sbGVjdGlvbn1cbiAgICAgICAgZGF0YT17ZGF0YX1cbiAgICAgICAgZGlzYWJsZUFjdGlvbnM9e2Rpc2FibGVBY3Rpb25zfVxuICAgICAgICBnbG9iYWw9e2dsb2JhbH1cbiAgICAgICAgaGFzU2F2ZVBlcm1pc3Npb249e2hhc1NhdmVQZXJtaXNzaW9ufVxuICAgICAgICBpZD17aWR9XG4gICAgICAgIGlzRWRpdGluZz17aXNFZGl0aW5nfVxuICAgICAgICBwZXJtaXNzaW9ucz17cGVybWlzc2lvbnN9XG4gICAgICAvPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzc05hbWU9e1tiYXNlQ2xhc3MsIHBvcHVwU3RhdGU/LmlzUG9wdXBPcGVuICYmIGAke2Jhc2VDbGFzc30tLWRldGFjaGVkYF1cbiAgICAgICAgICAuZmlsdGVyKEJvb2xlYW4pXG4gICAgICAgICAgLmpvaW4oJyAnKX1cbiAgICAgID5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX21haW5gfT5cbiAgICAgICAgICA8TWV0YVxuICAgICAgICAgICAgZGVzY3JpcHRpb249e3QoJ2VkaXRpbmcnKX1cbiAgICAgICAgICAgIGtleXdvcmRzPXtgJHtnZXRUcmFuc2xhdGlvbihjb2xsZWN0aW9uLmxhYmVscy5zaW5ndWxhciwgaTE4bil9LCBQYXlsb2FkLCBDTVNgfVxuICAgICAgICAgICAgdGl0bGU9e2Ake2lzRWRpdGluZyA/IHQoJ2VkaXRpbmcnKSA6IHQoJ2NyZWF0aW5nJyl9IC0gJHtnZXRUcmFuc2xhdGlvbihcbiAgICAgICAgICAgICAgY29sbGVjdGlvbi5sYWJlbHMuc2luZ3VsYXIsXG4gICAgICAgICAgICAgIGkxOG4sXG4gICAgICAgICAgICApfWB9XG4gICAgICAgICAgLz5cbiAgICAgICAgICB7IShjb2xsZWN0aW9uLnZlcnNpb25zPy5kcmFmdHMgJiYgY29sbGVjdGlvbi52ZXJzaW9ucz8uZHJhZnRzPy5hdXRvc2F2ZSkgJiZcbiAgICAgICAgICAgICFkaXNhYmxlTGVhdmVXaXRob3V0U2F2aW5nICYmIDxMZWF2ZVdpdGhvdXRTYXZpbmcgLz59XG4gICAgICAgICAgPEd1dHRlciBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2VkaXRgfT5cbiAgICAgICAgICAgIDxSZW5kZXJGaWVsZHNcbiAgICAgICAgICAgICAgZmllbGRTY2hlbWE9e2ZpZWxkc31cbiAgICAgICAgICAgICAgZmllbGRUeXBlcz17ZmllbGRUeXBlc31cbiAgICAgICAgICAgICAgZmlsdGVyPXsoZmllbGQpID0+ICFmaWVsZD8uYWRtaW4/LnBvc2l0aW9uIHx8IGZpZWxkPy5hZG1pbj8ucG9zaXRpb24gIT09ICdzaWRlYmFyJ31cbiAgICAgICAgICAgICAgcGVybWlzc2lvbnM9e3Blcm1pc3Npb25zLmZpZWxkc31cbiAgICAgICAgICAgICAgcmVhZE9ubHk9eyFoYXNTYXZlUGVybWlzc2lvbn1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgICB7c2lkZWJhckZpZWxkcyAmJiBzaWRlYmFyRmllbGRzLmxlbmd0aCA+IDAgJiYgKFxuICAgICAgICAgICAgICA8UmVuZGVyRmllbGRzIGZpZWxkVHlwZXM9e2ZpZWxkVHlwZXN9IGZpZWxkcz17c2lkZWJhckZpZWxkc30gLz5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgPC9HdXR0ZXI+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8UHJldmlld1dpbmRvdyB7Li4ucHJvcHN9IHBvcHVwU3RhdGU9e3BvcHVwU3RhdGV9IHVybD17dXJsfSAvPlxuICAgICAgPC9kaXY+XG4gICAgPC9GcmFnbWVudD5cbiAgKVxufVxuIl0sIm5hbWVzIjpbIkxpdmVQcmV2aWV3VmlldyIsImJhc2VDbGFzcyIsInByb3BzIiwiaTE4biIsInQiLCJ1c2VUcmFuc2xhdGlvbiIsInVybCIsImNvbGxlY3Rpb24iLCJhZG1pbiIsImxpdmVQcmV2aWV3IiwiZ2xvYmFsIiwicG9wdXBTdGF0ZSIsInVzZVBvcHVwV2luZG93IiwiZXZlbnRUeXBlIiwiaHJlZiIsImFwaVVSTCIsImRhdGEiLCJwZXJtaXNzaW9ucyIsImRpc2FibGVBY3Rpb25zIiwiZGlzYWJsZUxlYXZlV2l0aG91dFNhdmluZyIsImhhc1NhdmVQZXJtaXNzaW9uIiwiaXNFZGl0aW5nIiwiaWQiLCJmaWVsZHMiLCJzaWRlYmFyRmllbGRzIiwiZmlsdGVyRmllbGRzIiwiZmllbGRTY2hlbWEiLCJmaWVsZFR5cGVzIiwiZmlsdGVyIiwiZmllbGQiLCJwb3NpdGlvbiIsInJlYWRPbmx5IiwiRnJhZ21lbnQiLCJEb2N1bWVudENvbnRyb2xzIiwiZGl2IiwiY2xhc3NOYW1lIiwiaXNQb3B1cE9wZW4iLCJCb29sZWFuIiwiam9pbiIsIk1ldGEiLCJkZXNjcmlwdGlvbiIsImtleXdvcmRzIiwiZ2V0VHJhbnNsYXRpb24iLCJsYWJlbHMiLCJzaW5ndWxhciIsInRpdGxlIiwidmVyc2lvbnMiLCJkcmFmdHMiLCJhdXRvc2F2ZSIsIkxlYXZlV2l0aG91dFNhdmluZyIsIkd1dHRlciIsIlJlbmRlckZpZWxkcyIsImxlbmd0aCIsIlByZXZpZXdXaW5kb3ciXSwibWFwcGluZ3MiOiI7Ozs7K0JBb0JhQTs7O2VBQUFBOzs7K0RBcEJtQjs4QkFDRDtnQ0FLQTtrQ0FDRTt3QkFDVjtxRUFDRTs4QkFDSTs0QkFDRjsyRUFDSTs2REFDZDsrQkFDYTtRQUN2QjtnQ0FDd0I7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUUvQixNQUFNQyxZQUFZO0FBRVgsTUFBTUQsa0JBQTJDLENBQUNFO0lBQ3ZELE1BQU0sRUFBRUMsSUFBSSxFQUFFQyxDQUFDLEVBQUUsR0FBR0MsSUFBQUEsNEJBQWMsRUFBQztJQUVuQyxJQUFJQztJQUVKLElBQUksZ0JBQWdCSixPQUFPO1FBQ3pCSSxNQUFNSixPQUFPSyxXQUFXQyxNQUFNQyxZQUFZSDtJQUM1QztJQUVBLElBQUksWUFBWUosT0FBTztRQUNyQkksTUFBTUosT0FBT1EsT0FBT0YsTUFBTUMsWUFBWUg7SUFDeEM7SUFFQSxNQUFNSyxhQUFhQyxJQUFBQSw4QkFBYyxFQUFDO1FBQ2hDQyxXQUFXO1FBQ1hDLE1BQU1SO0lBQ1I7SUFFQSxNQUFNLEVBQUVTLE1BQU0sRUFBRUMsSUFBSSxFQUFFQyxXQUFXLEVBQUUsR0FBR2Y7SUFFdEMsSUFBSUs7SUFDSixJQUFJRztJQUNKLElBQUlRO0lBQ0osSUFBSUM7SUFDSixJQUFJQztJQUNKLElBQUlDO0lBQ0osSUFBSUM7SUFFSixJQUFJLGdCQUFnQnBCLE9BQU87UUFDekJLLGFBQWFMLE9BQU9LO1FBQ3BCVyxpQkFBaUJoQixPQUFPZ0I7UUFDeEJDLDRCQUE0QmpCLE9BQU9pQjtRQUNuQ0Msb0JBQW9CbEIsT0FBT2tCO1FBQzNCQyxZQUFZbkIsT0FBT21CO1FBQ25CQyxLQUFLcEIsT0FBT29CO0lBQ2Q7SUFFQSxJQUFJLFlBQVlwQixPQUFPO1FBQ3JCUSxTQUFTUixPQUFPUTtJQUNsQjtJQUVBLE1BQU0sRUFBRWEsTUFBTSxFQUFFLEdBQUdoQjtJQUVuQixNQUFNaUIsZ0JBQWdCQyxJQUFBQSwwQkFBWSxFQUFDO1FBQ2pDQyxhQUFhSDtRQUNiSSxZQUFBQSxzQkFBVTtRQUNWQyxRQUFRLENBQUNDLFFBQVVBLE9BQU9yQixPQUFPc0IsYUFBYTtRQUM5Q2IsYUFBYUEsWUFBWU0sTUFBTTtRQUMvQlEsVUFBVSxDQUFDWDtJQUNiO0lBRUEscUJBQ0UsNkJBQUNZLGVBQVEsc0JBQ1AsNkJBQUNDLGtDQUFnQjtRQUNmbEIsUUFBUUE7UUFDUlIsWUFBWUE7UUFDWlMsTUFBTUE7UUFDTkUsZ0JBQWdCQTtRQUNoQlIsUUFBUUE7UUFDUlUsbUJBQW1CQTtRQUNuQkUsSUFBSUE7UUFDSkQsV0FBV0E7UUFDWEosYUFBYUE7c0JBRWYsNkJBQUNpQjtRQUNDQyxXQUFXO1lBQUNsQztZQUFXVSxZQUFZeUIsZUFBZSxDQUFDLEVBQUVuQyxVQUFVLFVBQVUsQ0FBQztTQUFDLENBQ3hFMkIsTUFBTSxDQUFDUyxTQUNQQyxJQUFJLENBQUM7cUJBRVIsNkJBQUNKO1FBQUlDLFdBQVcsQ0FBQyxFQUFFbEMsVUFBVSxNQUFNLENBQUM7cUJBQ2xDLDZCQUFDc0MsYUFBSTtRQUNIQyxhQUFhcEMsRUFBRTtRQUNmcUMsVUFBVSxDQUFDLEVBQUVDLElBQUFBLDhCQUFjLEVBQUNuQyxXQUFXb0MsTUFBTSxDQUFDQyxRQUFRLEVBQUV6QyxNQUFNLGNBQWMsQ0FBQztRQUM3RTBDLE9BQU8sQ0FBQyxFQUFFeEIsWUFBWWpCLEVBQUUsYUFBYUEsRUFBRSxZQUFZLEdBQUcsRUFBRXNDLElBQUFBLDhCQUFjLEVBQ3BFbkMsV0FBV29DLE1BQU0sQ0FBQ0MsUUFBUSxFQUMxQnpDLE1BQ0EsQ0FBQztRQUVKLENBQUVJLENBQUFBLFdBQVd1QyxRQUFRLEVBQUVDLFVBQVV4QyxXQUFXdUMsUUFBUSxFQUFFQyxRQUFRQyxRQUFPLEtBQ3BFLENBQUM3QiwyQ0FBNkIsNkJBQUM4QiwyQkFBa0IsdUJBQ25ELDZCQUFDQyxjQUFNO1FBQUNmLFdBQVcsQ0FBQyxFQUFFbEMsVUFBVSxNQUFNLENBQUM7cUJBQ3JDLDZCQUFDa0QscUJBQVk7UUFDWHpCLGFBQWFIO1FBQ2JJLFlBQVlBLHNCQUFVO1FBQ3RCQyxRQUFRLENBQUNDLFFBQVUsQ0FBQ0EsT0FBT3JCLE9BQU9zQixZQUFZRCxPQUFPckIsT0FBT3NCLGFBQWE7UUFDekViLGFBQWFBLFlBQVlNLE1BQU07UUFDL0JRLFVBQVUsQ0FBQ1g7UUFFWkksaUJBQWlCQSxjQUFjNEIsTUFBTSxHQUFHLG1CQUN2Qyw2QkFBQ0QscUJBQVk7UUFBQ3hCLFlBQVlBLHNCQUFVO1FBQUVKLFFBQVFDO3dCQUlwRCw2QkFBQzZCLDRCQUFhO1FBQUUsR0FBR25ELEtBQUs7UUFBRVMsWUFBWUE7UUFBWUwsS0FBS0E7O0FBSS9EIn0=

package/dist/admin/components/views/LivePreview/index.scss

@@ -0,0 +1,75 @@
+@import '../../../scss/styles.scss';
+
+.live-preview {
+  width: 100%;
+  display: flex;
+
+  [dir='rtl'] & {
+    flex-direction: row-reverse;
+  }
+
+  &--popup-open {
+    .live-preview {
+      &__edit {
+        padding-right: var(--gutter-h);
+      }
+    }
+  }
+
+  &__main {
+    flex-grow: 1;
+    flex-shrink: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    position: relative;
+
+    &::after {
+      content: ' ';
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: calc(var(--base) * 2);
+      height: 100%;
+      background: linear-gradient(to left, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
+      pointer-events: none;
+      z-index: -1;
+    }
+  }
+
+  &__edit {
+    padding-top: calc(var(--base) * 1.5);
+    padding-bottom: base(4);
+    flex-grow: 1;
+    padding-right: calc(var(--base) * 2);
+
+    [dir='rtl'] & {
+      padding-right: 0;
+      padding-left: calc(var(--base) * 2);
+    }
+  }
+
+  @include mid-break {
+    flex-direction: column;
+
+    &__main {
+      min-height: initial;
+    }
+
+    &__form {
+      display: block;
+    }
+
+    &__edit {
+      padding-top: var(--base);
+      padding-bottom: 0;
+      padding-right: var(--gutter-h);
+    }
+  }
+
+  @include small-break {
+    &__edit {
+      padding-top: calc(var(--base) / 2);
+    }
+  }
+}

package/dist/admin/components/views/LivePreview/useLivePreview.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useLivePreview", {
+    enumerable: true,
+    get: function() {
+        return useLivePreview;
+    }
+});
+const _react = require("react");
+const useLivePreview = (props)=>{
+    const { initialPage, serverURL } = props;
+    const [data, setData] = (0, _react.useState)(initialPage);
+    const [isLoading, setIsLoading] = (0, _react.useState)(true);
+    const handleMessage = (0, _react.useCallback)((event)=>{
+        if (event.origin === serverURL && event.data) {
+            const eventData = JSON.parse(event?.data);
+            if (eventData.type === 'livePreview') {
+                setData(eventData?.data);
+                setIsLoading(false);
+            }
+        }
+    }, [
+        serverURL
+    ]);
+    (0, _react.useEffect)(()=>{
+        window.addEventListener('message', handleMessage);
+        window.parent.postMessage('ready', serverURL);
+        return ()=>{
+            window.removeEventListener('message', handleMessage);
+        };
+    }, [
+        serverURL,
+        handleMessage
+    ]);
+    return {
+        data,
+        isLoading
+    };
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L3VzZUxpdmVQcmV2aWV3LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VFZmZlY3QsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnXG5cbi8vIFRvIHByZXZlbnQgdGhlIGZsaWNrZXIgb2YgbWlzc2luZyBkYXRhIG9uIGluaXRpYWwgbG9hZCxcbi8vIHlvdSBjYW4gcGFzcyBpbiB0aGUgaW5pdGlhbCBwYWdlIGRhdGEgZnJvbSB0aGUgc2VydmVyXG4vLyBUbyBwcmV2ZW50IHRoZSBmbGlja2VyIG9mIHN0YWxlIGRhdGEgd2hpbGUgdGhlIHBvc3QgbWVzc2FnZSBpcyBiZWluZyBzZW50LFxuLy8geW91IGNhbiBjb25kaXRpb25hbGx5IHJlbmRlciBsb2FkaW5nIFVJIGJhc2VkIG9uIHRoZSBgaXNMb2FkaW5nYCBzdGF0ZVxuZXhwb3J0IGNvbnN0IHVzZUxpdmVQcmV2aWV3ID0gKHByb3BzOiB7XG4gIGluaXRpYWxQYWdlOiBhbnlcbiAgc2VydmVyVVJMOiBzdHJpbmdcbn0pOiB7XG4gIGRhdGE6IGFueVxuICBpc0xvYWRpbmc6IGJvb2xlYW5cbn0gPT4ge1xuICBjb25zdCB7IGluaXRpYWxQYWdlLCBzZXJ2ZXJVUkwgfSA9IHByb3BzXG4gIGNvbnN0IFtkYXRhLCBzZXREYXRhXSA9IHVzZVN0YXRlPGFueT4oaW5pdGlhbFBhZ2UpXG4gIGNvbnN0IFtpc0xvYWRpbmcsIHNldElzTG9hZGluZ10gPSB1c2VTdGF0ZTxib29sZWFuPih0cnVlKVxuXG4gIGNvbnN0IGhhbmRsZU1lc3NhZ2UgPSB1c2VDYWxsYmFjayhcbiAgICAoZXZlbnQ6IE1lc3NhZ2VFdmVudCkgPT4ge1xuICAgICAgaWYgKGV2ZW50Lm9yaWdpbiA9PT0gc2VydmVyVVJMICYmIGV2ZW50LmRhdGEpIHtcbiAgICAgICAgY29uc3QgZXZlbnREYXRhID0gSlNPTi5wYXJzZShldmVudD8uZGF0YSlcbiAgICAgICAgaWYgKGV2ZW50RGF0YS50eXBlID09PSAnbGl2ZVByZXZpZXcnKSB7XG4gICAgICAgICAgc2V0RGF0YShldmVudERhdGE/LmRhdGEpXG4gICAgICAgICAgc2V0SXNMb2FkaW5nKGZhbHNlKVxuICAgICAgICB9XG4gICAgICB9XG4gICAgfSxcbiAgICBbc2VydmVyVVJMXSxcbiAgKVxuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ21lc3NhZ2UnLCBoYW5kbGVNZXNzYWdlKVxuICAgIHdpbmRvdy5wYXJlbnQucG9zdE1lc3NhZ2UoJ3JlYWR5Jywgc2VydmVyVVJMKVxuXG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIHdpbmRvdy5yZW1vdmVFdmVudExpc3RlbmVyKCdtZXNzYWdlJywgaGFuZGxlTWVzc2FnZSlcbiAgICB9XG4gIH0sIFtzZXJ2ZXJVUkwsIGhhbmRsZU1lc3NhZ2VdKVxuXG4gIHJldHVybiB7XG4gICAgZGF0YSxcbiAgICBpc0xvYWRpbmcsXG4gIH1cbn1cbiJdLCJuYW1lcyI6WyJ1c2VMaXZlUHJldmlldyIsInByb3BzIiwiaW5pdGlhbFBhZ2UiLCJzZXJ2ZXJVUkwiLCJkYXRhIiwic2V0RGF0YSIsInVzZVN0YXRlIiwiaXNMb2FkaW5nIiwic2V0SXNMb2FkaW5nIiwiaGFuZGxlTWVzc2FnZSIsInVzZUNhbGxiYWNrIiwiZXZlbnQiLCJvcmlnaW4iLCJldmVudERhdGEiLCJKU09OIiwicGFyc2UiLCJ0eXBlIiwidXNlRWZmZWN0Iiwid2luZG93IiwiYWRkRXZlbnRMaXN0ZW5lciIsInBhcmVudCIsInBvc3RNZXNzYWdlIiwicmVtb3ZlRXZlbnRMaXN0ZW5lciJdLCJtYXBwaW5ncyI6Ijs7OzsrQkFNYUE7OztlQUFBQTs7O3VCQU5vQztBQU0xQyxNQUFNQSxpQkFBaUIsQ0FBQ0M7SUFPN0IsTUFBTSxFQUFFQyxXQUFXLEVBQUVDLFNBQVMsRUFBRSxHQUFHRjtJQUNuQyxNQUFNLENBQUNHLE1BQU1DLFFBQVEsR0FBR0MsSUFBQUEsZUFBUSxFQUFNSjtJQUN0QyxNQUFNLENBQUNLLFdBQVdDLGFBQWEsR0FBR0YsSUFBQUEsZUFBUSxFQUFVO0lBRXBELE1BQU1HLGdCQUFnQkMsSUFBQUEsa0JBQVcsRUFDL0IsQ0FBQ0M7UUFDQyxJQUFJQSxNQUFNQyxNQUFNLEtBQUtULGFBQWFRLE1BQU1QLElBQUksRUFBRTtZQUM1QyxNQUFNUyxZQUFZQyxLQUFLQyxLQUFLLENBQUNKLE9BQU9QO1lBQ3BDLElBQUlTLFVBQVVHLElBQUksS0FBSyxlQUFlO2dCQUNwQ1gsUUFBUVEsV0FBV1Q7Z0JBQ25CSSxhQUFhO1lBQ2Y7UUFDRjtJQUNGLEdBQ0E7UUFBQ0w7S0FBVTtJQUdiYyxJQUFBQSxnQkFBUyxFQUFDO1FBQ1JDLE9BQU9DLGdCQUFnQixDQUFDLFdBQVdWO1FBQ25DUyxPQUFPRSxNQUFNLENBQUNDLFdBQVcsQ0FBQyxTQUFTbEI7UUFFbkMsT0FBTztZQUNMZSxPQUFPSSxtQkFBbUIsQ0FBQyxXQUFXYjtRQUN4QztJQUNGLEdBQUc7UUFBQ047UUFBV007S0FBYztJQUU3QixPQUFPO1FBQ0xMO1FBQ0FHO0lBQ0Y7QUFDRiJ9