payload 2.0.0-beta.2 → 2.0.0-beta.21

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

@@ -0,0 +1,166 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LivePreview", {
+    enumerable: true,
+    get: function() {
+        return LivePreview;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _fieldSchemaToJSON = require("../../../../../utilities/fieldSchemaToJSON");
+const _context = require("../../../forms/Form/context");
+const _reduceFieldsToValues = /*#__PURE__*/ _interop_require_default(require("../../../forms/Form/reduceFieldsToValues"));
+const _Context = require("../Context");
+const _context1 = require("../Context/context");
+const _Device = require("../Device");
+const _IFrame = require("../IFrame");
+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 Preview = (props)=>{
+    const { popupState: { isPopupOpen, popupHasLoaded, popupRef }, url } = props;
+    const { iframeHasLoaded, iframeRef, setIframeHasLoaded } = (0, _context1.useLivePreviewContext)();
+    const { breakpoint } = (0, _context1.useLivePreviewContext)();
+    const [fields] = (0, _context.useAllFormFields)();
+    const [fieldSchemaJSON] = (0, _react.useState)(()=>{
+        let fields;
+        if ('collection' in props) {
+            const { collection } = props;
+            fields = collection.fields;
+        }
+        if ('global' in props) {
+            const { global } = props;
+            fields = global.fields;
+        }
+        return (0, _fieldSchemaToJSON.fieldSchemaToJSON)(fields);
+    });
+    // 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, true);
+            // TODO: only send `fieldSchemaToJSON` one time
+            const message = JSON.stringify({
+                data: values,
+                fieldSchemaJSON,
+                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,
+        fieldSchemaJSON
+    ]);
+    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(_Device.DeviceContainer, null, /*#__PURE__*/ _react.default.createElement(_IFrame.IFrame, {
+            ref: iframeRef,
+            setIframeHasLoaded: setIframeHasLoaded,
+            url: url
+        }))), /*#__PURE__*/ _react.default.createElement(_Toolbar.LivePreviewToolbar, {
+            ...props,
+            iframeRef: iframeRef,
+            url: url
+        })));
+    }
+};
+const LivePreview = (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(_Context.LivePreviewProvider, {
+        ...props,
+        breakpoints: breakpoints,
+        url: url
+    }, /*#__PURE__*/ _react.default.createElement(Preview, props));
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L1ByZXZpZXcvaW5kZXgudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnXG5cbmltcG9ydCB0eXBlIHsgTGl2ZVByZXZpZXcgYXMgTGl2ZVByZXZpZXdUeXBlIH0gZnJvbSAnLi4vLi4vLi4vLi4vLi4vZXhwb3J0cy9jb25maWcnXG5pbXBvcnQgdHlwZSB7IEZpZWxkIH0gZnJvbSAnLi4vLi4vLi4vLi4vLi4vZmllbGRzL2NvbmZpZy90eXBlcydcbmltcG9ydCB0eXBlIHsgRWRpdFZpZXdQcm9wcyB9IGZyb20gJy4uLy4uL3R5cGVzJ1xuaW1wb3J0IHR5cGUgeyB1c2VQb3B1cFdpbmRvdyB9IGZyb20gJy4uL3VzZVBvcHVwV2luZG93J1xuXG5pbXBvcnQgeyBmaWVsZFNjaGVtYVRvSlNPTiB9IGZyb20gJy4uLy4uLy4uLy4uLy4uL3V0aWxpdGllcy9maWVsZFNjaGVtYVRvSlNPTidcbmltcG9ydCB7IHVzZUFsbEZvcm1GaWVsZHMgfSBmcm9tICcuLi8uLi8uLi9mb3Jtcy9Gb3JtL2NvbnRleHQnXG5pbXBvcnQgcmVkdWNlRmllbGRzVG9WYWx1ZXMgZnJvbSAnLi4vLi4vLi4vZm9ybXMvRm9ybS9yZWR1Y2VGaWVsZHNUb1ZhbHVlcydcbmltcG9ydCB7IExpdmVQcmV2aWV3UHJvdmlkZXIgfSBmcm9tICcuLi9Db250ZXh0J1xuaW1wb3J0IHsgdXNlTGl2ZVByZXZpZXdDb250ZXh0IH0gZnJvbSAnLi4vQ29udGV4dC9jb250ZXh0J1xuaW1wb3J0IHsgRGV2aWNlQ29udGFpbmVyIH0gZnJvbSAnLi4vRGV2aWNlJ1xuaW1wb3J0IHsgSUZyYW1lIH0gZnJvbSAnLi4vSUZyYW1lJ1xuaW1wb3J0IHsgTGl2ZVByZXZpZXdUb29sYmFyIH0gZnJvbSAnLi4vVG9vbGJhcidcbmltcG9ydCB7IFRvb2xiYXJBcmVhIH0gZnJvbSAnLi4vVG9vbGJhckFyZWEnXG5pbXBvcnQgJy4vaW5kZXguc2NzcydcblxuY29uc3QgYmFzZUNsYXNzID0gJ2xpdmUtcHJldmlldy13aW5kb3cnXG5cbmNvbnN0IFByZXZpZXc6IFJlYWN0LkZDPFxuICBFZGl0Vmlld1Byb3BzICYge1xuICAgIHBvcHVwU3RhdGU6IFJldHVyblR5cGU8dHlwZW9mIHVzZVBvcHVwV2luZG93PlxuICAgIHVybD86IHN0cmluZ1xuICB9XG4+ID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IHtcbiAgICBwb3B1cFN0YXRlOiB7IGlzUG9wdXBPcGVuLCBwb3B1cEhhc0xvYWRlZCwgcG9wdXBSZWYgfSxcbiAgICB1cmwsXG4gIH0gPSBwcm9wc1xuXG4gIGNvbnN0IHsgaWZyYW1lSGFzTG9hZGVkLCBpZnJhbWVSZWYsIHNldElmcmFtZUhhc0xvYWRlZCB9ID0gdXNlTGl2ZVByZXZpZXdDb250ZXh0KClcblxuICBjb25zdCB7IGJyZWFrcG9pbnQgfSA9IHVzZUxpdmVQcmV2aWV3Q29udGV4dCgpXG5cbiAgY29uc3QgW2ZpZWxkc10gPSB1c2VBbGxGb3JtRmllbGRzKClcblxuICBjb25zdCBbZmllbGRTY2hlbWFKU09OXSA9IHVzZVN0YXRlKCgpID0+IHtcbiAgICBsZXQgZmllbGRzOiBGaWVsZFtdXG5cbiAgICBpZiAoJ2NvbGxlY3Rpb24nIGluIHByb3BzKSB7XG4gICAgICBjb25zdCB7IGNvbGxlY3Rpb24gfSA9IHByb3BzXG4gICAgICBmaWVsZHMgPSBjb2xsZWN0aW9uLmZpZWxkc1xuICAgIH1cblxuICAgIGlmICgnZ2xvYmFsJyBpbiBwcm9wcykge1xuICAgICAgY29uc3QgeyBnbG9iYWwgfSA9IHByb3BzXG4gICAgICBmaWVsZHMgPSBnbG9iYWwuZmllbGRzXG4gICAgfVxuXG4gICAgcmV0dXJuIGZpZWxkU2NoZW1hVG9KU09OKGZpZWxkcylcbiAgfSlcblxuICAvLyBUaGUgcHJldmlldyBjb3VsZCBlaXRoZXIgYmUgYW4gaWZyYW1lIGVtYmVkZGVkIG9uIHRoZSBwYWdlXG4gIC8vIE9yIGl0IGNvdWxkIGJlIGEgc2VwYXJhdGUgcG9wdXAgd2luZG93XG4gIC8vIFdlIG5lZWQgdG8gdHJhbnNtaXQgZGF0YSB0byBib3RoIGFjY29yZGluZ2x5XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGZpZWxkcyAmJiB3aW5kb3cgJiYgJ3Bvc3RNZXNzYWdlJyBpbiB3aW5kb3cpIHtcbiAgICAgIGNvbnN0IHZhbHVlcyA9IHJlZHVjZUZpZWxkc1RvVmFsdWVzKGZpZWxkcywgdHJ1ZSlcblxuICAgICAgLy8gVE9ETzogb25seSBzZW5kIGBmaWVsZFNjaGVtYVRvSlNPTmAgb25lIHRpbWVcbiAgICAgIGNvbnN0IG1lc3NhZ2UgPSBKU09OLnN0cmluZ2lmeSh7IGRhdGE6IHZhbHVlcywgZmllbGRTY2hlbWFKU09OLCB0eXBlOiAnbGl2ZVByZXZpZXcnIH0pXG5cbiAgICAgIC8vIGV4dGVybmFsIHdpbmRvd1xuICAgICAgaWYgKGlzUG9wdXBPcGVuKSB7XG4gICAgICAgIHNldElmcmFtZUhhc0xvYWRlZChmYWxzZSlcblxuICAgICAgICBpZiAocG9wdXBIYXNMb2FkZWQgJiYgcG9wdXBSZWYuY3VycmVudCkge1xuICAgICAgICAgIHBvcHVwUmVmLmN1cnJlbnQucG9zdE1lc3NhZ2UobWVzc2FnZSwgdXJsKVxuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIC8vIGVtYmVkZGVkIGlmcmFtZVxuICAgICAgaWYgKCFpc1BvcHVwT3Blbikge1xuICAgICAgICBpZiAoaWZyYW1lSGFzTG9hZGVkICYmIGlmcmFtZVJlZi5jdXJyZW50KSB7XG4gICAgICAgICAgaWZyYW1lUmVmLmN1cnJlbnQuY29udGVudFdpbmRvdz8ucG9zdE1lc3NhZ2UobWVzc2FnZSwgdXJsKVxuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuICB9LCBbXG4gICAgZmllbGRzLFxuICAgIHVybCxcbiAgICBpZnJhbWVIYXNMb2FkZWQsXG4gICAgaXNQb3B1cE9wZW4sXG4gICAgcG9wdXBSZWYsXG4gICAgcG9wdXBIYXNMb2FkZWQsXG4gICAgaWZyYW1lUmVmLFxuICAgIHNldElmcmFtZUhhc0xvYWRlZCxcbiAgICBmaWVsZFNjaGVtYUpTT04sXG4gIF0pXG5cbiAgaWYgKCFpc1BvcHVwT3Blbikge1xuICAgIHJldHVybiAoXG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17W1xuICAgICAgICAgIGJhc2VDbGFzcyxcbiAgICAgICAgICBpc1BvcHVwT3BlbiAmJiBgJHtiYXNlQ2xhc3N9LS1wb3B1cC1vcGVuYCxcbiAgICAgICAgICBicmVha3BvaW50ICYmIGJyZWFrcG9pbnQgIT09ICdyZXNwb25zaXZlJyAmJiBgJHtiYXNlQ2xhc3N9LS1oYXMtYnJlYWtwb2ludGAsXG4gICAgICAgIF1cbiAgICAgICAgICAuZmlsdGVyKEJvb2xlYW4pXG4gICAgICAgICAgLmpvaW4oJyAnKX1cbiAgICAgID5cbiAgICAgICAgPFRvb2xiYXJBcmVhPlxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X193cmFwcGVyYH0+XG4gICAgICAgICAgICA8RGV2aWNlQ29udGFpbmVyPlxuICAgICAgICAgICAgICA8SUZyYW1lIHJlZj17aWZyYW1lUmVmfSBzZXRJZnJhbWVIYXNMb2FkZWQ9e3NldElmcmFtZUhhc0xvYWRlZH0gdXJsPXt1cmx9IC8+XG4gICAgICAgICAgICA8L0RldmljZUNvbnRhaW5lcj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8TGl2ZVByZXZpZXdUb29sYmFyIHsuLi5wcm9wc30gaWZyYW1lUmVmPXtpZnJhbWVSZWZ9IHVybD17dXJsfSAvPlxuICAgICAgICA8L1Rvb2xiYXJBcmVhPlxuICAgICAgPC9kaXY+XG4gICAgKVxuICB9XG59XG5cbmV4cG9ydCBjb25zdCBMaXZlUHJldmlldzogUmVhY3QuRkM8XG4gIEVkaXRWaWV3UHJvcHMgJiB7XG4gICAgcG9wdXBTdGF0ZTogUmV0dXJuVHlwZTx0eXBlb2YgdXNlUG9wdXBXaW5kb3c+XG4gICAgdXJsPzogc3RyaW5nXG4gIH1cbj4gPSAocHJvcHMpID0+IHtcbiAgbGV0IHVybFxuXG4gIGxldCBicmVha3BvaW50czogTGl2ZVByZXZpZXdUeXBlWydicmVha3BvaW50cyddID0gW1xuICAgIHtcbiAgICAgIG5hbWU6ICdyZXNwb25zaXZlJyxcbiAgICAgIGhlaWdodDogJzEwMCUnLFxuICAgICAgbGFiZWw6ICdSZXNwb25zaXZlJyxcbiAgICAgIHdpZHRoOiAnMTAwJScsXG4gICAgfSxcbiAgXVxuXG4gIGlmICgnY29sbGVjdGlvbicgaW4gcHJvcHMpIHtcbiAgICB1cmwgPSBwcm9wcz8uY29sbGVjdGlvbi5hZG1pbi5saXZlUHJldmlldy51cmxcbiAgICBicmVha3BvaW50cyA9IGJyZWFrcG9pbnRzLmNvbmNhdChwcm9wcz8uY29sbGVjdGlvbi5hZG1pbi5saXZlUHJldmlldy5icmVha3BvaW50cylcbiAgfVxuXG4gIGlmICgnZ2xvYmFsJyBpbiBwcm9wcykge1xuICAgIHVybCA9IHByb3BzPy5nbG9iYWwuYWRtaW4ubGl2ZVByZXZpZXcudXJsXG4gICAgYnJlYWtwb2ludHMgPSBicmVha3BvaW50cy5jb25jYXQocHJvcHM/Lmdsb2JhbC5hZG1pbi5saXZlUHJldmlldy5icmVha3BvaW50cylcbiAgfVxuXG4gIHJldHVybiAoXG4gICAgPExpdmVQcmV2aWV3UHJvdmlkZXIgey4uLnByb3BzfSBicmVha3BvaW50cz17YnJlYWtwb2ludHN9IHVybD17dXJsfT5cbiAgICAgIDxQcmV2aWV3IHsuLi5wcm9wc30gLz5cbiAgICA8L0xpdmVQcmV2aWV3UHJvdmlkZXI+XG4gIClcbn1cbiJdLCJuYW1lcyI6WyJMaXZlUHJldmlldyIsImJhc2VDbGFzcyIsIlByZXZpZXciLCJwcm9wcyIsInBvcHVwU3RhdGUiLCJpc1BvcHVwT3BlbiIsInBvcHVwSGFzTG9hZGVkIiwicG9wdXBSZWYiLCJ1cmwiLCJpZnJhbWVIYXNMb2FkZWQiLCJpZnJhbWVSZWYiLCJzZXRJZnJhbWVIYXNMb2FkZWQiLCJ1c2VMaXZlUHJldmlld0NvbnRleHQiLCJicmVha3BvaW50IiwiZmllbGRzIiwidXNlQWxsRm9ybUZpZWxkcyIsImZpZWxkU2NoZW1hSlNPTiIsInVzZVN0YXRlIiwiY29sbGVjdGlvbiIsImdsb2JhbCIsImZpZWxkU2NoZW1hVG9KU09OIiwidXNlRWZmZWN0Iiwid2luZG93IiwidmFsdWVzIiwicmVkdWNlRmllbGRzVG9WYWx1ZXMiLCJtZXNzYWdlIiwiSlNPTiIsInN0cmluZ2lmeSIsImRhdGEiLCJ0eXBlIiwiY3VycmVudCIsInBvc3RNZXNzYWdlIiwiY29udGVudFdpbmRvdyIsImRpdiIsImNsYXNzTmFtZSIsImZpbHRlciIsIkJvb2xlYW4iLCJqb2luIiwiVG9vbGJhckFyZWEiLCJEZXZpY2VDb250YWluZXIiLCJJRnJhbWUiLCJyZWYiLCJMaXZlUHJldmlld1Rvb2xiYXIiLCJicmVha3BvaW50cyIsIm5hbWUiLCJoZWlnaHQiLCJsYWJlbCIsIndpZHRoIiwiYWRtaW4iLCJsaXZlUHJldmlldyIsImNvbmNhdCIsIkxpdmVQcmV2aWV3UHJvdmlkZXIiXSwibWFwcGluZ3MiOiI7Ozs7K0JBbUhhQTs7O2VBQUFBOzs7K0RBbkg4QjttQ0FPVDt5QkFDRDs2RUFDQTt5QkFDRzswQkFDRTt3QkFDTjt3QkFDVDt5QkFDWTs2QkFDUDtRQUNyQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBRVAsTUFBTUMsWUFBWTtBQUVsQixNQUFNQyxVQUtGLENBQUNDO0lBQ0gsTUFBTSxFQUNKQyxZQUFZLEVBQUVDLFdBQVcsRUFBRUMsY0FBYyxFQUFFQyxRQUFRLEVBQUUsRUFDckRDLEdBQUcsRUFDSixHQUFHTDtJQUVKLE1BQU0sRUFBRU0sZUFBZSxFQUFFQyxTQUFTLEVBQUVDLGtCQUFrQixFQUFFLEdBQUdDLElBQUFBLCtCQUFxQjtJQUVoRixNQUFNLEVBQUVDLFVBQVUsRUFBRSxHQUFHRCxJQUFBQSwrQkFBcUI7SUFFNUMsTUFBTSxDQUFDRSxPQUFPLEdBQUdDLElBQUFBLHlCQUFnQjtJ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

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

@@ -0,0 +1,28 @@
+@import '../../../../scss/styles.scss';
+
+.live-preview-window {
+  width: 60%;
+  flex-shrink: 0;
+  flex-grow: 0;
+  position: sticky;
+  top: var(--doc-controls-height);
+  height: calc(100vh - var(--doc-controls-height));
+  overflow: hidden;
+
+  &--has-breakpoint {
+    padding: 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.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './index.scss';
+export declare const PreviewFrameSizeInput: React.FC<{
+    axis?: 'x' | 'y';
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/admin/components/views/LivePreview/Toolbar/SizeInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/admin/components/views/LivePreview/Toolbar/SizeInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAGrD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAA;CACjB,CAyDA,CAAA"}

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

@@ -0,0 +1,108 @@
+"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("../../Context/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 = 'toolbar-input';
+const PreviewFrameSizeInput = (props)=>{
+    const { axis } = props;
+    const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } = (0, _context.useLivePreviewContext)();
+    const [internalState, setInternalState] = _react.default.useState((axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0);
+    // when the input is changed manually, we need to set the breakpoint as `custom`
+    // this will then allow us to set an explicit width and height
+    const handleChange = (0, _react.useCallback)((e)=>{
+        let newValue = Number(e.target.value);
+        if (newValue < 0) newValue = 0;
+        setInternalState(newValue);
+        setBreakpoint('custom');
+        // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change
+        // this is because the `responsive` size is '100%' in CSS, and `0` in initial state
+        setSize({
+            type: 'reset',
+            value: {
+                height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,
+                width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom
+            }
+        });
+    }, [
+        axis,
+        setBreakpoint,
+        measuredDeviceSize,
+        setSize,
+        zoom
+    ]);
+    // if the breakpoint is `responsive` then the device's div will have `100%` width and height
+    // so we need to take the measurements provided by `actualDeviceSize` and sync internal state
+    (0, _react.useEffect)(()=>{
+        if (breakpoint === 'responsive' && measuredDeviceSize) {
+            if (axis === 'x') setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom);
+            else setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom);
+        }
+        if (breakpoint !== 'responsive' && size) {
+            setInternalState(axis === 'x' ? size.width : size.height);
+        }
+    }, [
+        breakpoint,
+        axis,
+        measuredDeviceSize,
+        size,
+        zoom
+    ]);
+    return /*#__PURE__*/ _react.default.createElement("input", {
+        className: baseClass,
+        min: 0,
+        onChange: handleChange,
+        step: 1,
+        type: "number",
+        value: internalState || 0
+    });
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L1Rvb2xiYXIvU2l6ZUlucHV0L2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCB9IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgeyB1c2VMaXZlUHJldmlld0NvbnRleHQgfSBmcm9tICcuLi8uLi9Db250ZXh0L2NvbnRleHQnXG5pbXBvcnQgJy4vaW5kZXguc2NzcydcblxuY29uc3QgYmFzZUNsYXNzID0gJ3Rvb2xiYXItaW5wdXQnXG5cbmV4cG9ydCBjb25zdCBQcmV2aWV3RnJhbWVTaXplSW5wdXQ6IFJlYWN0LkZDPHtcbiAgYXhpcz86ICd4JyB8ICd5J1xufT4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgeyBheGlzIH0gPSBwcm9wc1xuXG4gIGNvbnN0IHsgYnJlYWtwb2ludCwgbWVhc3VyZWREZXZpY2VTaXplLCBzZXRCcmVha3BvaW50LCBzZXRTaXplLCBzaXplLCB6b29tIH0gPVxuICAgIHVzZUxpdmVQcmV2aWV3Q29udGV4dCgpXG5cbiAgY29uc3QgW2ludGVybmFsU3RhdGUsIHNldEludGVybmFsU3RhdGVdID0gUmVhY3QudXNlU3RhdGU8bnVtYmVyPihcbiAgICAoYXhpcyA9PT0gJ3gnID8gbWVhc3VyZWREZXZpY2VTaXplPy53aWR0aCA6IG1lYXN1cmVkRGV2aWNlU2l6ZT8uaGVpZ2h0KSB8fCAwLFxuICApXG5cbiAgLy8gd2hlbiB0aGUgaW5wdXQgaXMgY2hhbmdlZCBtYW51YWxseSwgd2UgbmVlZCB0byBzZXQgdGhlIGJyZWFrcG9pbnQgYXMgYGN1c3RvbWBcbiAgLy8gdGhpcyB3aWxsIHRoZW4gYWxsb3cgdXMgdG8gc2V0IGFuIGV4cGxpY2l0IHdpZHRoIGFuZCBoZWlnaHRcbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgKGU6IFJlYWN0LkNoYW5nZUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB7XG4gICAgICBsZXQgbmV3VmFsdWUgPSBOdW1iZXIoZS50YXJnZXQudmFsdWUpXG5cbiAgICAgIGlmIChuZXdWYWx1ZSA8IDApIG5ld1ZhbHVlID0gMFxuXG4gICAgICBzZXRJbnRlcm5hbFN0YXRlKG5ld1ZhbHVlKVxuICAgICAgc2V0QnJlYWtwb2ludCgnY3VzdG9tJylcblxuICAgICAgLy8gYmUgc3VyZSB0byBzZXQgX2JvdGhfIGF4aXMgdmFsdWVzIHRvIHNvIHRoYXQgdGhlIG90aGVyIGF4aXMgZG9lc24ndCBmYWxsYmFjayB0byAwIG9uIGluaXRpYWwgY2hhbmdlXG4gICAgICAvLyB0aGlzIGlzIGJlY2F1c2UgdGhlIGByZXNwb25zaXZlYCBzaXplIGlzICcxMDAlJyBpbiBDU1MsIGFuZCBgMGAgaW4gaW5pdGlhbCBzdGF0ZVxuICAgICAgc2V0U2l6ZSh7XG4gICAgICAgIHR5cGU6ICdyZXNldCcsXG4gICAgICAgIHZhbHVlOiB7XG4gICAgICAgICAgaGVpZ2h0OiBheGlzID09PSAneScgPyBuZXdWYWx1ZSA6IE51bWJlcihtZWFzdXJlZERldmljZVNpemU/LmhlaWdodC50b0ZpeGVkKDApKSAqIHpvb20sXG4gICAgICAgICAgd2lkdGg6IGF4aXMgPT09ICd4JyA/IG5ld1ZhbHVlIDogTnVtYmVyKG1lYXN1cmVkRGV2aWNlU2l6ZT8ud2lkdGgudG9GaXhlZCgwKSkgKiB6b29tLFxuICAgICAgICB9LFxuICAgICAgfSlcbiAgICB9LFxuICAgIFtheGlzLCBzZXRCcmVha3BvaW50LCBtZWFzdXJlZERldmljZVNpemUsIHNldFNpemUsIHpvb21dLFxuICApXG5cbiAgLy8gaWYgdGhlIGJyZWFrcG9pbnQgaXMgYHJlc3BvbnNpdmVgIHRoZW4gdGhlIGRldmljZSdzIGRpdiB3aWxsIGhhdmUgYDEwMCVgIHdpZHRoIGFuZCBoZWlnaHRcbiAgLy8gc28gd2UgbmVlZCB0byB0YWtlIHRoZSBtZWFzdXJlbWVudHMgcHJvdmlkZWQgYnkgYGFjdHVhbERldmljZVNpemVgIGFuZCBzeW5jIGludGVybmFsIHN0YXRlXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGJyZWFrcG9pbnQgPT09ICdyZXNwb25zaXZlJyAmJiBtZWFzdXJlZERldmljZVNpemUpIHtcbiAgICAgIGlmIChheGlzID09PSAneCcpIHNldEludGVybmFsU3RhdGUoTnVtYmVyKG1lYXN1cmVkRGV2aWNlU2l6ZS53aWR0aC50b0ZpeGVkKDApKSAqIHpvb20pXG4gICAgICBlbHNlIHNldEludGVybmFsU3RhdGUoTnVtYmVyKG1lYXN1cmVkRGV2aWNlU2l6ZS5oZWlnaHQudG9GaXhlZCgwKSkgKiB6b29tKVxuICAgIH1cblxuICAgIGlmIChicmVha3BvaW50ICE9PSAncmVzcG9uc2l2ZScgJiYgc2l6ZSkge1xuICAgICAgc2V0SW50ZXJuYWxTdGF0ZShheGlzID09PSAneCcgPyBzaXplLndpZHRoIDogc2l6ZS5oZWlnaHQpXG4gICAgfVxuICB9LCBbYnJlYWtwb2ludCwgYXhpcywgbWVhc3VyZWREZXZpY2VTaXplLCBzaXplLCB6b29tXSlcblxuICByZXR1cm4gKFxuICAgIDxpbnB1dFxuICAgICAgY2xhc3NOYW1lPXtiYXNlQ2xhc3N9XG4gICAgICBtaW49ezB9XG4gICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfVxuICAgICAgc3RlcD17MX1cbiAgICAgIHR5cGU9XCJudW1iZXJcIlxuICAgICAgdmFsdWU9e2ludGVybmFsU3RhdGUgfHwgMH1cbiAgICAvPlxuICApXG59XG4iXSwibmFtZXMiOlsiUHJldmlld0ZyYW1lU2l6ZUlucHV0IiwiYmFzZUNsYXNzIiwicHJvcHMiLCJheGlzIiwiYnJlYWtwb2ludCIsIm1lYXN1cmVkRGV2aWNlU2l6ZSIsInNldEJyZWFrcG9pbnQiLCJzZXRTaXplIiwic2l6ZSIsInpvb20iLCJ1c2VMaXZlUHJldmlld0NvbnRleHQiLCJpbnRlcm5hbFN0YXRlIiwic2V0SW50ZXJuYWxTdGF0ZSIsIlJlYWN0IiwidXNlU3RhdGUiLCJ3aWR0aCIsImhlaWdodCIsImhhbmRsZUNoYW5nZSIsInVzZUNhbGxiYWNrIiwiZSIsIm5ld1ZhbHVlIiwiTnVtYmVyIiwidGFyZ2V0IiwidmFsdWUiLCJ0eXBlIiwidG9GaXhlZCIsInVzZUVmZmVjdCIsImlucHV0IiwiY2xhc3NOYW1lIiwibWluIiwib25DaGFuZ2UiLCJzdGVwIl0sIm1hcHBpbmdzIjoiOzs7OytCQU9hQTs7O2VBQUFBOzs7K0RBUGlDO3lCQUVSO1FBQy9COzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBRVAsTUFBTUMsWUFBWTtBQUVYLE1BQU1ELHdCQUVSLENBQUNFO0lBQ0osTUFBTSxFQUFFQyxJQUFJLEVBQUUsR0FBR0Q7SUFFakIsTUFBTSxFQUFFRSxVQUFVLEVBQUVDLGtCQUFrQixFQUFFQyxhQUFhLEVBQUVDLE9BQU8sRUFBRUMsSUFBSSxFQUFFQyxJQUFJLEVBQUUsR0FDMUVDLElBQUFBLDhCQUFxQjtJQUV2QixNQUFNLENBQUNDLGVBQWVDLGlCQUFpQixHQUFHQyxjQUFLLENBQUNDLFFBQVEsQ0FDdEQsQUFBQ1gsQ0FBQUEsU0FBUyxNQUFNRSxvQkFBb0JVLFFBQVFWLG9CQUFvQlcsTUFBSyxLQUFNO0lBRzdFLGdGQUFnRjtJQUNoRiw4REFBOEQ7SUFDOUQsTUFBTUMsZUFBZUMsSUFBQUEsa0JBQVcsRUFDOUIsQ0FBQ0M7UUFDQyxJQUFJQyxXQUFXQyxPQUFPRixFQUFFRyxNQUFNLENBQUNDLEtBQUs7UUFFcEMsSUFBSUgsV0FBVyxHQUFHQSxXQUFXO1FBRTdCUixpQkFBaUJRO1FBQ2pCZCxjQUFjO1FBRWQsc0dBQXNHO1FBQ3RHLG1GQUFtRjtRQUNuRkMsUUFBUTtZQUNOaUIsTUFBTTtZQUNORCxPQUFPO2dCQUNMUCxRQUFRYixTQUFTLE1BQU1pQixXQUFXQyxPQUFPaEIsb0JBQW9CVyxPQUFPUyxRQUFRLE1BQU1oQjtnQkFDbEZNLE9BQU9aLFNBQVMsTUFBTWlCLFdBQVdDLE9BQU9oQixvQkFBb0JVLE1BQU1VLFFBQVEsTUFBTWhCO1lBQ2xGO1FBQ0Y7SUFDRixHQUNBO1FBQUNOO1FBQU1HO1FBQWVEO1FBQW9CRTtRQUFTRTtLQUFLO0lBRzFELDRGQUE0RjtJQUM1Riw2RkFBNkY7SUFDN0ZpQixJQUFBQSxnQkFBUyxFQUFDO1FBQ1IsSUFBSXRCLGVBQWUsZ0JBQWdCQyxvQkFBb0I7WUFDckQsSUFBSUYsU0FBUyxLQUFLUyxpQkFBaUJTLE9BQU9oQixtQkFBbUJVLEtBQUssQ0FBQ1UsT0FBTyxDQUFDLE1BQU1oQjtpQkFDNUVHLGlCQUFpQlMsT0FBT2hCLG1CQUFtQlcsTUFBTSxDQUFDUyxPQUFPLENBQUMsTUFBTWhCO1FBQ3ZFO1FBRUEsSUFBSUwsZUFBZSxnQkFBZ0JJLE1BQU07WUFDdkNJLGlCQUFpQlQsU0FBUyxNQUFNSyxLQUFLTyxLQUFLLEdBQUdQLEtBQUtRLE1BQU07UUFDMUQ7SUFDRixHQUFHO1FBQUNaO1FBQVlEO1FBQU1FO1FBQW9CRztRQUFNQztLQUFLO0lBRXJELHFCQUNFLDZCQUFDa0I7UUFDQ0MsV0FBVzNCO1FBQ1g0QixLQUFLO1FBQ0xDLFVBQVViO1FBQ1ZjLE1BQU07UUFDTlAsTUFBSztRQUNMRCxPQUFPWixpQkFBaUI7O0FBRzlCIn0=

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

@@ -0,0 +1,12 @@
+@import '../../../../../scss/styles.scss';
+
+.toolbar-input {
+  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.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ToolbarProviderProps } from '../Context';
+import './index.scss';
+export declare const LivePreviewToolbar: React.FC<Omit<ToolbarProviderProps, 'children'> & {
+    iframeRef: React.RefObject<HTMLIFrameElement>;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/admin/components/views/LivePreview/Toolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/admin/components/views/LivePreview/Toolbar/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAOtD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CACvC,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,GAAG;IACvC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;CAC9C,CAkFF,CAAA"}

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

@@ -0,0 +1,91 @@
+"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("../Context/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 }, url } = props;
+    const { breakpoint, breakpoints, setBreakpoint, setZoom, toolbarPosition, 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: {
+            left: `${toolbarPosition.x}px`,
+            top: `${toolbarPosition.y}px`,
+            ...transform ? {
+                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)), breakpoint === 'custom' && // Dynamically add this option so that it only appears when the width and height inputs are explicitly changed
+    // TODO: Translate this string
+    /*#__PURE__*/ _react.default.createElement("option", {
+        value: "custom"
+    }, "Custom")), /*#__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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L1Rvb2xiYXIvaW5kZXgudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHVzZURyYWdnYWJsZSB9IGZyb20gJ0BkbmQta2l0L2NvcmUnXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5cbmltcG9ydCB0eXBlIHsgVG9vbGJhclByb3ZpZGVyUHJvcHMgfSBmcm9tICcuLi9Db250ZXh0J1xuXG5pbXBvcnQgeyBYIH0gZnJvbSAnLi4vLi4vLi4nXG5pbXBvcnQgeyBFeHRlcm5hbExpbmtJY29uIH0gZnJvbSAnLi4vLi4vLi4vZ3JhcGhpY3MvRXh0ZXJuYWxMaW5rJ1xuaW1wb3J0IERyYWdIYW5kbGUgZnJvbSAnLi4vLi4vLi4vaWNvbnMvRHJhZydcbmltcG9ydCB7IHVzZUxpdmVQcmV2aWV3Q29udGV4dCB9IGZyb20gJy4uL0NvbnRleHQvY29udGV4dCdcbmltcG9ydCB7IFByZXZpZXdGcmFtZVNpemVJbnB1dCB9IGZyb20gJy4vU2l6ZUlucHV0J1xuaW1wb3J0ICcuL2luZGV4LnNjc3MnXG5cbmNvbnN0IGJhc2VDbGFzcyA9ICdsaXZlLXByZXZpZXctdG9vbGJhcidcblxuZXhwb3J0IGNvbnN0IExpdmVQcmV2aWV3VG9vbGJhcjogUmVhY3QuRkM8XG4gIE9taXQ8VG9vbGJhclByb3ZpZGVyUHJvcHMsICdjaGlsZHJlbic+ICYge1xuICAgIGlmcmFtZVJlZjogUmVhY3QuUmVmT2JqZWN0PEhUTUxJRnJhbWVFbGVtZW50PlxuICB9XG4+ID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IHtcbiAgICBwb3B1cFN0YXRlOiB7IG9wZW5Qb3B1cFdpbmRvdyB9LFxuICAgIHVybCxcbiAgfSA9IHByb3BzXG5cbiAgY29uc3QgeyBicmVha3BvaW50LCBicmVha3BvaW50cywgc2V0QnJlYWtwb2ludCwgc2V0Wm9vbSwgdG9vbGJhclBvc2l0aW9uLCB6b29tIH0gPVxuICAgIHVzZUxpdmVQcmV2aWV3Q29udGV4dCgpXG5cbiAgY29uc3QgeyBhdHRyaWJ1dGVzLCBsaXN0ZW5lcnMsIHNldE5vZGVSZWYsIHRyYW5zZm9ybSB9ID0gdXNlRHJhZ2dhYmxlKHtcbiAgICBpZDogJ2xpdmUtcHJldmlldy10b29sYmFyJyxcbiAgfSlcblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNsYXNzTmFtZT17YmFzZUNsYXNzfVxuICAgICAgc3R5bGU9e3tcbiAgICAgICAgbGVmdDogYCR7dG9vbGJhclBvc2l0aW9uLnh9cHhgLFxuICAgICAgICB0b3A6IGAke3Rvb2xiYXJQb3NpdGlvbi55fXB4YCxcbiAgICAgICAgLi4uKHRyYW5zZm9ybVxuICAgICAgICAgID8ge1xuICAgICAgICAgICAgICB0cmFuc2Zvcm06IHRyYW5zZm9ybVxuICAgICAgICAgICAgICAgID8gYHRyYW5zbGF0ZTNkKCR7dHJhbnNmb3JtPy54IHx8IDB9cHgsICR7dHJhbnNmb3JtPy55IHx8IDB9cHgsIDApYFxuICAgICAgICAgICAgICAgIDogdW5kZWZpbmVkLFxuICAgICAgICAgICAgfVxuICAgICAgICAgIDoge30pLFxuICAgICAgfX1cbiAgICA+XG4gICAgICA8YnV0dG9uXG4gICAgICAgIHsuLi5saXN0ZW5lcnN9XG4gICAgICAgIHsuLi5hdHRyaWJ1dGVzfVxuICAgICAgICBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2RyYWctaGFuZGxlYH1cbiAgICAgICAgcmVmPXtzZXROb2RlUmVmfVxuICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgID5cbiAgICAgICAgPERyYWdIYW5kbGUgLz5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2NvbnRyb2xzYH0+XG4gICAgICAgIHticmVha3BvaW50cz8ubGVuZ3RoID4gMCAmJiAoXG4gICAgICAgICAgPHNlbGVjdFxuICAgICAgICAgICAgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19icmVha3BvaW50YH1cbiAgICAgICAgICAgIG9uQ2hhbmdlPXsoZSkgPT4gc2V0QnJlYWtwb2ludChlLnRhcmdldC52YWx1ZSl9XG4gICAgICAgICAgICB2YWx1ZT17YnJlYWtwb2ludH1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7YnJlYWtwb2ludHMubWFwKChicCkgPT4gKFxuICAgICAgICAgICAgICA8b3B0aW9uIGtleT17YnAubmFtZX0gdmFsdWU9e2JwLm5hbWV9PlxuICAgICAgICAgICAgICAgIHticC5sYWJlbH1cbiAgICAgICAgICAgICAgPC9vcHRpb24+XG4gICAgICAgICAgICApKX1cbiAgICAgICAgICAgIHticmVha3BvaW50ID09PSAnY3VzdG9tJyAmJiAoXG4gICAgICAgICAgICAgIC8vIER5bmFtaWNhbGx5IGFkZCB0aGlzIG9wdGlvbiBzbyB0aGF0IGl0IG9ubHkgYXBwZWFycyB3aGVuIHRoZSB3aWR0aCBhbmQgaGVpZ2h0IGlucHV0cyBhcmUgZXhwbGljaXRseSBjaGFuZ2VkXG4gICAgICAgICAgICAgIC8vIFRPRE86IFRyYW5zbGF0ZSB0aGlzIHN0cmluZ1xuICAgICAgICAgICAgICA8b3B0aW9uIHZhbHVlPVwiY3VzdG9tXCI+Q3VzdG9tPC9vcHRpb24+XG4gICAgICAgICAgICApfVxuICAgICAgICAgIDwvc2VsZWN0PlxuICAgICAgICApfVxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fZGV2aWNlLXNpemVgfT5cbiAgICAgICAgICA8UHJldmlld0ZyYW1lU2l6ZUlucHV0IGF4aXM9XCJ4XCIgLz5cbiAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX3NpemUtZGl2aWRlcmB9PlxuICAgICAgICAgICAgPFggLz5cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgPFByZXZpZXdGcmFtZVNpemVJbnB1dCBheGlzPVwieVwiIC8+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8c2VsZWN0XG4gICAgICAgICAgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X196b29tYH1cbiAgICAgICAgICBvbkNoYW5nZT17KGUpID0+IHNldFpvb20oTnVtYmVyKGUudGFyZ2V0LnZhbHVlKSAvIDEwMCl9XG4gICAgICAgICAgdmFsdWU9e3pvb20gKiAxMDB9XG4gICAgICAgID5cbiAgICAgICAgICA8b3B0aW9uIHZhbHVlPXs1MH0+NTAlPC9vcHRpb24+XG4gICAgICAgICAgPG9wdGlvbiB2YWx1ZT17NzV9Pjc1JTwvb3B0aW9uPlxuICAgICAgICAgIDxvcHRpb24gdmFsdWU9ezEwMH0+MTAwJTwvb3B0aW9uPlxuICAgICAgICAgIDxvcHRpb24gdmFsdWU9ezEyNX0+MTI1JTwvb3B0aW9uPlxuICAgICAgICAgIDxvcHRpb24gdmFsdWU9ezE1MH0+MTUwJTwvb3B0aW9uPlxuICAgICAgICAgIDxvcHRpb24gdmFsdWU9ezIwMH0+MjAwJTwvb3B0aW9uPlxuICAgICAgICA8L3NlbGVjdD5cbiAgICAgICAgPGEgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19leHRlcm5hbGB9IGhyZWY9e3VybH0gb25DbGljaz17b3BlblBvcHVwV2luZG93fSB0eXBlPVwiYnV0dG9uXCI+XG4gICAgICAgICAgPEV4dGVybmFsTGlua0ljb24gLz5cbiAgICAgICAgPC9hPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIClcbn1cbiJdLCJuYW1lcyI6WyJMaXZlUHJldmlld1Rvb2xiYXIiLCJiYXNlQ2xhc3MiLCJwcm9wcyIsInBvcHVwU3RhdGUiLCJvcGVuUG9wdXBXaW5kb3ciLCJ1cmwiLCJicmVha3BvaW50IiwiYnJlYWtwb2ludHMiLCJzZXRCcmVha3BvaW50Iiwic2V0Wm9vbSIsInRvb2xiYXJQb3NpdGlvbiIsInpvb20iLCJ1c2VMaXZlUHJldmlld0NvbnRleHQiLCJhdHRyaWJ1dGVzIiwibGlzdGVuZXJzIiwic2V0Tm9kZVJlZiIsInRyYW5zZm9ybSIsInVzZURyYWdnYWJsZSIsImlkIiwiZGl2IiwiY2xhc3NOYW1lIiwic3R5bGUiLCJsZWZ0IiwieCIsInRvcCIsInkiLCJ1bmRlZmluZWQiLCJidXR0b24iLCJyZWYiLCJ0eXBlIiwiRHJhZ0hhbmRsZSIsImxlbmd0aCIsInNlbGVjdCIsIm9uQ2hhbmdlIiwiZSIsInRhcmdldCIsInZhbHVlIiwibWFwIiwiYnAiLCJvcHRpb24iLCJrZXkiLCJuYW1lIiwibGFiZWwiLCJQcmV2aWV3RnJhbWVTaXplSW5wdXQiLCJheGlzIiwic3BhbiIsIlgiLCJOdW1iZXIiLCJhIiwiaHJlZiIsIm9uQ2xpY2siLCJFeHRlcm5hbExpbmtJY29uIl0sIm1hcHBpbmdzIjoiOzs7OytCQWNhQTs7O2VBQUFBOzs7c0JBZGdCOzhEQUNYO2tCQUlBOzhCQUNlOzZEQUNWO3lCQUNlOzJCQUNBO1FBQy9COzs7Ozs7QUFFUCxNQUFNQyxZQUFZO0FBRVgsTUFBTUQscUJBSVQsQ0FBQ0U7SUFDSCxNQUFNLEVBQ0pDLFlBQVksRUFBRUMsZUFBZSxFQUFFLEVBQy9CQyxHQUFHLEVBQ0osR0FBR0g7SUFFSixNQUFNLEVBQUVJLFVBQVUsRUFBRUMsV0FBVyxFQUFFQyxhQUFhLEVBQUVDLE9BQU8sRUFBRUMsZUFBZSxFQUFFQyxJQUFJLEVBQUUsR0FDOUVDLElBQUFBLDhCQUFxQjtJQUV2QixNQUFNLEVBQUVDLFVBQVUsRUFBRUMsU0FBUyxFQUFFQyxVQUFVLEVBQUVDLFNBQVMsRUFBRSxHQUFHQyxJQUFBQSxrQkFBWSxFQUFDO1FBQ3BFQyxJQUFJO0lBQ047SUFFQSxxQkFDRSw2QkFBQ0M7UUFDQ0MsV0FBV25CO1FBQ1hvQixPQUFPO1lBQ0xDLE1BQU0sQ0FBQyxFQUFFWixnQkFBZ0JhLENBQUMsQ0FBQyxFQUFFLENBQUM7WUFDOUJDLEtBQUssQ0FBQyxFQUFFZCxnQkFBZ0JlLENBQUMsQ0FBQyxFQUFFLENBQUM7WUFDN0IsR0FBSVQsWUFDQTtnQkFDRUEsV0FBV0EsWUFDUCxDQUFDLFlBQVksRUFBRUEsV0FBV08sS0FBSyxFQUFFLElBQUksRUFBRVAsV0FBV1MsS0FBSyxFQUFFLE1BQU0sQ0FBQyxHQUNoRUM7WUFDTixJQUNBLENBQUMsQ0FBQztRQUNSO3FCQUVBLDZCQUFDQztRQUNFLEdBQUdiLFNBQVM7UUFDWixHQUFHRCxVQUFVO1FBQ2RPLFdBQVcsQ0FBQyxFQUFFbkIsVUFBVSxhQUFhLENBQUM7UUFDdEMyQixLQUFLYjtRQUNMYyxNQUFLO3FCQUVMLDZCQUFDQyxhQUFVLHdCQUViLDZCQUFDWDtRQUFJQyxXQUFXLENBQUMsRUFBRW5CLFVBQVUsVUFBVSxDQUFDO09BQ3JDTSxhQUFhd0IsU0FBUyxtQkFDckIsNkJBQUNDO1FBQ0NaLFdBQVcsQ0FBQyxFQUFFbkIsVUFBVSxZQUFZLENBQUM7UUFDckNnQyxVQUFVLENBQUNDLElBQU0xQixjQUFjMEIsRUFBRUMsTUFBTSxDQUFDQyxLQUFLO1FBQzdDQSxPQUFPOUI7T0FFTkMsWUFBWThCLEdBQUcsQ0FBQyxDQUFDQyxtQkFDaEIsNkJBQUNDO1lBQU9DLEtBQUtGLEdBQUdHLElBQUk7WUFBRUwsT0FBT0UsR0FBR0csSUFBSTtXQUNqQ0gsR0FBR0ksS0FBSyxJQUdacEMsZUFBZSxZQUNkLDhHQUE4RztJQUM5Ryw4QkFBOEI7a0JBQzlCLDZCQUFDaUM7UUFBT0gsT0FBTTtPQUFTLDBCQUk3Qiw2QkFBQ2pCO1FBQUlDLFdBQVcsQ0FBQyxFQUFFbkIsVUFBVSxhQUFhLENBQUM7cUJBQ3pDLDZCQUFDMEMsZ0NBQXFCO1FBQUNDLE1BQUs7c0JBQzVCLDZCQUFDQztRQUFLekIsV0FBVyxDQUFDLEVBQUVuQixVQUFVLGNBQWMsQ0FBQztxQkFDM0MsNkJBQUM2QyxHQUFDLHdCQUVKLDZCQUFDSCxnQ0FBcUI7UUFBQ0MsTUFBSzt1QkFFOUIsNkJBQUNaO1FBQ0NaLFdBQVcsQ0FBQyxFQUFFbkIsVUFBVSxNQUFNLENBQUM7UUFDL0JnQyxVQUFVLENBQUNDLElBQU16QixRQUFRc0MsT0FBT2IsRUFBRUMsTUFBTSxDQUFDQyxLQUFLLElBQUk7UUFDbERBLE9BQU96QixPQUFPO3FCQUVkLDZCQUFDNEI7UUFBT0gsT0FBTztPQUFJLHNCQUNuQiw2QkFBQ0c7UUFBT0gsT0FBTztPQUFJLHNCQUNuQiw2QkFBQ0c7UUFBT0gsT0FBTztPQUFLLHVCQUNwQiw2QkFBQ0c7UUFBT0gsT0FBTztPQUFLLHVCQUNwQiw2QkFBQ0c7UUFBT0gsT0FBTztPQUFLLHVCQUNwQiw2QkFBQ0c7UUFBT0gsT0FBTztPQUFLLHdCQUV0Qiw2QkFBQ1k7UUFBRTVCLFdBQVcsQ0FBQyxFQUFFbkIsVUFBVSxVQUFVLENBQUM7UUFBRWdELE1BQU01QztRQUFLNkMsU0FBUzlDO1FBQWlCeUIsTUFBSztxQkFDaEYsNkJBQUNzQiw4QkFBZ0I7QUFLM0IifQ==

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.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './index.scss';
+export declare const ToolbarArea: React.FC<{
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/admin/components/views/LivePreview/ToolbarArea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/admin/components/views/LivePreview/ToolbarArea/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAYA,CAAA"}

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.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { EditViewProps } from '../types';
+import './index.scss';
+export declare const LivePreviewView: React.FC<EditViewProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/admin/components/views/LivePreview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/admin/components/views/LivePreview/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAIvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAY7C,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAyGnD,CAAA"}