@it-consultis/page-builder 1.1.34

package/README.md

@@ -0,0 +1,248 @@
+## Editor Component
+
+### Full Mode (format="full") Property Description
+
+#### Core Properties
+
+| Property | Type | Required | Description |
+|------|------|------|------|
+| data | Block[] | No | Editor data content |
+| blockTypes | BlockType[] | Yes | Available block type definition |
+| onChange | (data: Block[]) => void | No | Data change callback function |
+| title | string | No | Editor Title |
+| cardinality | number | No | Block quantity limit, default is -1 indicating no limit |
+| addBlockDisplayFormat | 'select' \| 'button' | No | Add block button display format, default is 'select' |
+| storage | EditorState['storage'] | No | Editor storage configuration |
+| editorTheme | Theme | No | Editor theme configuration |
+| isFullScreen | boolean | No | Whether in full screen mode |
+| previewSrc | string | No | Preview iframe source address |
+| previewWidth | 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' | No | Preview area width |
+| allowedOrigins | string[] | No | Allow preview iframe source domain name list |
+
+#### Event Callback
+
+| Callback Method | Type | Description |
+|---------|------|------|
+| onFullScreen | () => void | Enter full screen trigger |
+| onFullScreenExit | () => void | Exit full screen trigger |
+| onPreviewIframeLoad | (iframe: HTMLIFrameElement) => void | Preview iframe load complete trigger |
+| onPreviewInstanceLoad | (preview: PreviewInstance) => void | Preview instance load complete trigger |
+| onAction | (action: { type: string; payload: any }) => void | Editor operation event trigger callback |
+
+#### Custom Component
+
+| Property | Type | Description |
+|------|------|------|
+| previewWrapperComponent | React.ElementType | Custom preview area wrapper component |
+
+### Usage Example
+
+#### Basic Preview Mode
+
+```tsx
+<Editor
+  format="full"
+  value={code}
+  language="javascript"
+  previewSrc="https://preview.example.com"
+  previewWidth="md"
+  allowedOrigins={['example.com']}
+/>
+```
+
+#### Full Screen Mode Control
+
+```tsx
+<Editor
+  format="full"
+  isFullScreen={isFullScreen}
+  onFullScreen={() => {
+    console.log('Trigger full screen event');
+    setIsFullScreen(true);
+  }}
+  onFullScreenExit={() => {
+    console.log('Trigger exit full screen event');
+    setIsFullScreen(false);
+  }}
+/>
+```
+
+#### Preview Load Event Handling
+
+```tsx
+<Editor
+  format="full"
+  onPreviewIframeLoad={(iframe) => {
+    console.log('preview iframe loaded', iframe);
+  }}
+  onPreviewInstanceLoad={(preview) => {
+    console.log('preview instance loaded', preview);
+  }}
+/>
+```
+
+#### Custom Preview Wrapper Component
+
+```tsx
+const CustomPreviewWrapper = ({ children }) => (
+  <div className="custom-preview-container">
+    {children}
+  </div>
+);
+
+<Editor
+  format="full"
+  previewWrapperComponent={CustomPreviewWrapper}
+/>
+```
+
+#### Operation Event Listening
+
+```tsx
+<Editor
+  format="full"
+  onAction={({ type, payload }) => {
+    switch (type) {
+      case 'save':
+        console.log('save operation', payload);
+        break;
+      case 'format':
+        console.log('format operation', payload);
+        break;
+    }
+  }}
+/>
+```
+
+### Preview Width Description
+
+Preview area width (previewWidth) correspondence:
+- sm: 375px
+- md: 1024px
+- lg: 1280px
+- xl: 1536px
+- full: 100%
+
+### Security Description
+
+Use the `allowedOrigins` property to restrict the source domain name of the preview iframe, increasing security:
+
+```tsx
+<Editor
+  format="full"
+  previewSrc="https://preview.example.com"
+  allowedOrigins={[
+    'preview.example.com',
+    'test.example.com'
+  ]}
+/>
+```
+
+### Notes
+
+1. When using the full mode, ensure that the `previewSrc` points to a valid preview service
+2. When switching to full screen mode, it is recommended to synchronize the other UI state of the application
+3. After the preview instance is loaded, you can obtain the instance through the `onPreviewInstanceLoad` callback for further interaction
+4. When customizing the preview wrapper component, ensure that the child component is correctly passed
+
+### Editor Formats
+
+Editor supports three display formats:
+
+1. Full Format (format="full")
+```tsx
+<Editor
+  format="full"
+  blockTypes={blockTypes}
+  data={data}
+  onChange={handleChange}
+  title="My Editor"
+/>
+```
+
+2. Sidebar Format (format="sidebar")
+```tsx
+<Editor
+  format="sidebar"
+  blockTypes={blockTypes}
+  data={data}
+  onChange={handleChange}
+  onBack={() => {/*  return event */}}
+/>
+```
+
+3. Inline Format (format="inline")
+```tsx
+<Editor
+  format="inline"
+  blockTypes={blockTypes}
+  data={data}
+  onChange={handleChange}
+/>
+```
+
+### Block Types
+
+blockTypes defines the available block types, example:
+
+```typescript
+const blockTypes: BlockType[] = [
+  {
+    type: 'text',
+    title: 'Text Block',
+  }
+];
+```
+
+### Cardinality
+
+cardinality property is used to limit the number of blocks:
+```
+- -1: No limit (default)
+- 0: No blocks allowed
+- n: Maximum of n blocks allowed
+```
+
+### Full example of Editor Component
+
+```tsx
+<Editor
+  onFullScreen={() => {
+    document.documentElement.requestFullscreen();
+  }}
+  onFullScreenExit={() => {
+    document.exitFullscreen();
+  }}
+  format="full"
+  data={data}
+  allowedOrigins={[env.wordpressUrl, window.location.origin]}
+  blockTypes={blockTypes}
+  previewSrc={`${window.location.origin}/${locale}/editor/wordpress/preview`}
+  onAction={(action) => {
+    const { type, payload } = action;
+    switch (type) {
+      case "editor/jwtToken":
+        configStorage.init({ token: payload });
+        objectStorage.init({ token: payload });
+      case "editor/page/categoryId":
+        // How to mock the payload?
+        // window.postMessage({type:"editor/page/categoryId", payload: "15"})
+        // window.previewPayload = payload;
+        break;
+    }
+  }}
+  storage={{
+    object: objectStorage,
+    config: configStorage,
+  }}
+  onChange={(newData) => {
+    if (isDev && !isInIframe) {
+      window.clearTimeout(timeoutId);
+      setData(newData);
+      timeoutId = window.setTimeout(() => {
+        localStorage.setItem(storageKey, JSON.stringify(newData));
+      }, 300);
+    }
+  }}
+/>
+```

package/assets/svg/mp.d.ts

@@ -0,0 +1,2 @@
+import { SVGAttributes } from 'react';
+export default function MpIcon(props?: SVGAttributes<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/assets/svg/mp.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MpIcon;
+var _react = _interopRequireDefault(require("react"));
+var _store = require("../../store");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function MpIcon(props = {}) {
+  const {
+    theme: {
+      palette: {
+        header: {
+          text = ''
+        } = {}
+      } = {}
+    } = {}
+  } = (0, _store.useEditorStore)(state => state);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line react/react-in-jsx-scope
+    (0, _jsxRuntime.jsx)("svg", {
+      className: "icon",
+      viewBox: "0 0 1024 1024",
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "23",
+      height: "23",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        d: "M512.042667 938.666667c-235.648 0-426.666667-191.018667-426.666667-426.666667s191.018667-426.666667 426.666667-426.666667 426.666667 191.018667 426.666666 426.666667-191.018667 426.666667-426.666666 426.666667z m0-85.333334a341.333333 341.333333 0 1 0 0-682.666666 341.333333 341.333333 0 0 0 0 682.666666z m42.666666-256a149.333333 149.333333 0 1 1-212.352-135.424 42.666667 42.666667 0 1 1 36.053334 77.354667A64 64 0 1 0 469.333333 597.333333v-170.666666a149.333333 149.333333 0 1 1 212.352 135.424 42.666667 42.666667 0 0 1-36.053333-77.354667A64 64 0 1 0 554.709333 426.666667v170.666666z",
+        fill: text || '#ffffff'
+      })
+    })
+  );
+}

package/assets/svg/status-bar.d.ts

@@ -0,0 +1,2 @@
+import { SVGAttributes } from 'react';
+export default function StatusBar(props?: SVGAttributes<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/assets/svg/status-bar.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = StatusBar;
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function StatusBar(props = {}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "68",
+    height: "12",
+    viewBox: "0 0 68 12",
+    fill: "none",
+    ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      opacity: "0.35",
+      d: "M45.667 0.833374H62.333C63.5296 0.833374 64.5 1.80375 64.5 3.00037V9.00037C64.4998 10.1968 63.5295 11.1664 62.333 11.1664H45.667C44.4705 11.1664 43.5002 10.1968 43.5 9.00037V3.00037L43.5107 2.77869C43.6216 1.68603 44.5451 0.833374 45.667 0.833374Z",
+      stroke: "black",
+      fill: props.fill || 'black'
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      opacity: "0.4",
+      d: "M66 4.00006V8.00006C66.8047 7.66128 67.328 6.87319 67.328 6.00006C67.328 5.12693 66.8047 4.33884 66 4.00006Z",
+      fill: props.fill || 'black'
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M45 3.66671C45 2.93033 45.597 2.33337 46.3333 2.33337H61.6667C62.403 2.33337 63 2.93033 63 3.66671V8.33337C63 9.06975 62.403 9.66671 61.6667 9.66671H46.3333C45.597 9.66671 45 9.06975 45 8.33337V3.66671Z",
+      fill: props.fill || 'black'
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M28.1206 8.73108C29.3961 7.65226 31.264 7.65239 32.5396 8.73108C32.6037 8.78911 32.6413 8.87114 32.6431 8.95764C32.6448 9.0441 32.611 9.12754 32.5493 9.18811L30.5523 11.2037C30.4938 11.2629 30.4138 11.2964 30.3306 11.2965C30.2473 11.2965 30.1674 11.2629 30.1089 11.2037L28.1108 9.18811C28.0492 9.12751 28.0153 9.04406 28.0171 8.95764C28.0189 8.87116 28.0564 8.78906 28.1206 8.73108ZM25.4556 6.04163C28.2037 3.48563 32.4594 3.48559 35.2075 6.04163C35.2695 6.10148 35.3052 6.18402 35.3062 6.27014C35.307 6.35629 35.2731 6.43944 35.2124 6.50061L34.0581 7.6676C33.9392 7.78669 33.7466 7.78929 33.6245 7.67346C32.7221 6.85631 31.548 6.40392 30.3306 6.40393C29.1139 6.40444 27.9405 6.85679 27.0386 7.67346C26.9165 7.78935 26.7239 7.78671 26.605 7.6676L25.4507 6.50061C25.39 6.43954 25.3561 6.35627 25.3569 6.27014C25.3579 6.18402 25.3936 6.10146 25.4556 6.04163ZM22.7896 3.35999C27.0045 -0.679441 33.6545 -0.679202 37.8696 3.35999C37.9306 3.41994 37.9657 3.50204 37.9663 3.58753C37.9668 3.67306 37.9328 3.75533 37.8726 3.81604L36.7163 4.98303C36.5972 5.10257 36.4046 5.10378 36.2837 4.98596C34.6778 3.45922 32.5464 2.60819 30.3306 2.60803C28.1145 2.60803 25.9826 3.45912 24.3765 4.98596C24.2556 5.10402 24.0619 5.10294 23.9429 4.98303L22.7866 3.81604C22.7266 3.75531 22.6933 3.67294 22.6939 3.58753C22.6945 3.50204 22.7286 3.4199 22.7896 3.35999Z",
+      fill: props.fill || 'black'
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M2.66699 7.33362C3.21914 7.33378 3.66699 7.78144 3.66699 8.33362V10.3336C3.66682 10.8857 3.21903 11.3335 2.66699 11.3336H1.66699C1.11482 11.3336 0.667168 10.8858 0.666992 10.3336V8.33362C0.666992 7.78133 1.11471 7.33362 1.66699 7.33362H2.66699ZM7.33301 5.33362C7.88529 5.33362 8.33301 5.78133 8.33301 6.33362V10.3336C8.33283 10.8858 7.88518 11.3336 7.33301 11.3336H6.33301C5.78099 11.3334 5.33318 10.8856 5.33301 10.3336V6.33362C5.33301 5.78145 5.78088 5.3338 6.33301 5.33362H7.33301ZM12 2.99963C12.5522 2.99963 12.9998 3.4475 13 3.99963V10.3336C12.9998 10.8858 12.5522 11.3336 12 11.3336H11C10.4478 11.3336 10.0002 10.8857 10 10.3336V3.99963C10.0002 3.44751 10.4478 2.99965 11 2.99963H12ZM16.667 0.666626C17.2191 0.666791 17.667 1.11444 17.667 1.66663V10.3336C17.6668 10.8857 17.219 11.3335 16.667 11.3336H15.667C15.1148 11.3336 14.6672 10.8858 14.667 10.3336V1.66663C14.667 1.11434 15.1147 0.666626 15.667 0.666626H16.667Z",
+      fill: props.fill || 'black'
+    })]
+  });
+}

package/constants/index.d.ts

@@ -0,0 +1,11 @@
+export declare const MP_QUERY_KEY = "mp";
+export declare const MP_QUERY_VALUE = "1";
+export declare const MP_NAV_BAR_TYPE = "mp-nav";
+export declare const PLATINUM_QUERY_KEY = "platinum";
+export declare const PLATINUM_QUERY_VALUE = "1";
+export declare const EDITOR_READY = "editor/editorReady";
+export declare const EDITOR_DATA = "editor/editorData";
+export declare const EDITOR_BLOCK_UPDATE = "editor/blockUpdate";
+export declare const EDITOR_BLOCK_DELETE = "editor/blockDelete";
+export declare const EDITOR_BLOCK_ADD = "editor/blockAdd";
+export declare const isDev: boolean;

package/constants/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isDev = exports.PLATINUM_QUERY_VALUE = exports.PLATINUM_QUERY_KEY = exports.MP_QUERY_VALUE = exports.MP_QUERY_KEY = exports.MP_NAV_BAR_TYPE = exports.EDITOR_READY = exports.EDITOR_DATA = exports.EDITOR_BLOCK_UPDATE = exports.EDITOR_BLOCK_DELETE = exports.EDITOR_BLOCK_ADD = void 0;
+const MP_QUERY_KEY = exports.MP_QUERY_KEY = 'mp';
+const MP_QUERY_VALUE = exports.MP_QUERY_VALUE = '1';
+const MP_NAV_BAR_TYPE = exports.MP_NAV_BAR_TYPE = 'mp-nav';
+const PLATINUM_QUERY_KEY = exports.PLATINUM_QUERY_KEY = 'platinum';
+const PLATINUM_QUERY_VALUE = exports.PLATINUM_QUERY_VALUE = '1';
+const EDITOR_READY = exports.EDITOR_READY = 'editor/editorReady';
+const EDITOR_DATA = exports.EDITOR_DATA = 'editor/editorData';
+const EDITOR_BLOCK_UPDATE = exports.EDITOR_BLOCK_UPDATE = 'editor/blockUpdate';
+const EDITOR_BLOCK_DELETE = exports.EDITOR_BLOCK_DELETE = 'editor/blockDelete';
+const EDITOR_BLOCK_ADD = exports.EDITOR_BLOCK_ADD = 'editor/blockAdd';
+const isDev = exports.isDev = "production" === 'development';

package/contexts/I18nContext.d.ts

@@ -0,0 +1,15 @@
+import { LocaleType, TMessage, TranslationKey } from '../translation';
+import React from 'react';
+interface I18nContextValue {
+    locale: LocaleType;
+    translations: TMessage;
+    t: (key: TranslationKey) => string;
+}
+interface I18nProviderProps {
+    locale: LocaleType;
+    children: React.ReactNode;
+}
+export declare const I18nProvider: React.FC<I18nProviderProps>;
+export declare const useTranslation: () => I18nContextValue;
+export declare const useT: () => (key: TranslationKey) => string;
+export {};

package/contexts/I18nContext.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTranslation = exports.useT = exports.I18nProvider = void 0;
+var _translation = require("../translation");
+var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const I18nContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+const I18nProvider = ({
+  locale,
+  children
+}) => {
+  const value = (0, _react.useMemo)(() => {
+    const translations = (0, _translation.getTranslations)(locale);
+    const t = key => {
+      const keys = key.split('.');
+      const result = keys.reduce((current, k) => {
+        if (current && typeof current === 'object' && k in current) {
+          return current[k];
+        }
+        console.warn(`Translation key not found: ${key} for locale: ${locale}`);
+        return undefined;
+      }, translations);
+      return typeof result === 'string' ? result : key;
+    };
+    return {
+      locale,
+      translations,
+      t
+    };
+  }, [locale]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(I18nContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+exports.I18nProvider = I18nProvider;
+const useTranslation = () => {
+  const context = (0, _react.useContext)(I18nContext);
+  if (context === undefined) {
+    throw new Error('useTranslation must be used within a I18nProvider');
+  }
+  return context;
+};
+exports.useTranslation = useTranslation;
+const useT = () => {
+  const {
+    t
+  } = useTranslation();
+  return t;
+};
+exports.useT = useT;

package/controls/AlignmentControl/AlignmentControl.d.ts

@@ -0,0 +1,5 @@
+export type Alignment = 'left' | 'center' | 'right' | 'none';
+export default function AlignmentControl({ current, onChange }: {
+    current: Alignment;
+    onChange: (newAlignment: Alignment) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/controls/AlignmentControl/AlignmentControl.js

@@ -0,0 +1,58 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AlignmentControl;
+var _FormatAlignCenter = _interopRequireDefault(require("@mui/icons-material/FormatAlignCenter"));
+var _FormatAlignJustify = _interopRequireDefault(require("@mui/icons-material/FormatAlignJustify"));
+var _FormatAlignLeft = _interopRequireDefault(require("@mui/icons-material/FormatAlignLeft"));
+var _FormatAlignRight = _interopRequireDefault(require("@mui/icons-material/FormatAlignRight"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _ButtonGroup = _interopRequireDefault(require("@mui/material/ButtonGroup"));
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const alignIcons = [{
+  align: 'left',
+  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormatAlignLeft.default, {})
+}, {
+  align: 'center',
+  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormatAlignCenter.default, {})
+}, {
+  align: 'right',
+  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormatAlignRight.default, {})
+}, {
+  align: 'none',
+  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormatAlignJustify.default, {})
+}];
+function AlignmentControl({
+  current,
+  onChange
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 10
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      style: {
+        fontWeight: 'bold',
+        textTransform: 'uppercase'
+      },
+      children: "Alignment"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroup.default, {
+      variant: "outlined",
+      children: alignIcons.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        size: "small",
+        variant: current === item.align ? 'contained' : 'outlined',
+        onClick: () => {
+          onChange(item.align);
+        },
+        children: item.icon
+      }, item.align))
+    })]
+  });
+}

package/controls/AlignmentControl/index.d.ts

@@ -0,0 +1,3 @@
+import AlignmentControl from './AlignmentControl';
+export type { Alignment } from './AlignmentControl';
+export default AlignmentControl;

package/controls/AlignmentControl/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _AlignmentControl = _interopRequireDefault(require("./AlignmentControl"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _AlignmentControl.default;

package/controls/DeviceSwitcher/DeviceSwitcher.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type DeviceMode = 'desktop' | 'mobile';
+interface DeviceSwitcherProps {
+    value: DeviceMode;
+    onChange: (device: DeviceMode) => void;
+    title: string;
+    children: (device: DeviceMode) => React.ReactNode;
+}
+export default function DeviceSwitcher({ value, onChange, title, children }: DeviceSwitcherProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/controls/DeviceSwitcher/DeviceSwitcher.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DeviceSwitcher;
+var _Laptop = _interopRequireDefault(require("@mui/icons-material/Laptop"));
+var _PhoneIphone = _interopRequireDefault(require("@mui/icons-material/PhoneIphone"));
+var _react = _interopRequireDefault(require("react"));
+var _store = require("../../store");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function DeviceSwitcher({
+  value,
+  onChange,
+  title,
+  children
+}) {
+  const {
+    setPreviewWidth
+  } = (0, _store.useEditorStore)(state => state);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "flex flex-col gap-4",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "flex justify-between gap-4",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "font-bold",
+        style: {
+          textTransform: 'uppercase'
+        },
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "flex cursor-pointer gap-4",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          "aria-label": "Desktop",
+          type: "button",
+          style: {
+            color: value === 'desktop' ? '#dc2626' : 'inherit'
+          },
+          onClick: () => {
+            onChange('desktop');
+            setPreviewWidth('lg');
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Laptop.default, {
+            fontSize: "small"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          "aria-label": "Mobile",
+          type: "button",
+          style: {
+            color: value === 'mobile' ? '#dc2626' : 'inherit'
+          },
+          onClick: () => {
+            onChange('mobile');
+            setPreviewWidth('sm');
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PhoneIphone.default, {
+            fontSize: "small"
+          })
+        })]
+      })]
+    }), children(value)]
+  });
+}

package/controls/DeviceSwitcher/index.d.ts

@@ -0,0 +1,2 @@
+import DeviceSwitcher from './DeviceSwitcher';
+export default DeviceSwitcher;

package/controls/DeviceSwitcher/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _DeviceSwitcher = _interopRequireDefault(require("./DeviceSwitcher"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _DeviceSwitcher.default;

package/controls/GradientColorPicker/GradientColorPicker.d.ts

@@ -0,0 +1,8 @@
+export type GradientColorPickerProps = {
+    current: string;
+    onChange: (value: string) => void;
+    label?: string;
+    presets: string[];
+};
+declare function GradientColorPicker({ current, onChange, label, presets }: GradientColorPickerProps): import("react/jsx-runtime").JSX.Element;
+export default GradientColorPicker;