payload 2.0.0-beta.1 → 2.0.0-beta.4

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

@@ -0,0 +1,175 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PreviewWindow", {
+    enumerable: true,
+    get: function() {
+        return PreviewWindow;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _context = require("../../../forms/Form/context");
+const _reduceFieldsToValues = /*#__PURE__*/ _interop_require_default(require("../../../forms/Form/reduceFieldsToValues"));
+const _PreviewContext = require("../PreviewContext");
+const _context1 = require("../PreviewContext/context");
+const _PreviewIFrame = require("../PreviewIFrame");
+const _Toolbar = require("../Toolbar");
+const _ToolbarArea = require("../ToolbarArea");
+require("./index.scss");
+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-window';
+const ResponsiveWindow = (props)=>{
+    const { children } = props;
+    const { breakpoint, breakpoints, deviceFrameRef, zoom } = (0, _context1.useLivePreviewContext)();
+    const foundBreakpoint = breakpoint && breakpoints.find((bp)=>bp.name === breakpoint);
+    let x = '0';
+    if (foundBreakpoint && breakpoint !== 'responsive') {
+        x = '-50%';
+        if (typeof zoom === 'number' && typeof foundBreakpoint.width === 'number' && typeof foundBreakpoint.height === 'number') {
+            // keep it centered horizontally
+            x = `${foundBreakpoint.width / 2}px`;
+        }
+    }
+    return /*#__PURE__*/ _react.default.createElement("div", {
+        className: `${baseClass}__responsive-window`,
+        ref: deviceFrameRef,
+        style: {
+            height: foundBreakpoint && typeof foundBreakpoint?.height === 'number' ? `${foundBreakpoint?.height / (typeof zoom === 'number' ? zoom : 1)}px` : typeof zoom === 'number' ? `${100 / zoom}%` : '100%',
+            transform: `translate3d(${x}, 0, 0)`,
+            width: foundBreakpoint && typeof foundBreakpoint?.width === 'number' ? `${foundBreakpoint?.width / (typeof zoom === 'number' ? zoom : 1)}px` : typeof zoom === 'number' ? `${100 / zoom}%` : '100%'
+        }
+    }, children);
+};
+const Preview = (props)=>{
+    const { popupState: { isPopupOpen, popupHasLoaded, popupRef }, url } = props;
+    const { iframeHasLoaded, iframeRef, setIframeHasLoaded } = (0, _context1.useLivePreviewContext)();
+    const { breakpoint, toolbarPosition } = (0, _context1.useLivePreviewContext)();
+    const [fields] = (0, _context.useAllFormFields)();
+    // The preview could either be an iframe embedded on the page
+    // Or it could be a separate popup window
+    // We need to transmit data to both accordingly
+    (0, _react.useEffect)(()=>{
+        if (fields && window && 'postMessage' in window) {
+            const values = (0, _reduceFieldsToValues.default)(fields);
+            const message = JSON.stringify({
+                data: values,
+                type: 'livePreview'
+            });
+            // external window
+            if (isPopupOpen) {
+                setIframeHasLoaded(false);
+                if (popupHasLoaded && popupRef.current) {
+                    popupRef.current.postMessage(message, url);
+                }
+            }
+            // embedded iframe
+            if (!isPopupOpen) {
+                if (iframeHasLoaded && iframeRef.current) {
+                    iframeRef.current.contentWindow?.postMessage(message, url);
+                }
+            }
+        }
+    }, [
+        fields,
+        url,
+        iframeHasLoaded,
+        isPopupOpen,
+        popupRef,
+        popupHasLoaded,
+        iframeRef,
+        setIframeHasLoaded
+    ]);
+    if (!isPopupOpen) {
+        return /*#__PURE__*/ _react.default.createElement("div", {
+            className: [
+                baseClass,
+                isPopupOpen && `${baseClass}--popup-open`,
+                breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`
+            ].filter(Boolean).join(' ')
+        }, /*#__PURE__*/ _react.default.createElement(_ToolbarArea.ToolbarArea, null, /*#__PURE__*/ _react.default.createElement("div", {
+            className: `${baseClass}__wrapper`
+        }, /*#__PURE__*/ _react.default.createElement(ResponsiveWindow, null, /*#__PURE__*/ _react.default.createElement(_PreviewIFrame.IFrame, {
+            ref: iframeRef,
+            setIframeHasLoaded: setIframeHasLoaded,
+            url: url
+        }))), /*#__PURE__*/ _react.default.createElement(_Toolbar.LivePreviewToolbar, {
+            ...props,
+            iframeRef: iframeRef,
+            style: {
+                left: `${toolbarPosition.x}px`,
+                top: `${toolbarPosition.y}px`
+            },
+            url: url
+        })));
+    }
+};
+const PreviewWindow = (props)=>{
+    let url;
+    let breakpoints = [
+        {
+            name: 'responsive',
+            height: '100%',
+            label: 'Responsive',
+            width: '100%'
+        }
+    ];
+    if ('collection' in props) {
+        url = props?.collection.admin.livePreview.url;
+        breakpoints = breakpoints.concat(props?.collection.admin.livePreview.breakpoints);
+    }
+    if ('global' in props) {
+        url = props?.global.admin.livePreview.url;
+        breakpoints = breakpoints.concat(props?.global.admin.livePreview.breakpoints);
+    }
+    return /*#__PURE__*/ _react.default.createElement(_PreviewContext.LivePreviewProvider, {
+        ...props,
+        breakpoints: breakpoints,
+        url: url
+    }, /*#__PURE__*/ _react.default.createElement(Preview, props));
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L1ByZXZpZXdXaW5kb3cvaW5kZXgudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QgfSBmcm9tICdyZWFjdCdcblxuaW1wb3J0IHR5cGUgeyBMaXZlUHJldmlldyB9IGZyb20gJy4uLy4uLy4uLy4uLy4uL2V4cG9ydHMvY29uZmlnJ1xuaW1wb3J0IHR5cGUgeyBFZGl0Vmlld1Byb3BzIH0gZnJvbSAnLi4vLi4vdHlwZXMnXG5pbXBvcnQgdHlwZSB7IHVzZVBvcHVwV2luZG93IH0gZnJvbSAnLi4vdXNlUG9wdXBXaW5kb3cnXG5cbmltcG9ydCB7IHVzZUFsbEZvcm1GaWVsZHMgfSBmcm9tICcuLi8uLi8uLi9mb3Jtcy9Gb3JtL2NvbnRleHQnXG5pbXBvcnQgcmVkdWNlRmllbGRzVG9WYWx1ZXMgZnJvbSAnLi4vLi4vLi4vZm9ybXMvRm9ybS9yZWR1Y2VGaWVsZHNUb1ZhbHVlcydcbmltcG9ydCB7IExpdmVQcmV2aWV3UHJvdmlkZXIgfSBmcm9tICcuLi9QcmV2aWV3Q29udGV4dCdcbmltcG9ydCB7IHVzZUxpdmVQcmV2aWV3Q29udGV4dCB9IGZyb20gJy4uL1ByZXZpZXdDb250ZXh0L2NvbnRleHQnXG5pbXBvcnQgeyBJRnJhbWUgfSBmcm9tICcuLi9QcmV2aWV3SUZyYW1lJ1xuaW1wb3J0IHsgTGl2ZVByZXZpZXdUb29sYmFyIH0gZnJvbSAnLi4vVG9vbGJhcidcbmltcG9ydCB7IFRvb2xiYXJBcmVhIH0gZnJvbSAnLi4vVG9vbGJhckFyZWEnXG5pbXBvcnQgJy4vaW5kZXguc2NzcydcblxuY29uc3QgYmFzZUNsYXNzID0gJ2xpdmUtcHJldmlldy13aW5kb3cnXG5cbmNvbnN0IFJlc3BvbnNpdmVXaW5kb3c6IFJlYWN0LkZDPHtcbiAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZVxufT4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgeyBjaGlsZHJlbiB9ID0gcHJvcHNcblxuICBjb25zdCB7IGJyZWFrcG9pbnQsIGJyZWFrcG9pbnRzLCBkZXZpY2VGcmFtZVJlZiwgem9vbSB9ID0gdXNlTGl2ZVByZXZpZXdDb250ZXh0KClcblxuICBjb25zdCBmb3VuZEJyZWFrcG9pbnQgPSBicmVha3BvaW50ICYmIGJyZWFrcG9pbnRzLmZpbmQoKGJwKSA9PiBicC5uYW1lID09PSBicmVha3BvaW50KVxuXG4gIGxldCB4ID0gJzAnXG5cbiAgaWYgKGZvdW5kQnJlYWtwb2ludCAmJiBicmVha3BvaW50ICE9PSAncmVzcG9uc2l2ZScpIHtcbiAgICB4ID0gJy01MCUnXG5cbiAgICBpZiAoXG4gICAgICB0eXBlb2Ygem9vbSA9PT0gJ251bWJlcicgJiZcbiAgICAgIHR5cGVvZiBmb3VuZEJyZWFrcG9pbnQud2lkdGggPT09ICdudW1iZXInICYmXG4gICAgICB0eXBlb2YgZm91bmRCcmVha3BvaW50LmhlaWdodCA9PT0gJ251bWJlcidcbiAgICApIHtcbiAgICAgIC8vIGtlZXAgaXQgY2VudGVyZWQgaG9yaXpvbnRhbGx5XG4gICAgICB4ID0gYCR7Zm91bmRCcmVha3BvaW50LndpZHRoIC8gMn1weGBcbiAgICB9XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fcmVzcG9uc2l2ZS13aW5kb3dgfVxuICAgICAgcmVmPXtkZXZpY2VGcmFtZVJlZn1cbiAgICAgIHN0eWxlPXt7XG4gICAgICAgIGhlaWdodDpcbiAgICAgICAgICBmb3VuZEJyZWFrcG9pbnQgJiYgdHlwZW9mIGZvdW5kQnJlYWtwb2ludD8uaGVpZ2h0ID09PSAnbnVtYmVyJ1xuICAgICAgICAgICAgPyBgJHtmb3VuZEJyZWFrcG9pbnQ/LmhlaWdodCAvICh0eXBlb2Ygem9vbSA9PT0gJ251bWJlcicgPyB6b29tIDogMSl9cHhgXG4gICAgICAgICAgICA6IHR5cGVvZiB6b29tID09PSAnbnVtYmVyJ1xuICAgICAgICAgICAgPyBgJHsxMDAgLyB6b29tfSVgXG4gICAgICAgICAgICA6ICcxMDAlJyxcbiAgICAgICAgdHJhbnNmb3JtOiBgdHJhbnNsYXRlM2QoJHt4fSwgMCwgMClgLFxuICAgICAgICB3aWR0aDpcbiAgICAgICAgICBmb3VuZEJyZWFrcG9pbnQgJiYgdHlwZW9mIGZvdW5kQnJlYWtwb2ludD8ud2lkdGggPT09ICdudW1iZXInXG4gICAgICAgICAgICA/IGAke2ZvdW5kQnJlYWtwb2ludD8ud2lkdGggLyAodHlwZW9mIHpvb20gPT09ICdudW1iZXInID8gem9vbSA6IDEpfXB4YFxuICAgICAgICAgICAgOiB0eXBlb2Ygem9vbSA9PT0gJ251bWJlcidcbiAgICAgICAgICAgID8gYCR7MTAwIC8gem9vbX0lYFxuICAgICAgICAgICAgOiAnMTAwJScsXG4gICAgICB9fVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L2Rpdj5cbiAgKVxufVxuXG5jb25zdCBQcmV2aWV3OiBSZWFjdC5GQzxcbiAgRWRpdFZpZXdQcm9wcyAmIHtcbiAgICBwb3B1cFN0YXRlOiBSZXR1cm5UeXBlPHR5cGVvZiB1c2VQb3B1cFdpbmRvdz5cbiAgICB1cmw/OiBzdHJpbmdcbiAgfVxuPiA9IChwcm9wcykgPT4ge1xuICBjb25zdCB7XG4gICAgcG9wdXBTdGF0ZTogeyBpc1BvcHVwT3BlbiwgcG9wdXBIYXNMb2FkZWQsIHBvcHVwUmVmIH0sXG4gICAgdXJsLFxuICB9ID0gcHJvcHNcblxuICBjb25zdCB7IGlmcmFtZUhhc0xvYWRlZCwgaWZyYW1lUmVmLCBzZXRJZnJhbWVIYXNMb2FkZWQgfSA9IHVzZUxpdmVQcmV2aWV3Q29udGV4dCgpXG5cbiAgY29uc3QgeyBicmVha3BvaW50LCB0b29sYmFyUG9zaXRpb24gfSA9IHVzZUxpdmVQcmV2aWV3Q29udGV4dCgpXG5cbiAgY29uc3QgW2ZpZWxkc10gPSB1c2VBbGxGb3JtRmllbGRzKClcblxuICAvLyBUaGUgcHJldmlldyBjb3VsZCBlaXRoZXIgYmUgYW4gaWZyYW1lIGVtYmVkZGVkIG9uIHRoZSBwYWdlXG4gIC8vIE9yIGl0IGNvdWxkIGJlIGEgc2VwYXJhdGUgcG9wdXAgd2luZG93XG4gIC8vIFdlIG5lZWQgdG8gdHJhbnNtaXQgZGF0YSB0byBib3RoIGFjY29yZGluZ2x5XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGZpZWxkcyAmJiB3aW5kb3cgJiYgJ3Bvc3RNZXNzYWdlJyBpbiB3aW5kb3cpIHtcbiAgICAgIGNvbnN0IHZhbHVlcyA9IHJlZHVjZUZpZWxkc1RvVmFsdWVzKGZpZWxkcylcbiAgICAgIGNvbnN0IG1lc3NhZ2UgPSBKU09OLnN0cmluZ2lmeSh7IGRhdGE6IHZhbHVlcywgdHlwZTogJ2xpdmVQcmV2aWV3JyB9KVxuXG4gICAgICAvLyBleHRlcm5hbCB3aW5kb3dcbiAgICAgIGlmIChpc1BvcHVwT3Blbikge1xuICAgICAgICBzZXRJZnJhbWVIYXNMb2FkZWQoZmFsc2UpXG5cbiAgICAgICAgaWYgKHBvcHVwSGFzTG9hZGVkICYmIHBvcHVwUmVmLmN1cnJlbnQpIHtcbiAgICAgICAgICBwb3B1cFJlZi5jdXJyZW50LnBvc3RNZXNzYWdlKG1lc3NhZ2UsIHVybClcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAvLyBlbWJlZGRlZCBpZnJhbWVcbiAgICAgIGlmICghaXNQb3B1cE9wZW4pIHtcbiAgICAgICAgaWYgKGlmcmFtZUhhc0xvYWRlZCAmJiBpZnJhbWVSZWYuY3VycmVudCkge1xuICAgICAgICAgIGlmcmFtZVJlZi5jdXJyZW50LmNvbnRlbnRXaW5kb3c/LnBvc3RNZXNzYWdlKG1lc3NhZ2UsIHVybClcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cbiAgfSwgW1xuICAgIGZpZWxkcyxcbiAgICB1cmwsXG4gICAgaWZyYW1lSGFzTG9hZGVkLFxuICAgIGlzUG9wdXBPcGVuLFxuICAgIHBvcHVwUmVmLFxuICAgIHBvcHVwSGFzTG9hZGVkLFxuICAgIGlmcmFtZVJlZixcbiAgICBzZXRJZnJhbWVIYXNMb2FkZWQsXG4gIF0pXG5cbiAgaWYgKCFpc1BvcHVwT3Blbikge1xuICAgIHJldHVybiAoXG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17W1xuICAgICAgICAgIGJhc2VDbGFzcyxcbiAgICAgICAgICBpc1BvcHVwT3BlbiAmJiBgJHtiYXNlQ2xhc3N9LS1wb3B1cC1vcGVuYCxcbiAgICAgICAgICBicmVha3BvaW50ICYmIGJyZWFrcG9pbnQgIT09ICdyZXNwb25zaXZlJyAmJiBgJHtiYXNlQ2xhc3N9LS1oYXMtYnJlYWtwb2ludGAsXG4gICAgICAgIF1cbiAgICAgICAgICAuZmlsdGVyKEJvb2xlYW4pXG4gICAgICAgICAgLmpvaW4oJyAnKX1cbiAgICAgID5cbiAgICAgICAgPFRvb2xiYXJBcmVhPlxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X193cmFwcGVyYH0+XG4gICAgICAgICAgICA8UmVzcG9uc2l2ZVdpbmRvdz5cbiAgICAgICAgICAgICAgPElGcmFtZSByZWY9e2lmcmFtZVJlZn0gc2V0SWZyYW1lSGFzTG9hZGVkPXtzZXRJZnJhbWVIYXNMb2FkZWR9IHVybD17dXJsfSAvPlxuICAgICAgICAgICAgPC9SZXNwb25zaXZlV2luZG93PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxMaXZlUHJldmlld1Rvb2xiYXJcbiAgICAgICAgICAgIHsuLi5wcm9wc31cbiAgICAgICAgICAgIGlmcmFtZVJlZj17aWZyYW1lUmVmfVxuICAgICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgICAgbGVmdDogYCR7dG9vbGJhclBvc2l0aW9uLnh9cHhgLFxuICAgICAgICAgICAgICB0b3A6IGAke3Rvb2xiYXJQb3NpdGlvbi55fXB4YCxcbiAgICAgICAgICAgIH19XG4gICAgICAgICAgICB1cmw9e3VybH1cbiAgICAgICAgICAvPlxuICAgICAgICA8L1Rvb2xiYXJBcmVhPlxuICAgICAgPC9kaXY+XG4gICAgKVxuICB9XG59XG5cbmV4cG9ydCBjb25zdCBQcmV2aWV3V2luZG93OiBSZWFjdC5GQzxcbiAgRWRpdFZpZXdQcm9wcyAmIHtcbiAgICBwb3B1cFN0YXRlOiBSZXR1cm5UeXBlPHR5cGVvZiB1c2VQb3B1cFdpbmRvdz5cbiAgICB1cmw/OiBzdHJpbmdcbiAgfVxuPiA9IChwcm9wcykgPT4ge1xuICBsZXQgdXJsXG5cbiAgbGV0IGJyZWFrcG9pbnRzOiBMaXZlUHJldmlld1snYnJlYWtwb2ludHMnXSA9IFtcbiAgICB7XG4gICAgICBuYW1lOiAncmVzcG9uc2l2ZScsXG4gICAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICAgIGxhYmVsOiAnUmVzcG9uc2l2ZScsXG4gICAgICB3aWR0aDogJzEwMCUnLFxuICAgIH0sXG4gIF1cblxuICBpZiAoJ2NvbGxlY3Rpb24nIGluIHByb3BzKSB7XG4gICAgdXJsID0gcHJvcHM/LmNvbGxlY3Rpb24uYWRtaW4ubGl2ZVByZXZpZXcudXJsXG4gICAgYnJlYWtwb2ludHMgPSBicmVha3BvaW50cy5jb25jYXQocHJvcHM/LmNvbGxlY3Rpb24uYWRtaW4ubGl2ZVByZXZpZXcuYnJlYWtwb2ludHMpXG4gIH1cblxuICBpZiAoJ2dsb2JhbCcgaW4gcHJvcHMpIHtcbiAgICB1cmwgPSBwcm9wcz8uZ2xvYmFsLmFkbWluLmxpdmVQcmV2aWV3LnVybFxuICAgIGJyZWFrcG9pbnRzID0gYnJlYWtwb2ludHMuY29uY2F0KHByb3BzPy5nbG9iYWwuYWRtaW4ubGl2ZVByZXZpZXcuYnJlYWtwb2ludHMpXG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxMaXZlUHJldmlld1Byb3ZpZGVyIHsuLi5wcm9wc30gYnJlYWtwb2ludHM9e2JyZWFrcG9pbnRzfSB1cmw9e3VybH0+XG4gICAgICA8UHJldmlldyB7Li4ucHJvcHN9IC8+XG4gICAgPC9MaXZlUHJldmlld1Byb3ZpZGVyPlxuICApXG59XG4iXSwibmFtZXMiOlsiUHJldmlld1dpbmRvdyIsImJhc2VDbGFzcyIsIlJlc3BvbnNpdmVXaW5kb3ciLCJwcm9wcyIsImNoaWxkcmVuIiwiYnJlYWtwb2ludCIsImJyZWFrcG9pbnRzIiwiZGV2aWNlRnJhbWVSZWYiLCJ6b29tIiwidXNlTGl2ZVByZXZpZXdDb250ZXh0IiwiZm91bmRCcmVha3BvaW50IiwiZmluZCIsImJwIiwibmFtZSIsIngiLCJ3aWR0aCIsImhlaWdodCIsImRpdiIsImNsYXNzTmFtZSIsInJlZiIsInN0eWxlIiwidHJhbnNmb3JtIiwiUHJldmlldyIsInBvcHVwU3RhdGUiLCJpc1BvcHVwT3BlbiIsInBvcHVwSGFzTG9hZGVkIiwicG9wdXBSZWYiLCJ1cmwiLCJpZnJhbWVIYXNMb2FkZWQiLCJpZnJhbWVSZWYiLCJzZXRJZnJhbWVIYXNMb2FkZWQiLCJ0b29sYmFyUG9zaXRpb24iLCJmaWVsZHMiLCJ1c2VBbGxGb3JtRmllbGRzIiwidXNlRWZmZWN0Iiwid2luZG93IiwidmFsdWVzIiwicmVkdWNlRmllbGRzVG9WYWx1ZXMiLCJtZXNzYWdlIiwiSlNPTiIsInN0cmluZ2lmeSIsImRhdGEiLCJ0eXBlIiwiY3VycmVudCIsInBvc3RNZXNzYWdlIiwiY29udGVudFdpbmRvdyIsImZpbHRlciIsIkJvb2xlYW4iLCJqb2luIiwiVG9vbGJhckFyZWEiLCJJRnJhbWUiLCJMaXZlUHJldmlld1Rvb2xiYXIiLCJsZWZ0IiwidG9wIiwieSIsImxhYmVsIiwiY29sbGVjdGlvbiIsImFkbWluIiwibGl2ZVByZXZpZXciLCJjb25jYXQiLCJnbG9iYWwiLCJMaXZlUHJldmlld1Byb3ZpZGVyIl0sIm1hcHBpbmdzIjoiOzs7OytCQXNKYUE7OztlQUFBQTs7OytEQXRKb0I7eUJBTUE7NkVBQ0E7Z0NBQ0c7MEJBQ0U7K0JBQ2Y7eUJBQ1k7NkJBQ1A7UUFDckI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUVQLE1BQU1DLFlBQVk7QUFFbEIsTUFBTUMsbUJBRUQsQ0FBQ0M7SUFDSixNQUFNLEVBQUVDLFFBQVEsRUFBRSxHQUFHRDtJQUVyQixNQUFNLEVBQUVFLFVBQVUsRUFBRUMsV0FBVyxFQUFFQyxjQUFjLEVBQUVDLElBQUksRUFBRSxHQUFH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

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

@@ -0,0 +1,26 @@
+@import '../../../../scss/styles.scss';
+
+.live-preview-window {
+  width: 60%;
+  position: sticky;
+  top: var(--doc-controls-height);
+  height: calc(100vh - var(--doc-controls-height));
+  overflow: hidden;
+
+  &--has-breakpoint {
+    padding-top: var(--base);
+
+    .live-preview-iframe {
+      border: 1px solid var(--theme-elevation-100);
+    }
+  }
+
+  &__wrapper {
+    height: 100%;
+    width: 100%;
+  }
+
+  @include mid-break {
+    width: 100%;
+  }
+}

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%;
+}