@payloadcms/next 3.0.0-alpha.7 → 3.0.0-alpha.70

package/dist/views/List/meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/views/List/meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAA;AACpC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAI9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAI5D,eAAO,MAAM,oBAAoB,SACzB,WAAW,oBAAoB,CAAC,CAAC,CAAC,CAAC,GAAG;IAC1C,gBAAgB,EAAE,yBAAyB,CAAA;CAC5C,KACA,QAAQ,QAAQ,CAiBlB,CAAA"}

package/dist/views/List/meta.js

@@ -0,0 +1,19 @@
+import { getTranslation } from '@payloadcms/translations';
+import { meta } from '../../utilities/meta.js';
+export const generateListMetadata = async (args)=>{
+    const { collectionConfig, config, i18n } = args;
+    let title = '';
+    const description = '';
+    const keywords = '';
+    if (collectionConfig) {
+        title = getTranslation(collectionConfig.labels.plural, i18n);
+    }
+    return meta({
+        config,
+        description,
+        keywords,
+        title
+    });
+};
+
+//# sourceMappingURL=meta.js.map

package/dist/views/List/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/views/List/meta.ts"],"sourcesContent":["import type { Metadata } from 'next'\nimport type { SanitizedCollectionConfig } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\n\nimport type { GenerateViewMetadata } from '../Root/index.js'\n\nimport { meta } from '../../utilities/meta.js'\n\nexport const generateListMetadata = async (\n  args: Parameters<GenerateViewMetadata>[0] & {\n    collectionConfig: SanitizedCollectionConfig\n  },\n): Promise<Metadata> => {\n  const { collectionConfig, config, i18n } = args\n\n  let title: string = ''\n  const description: string = ''\n  const keywords: string = ''\n\n  if (collectionConfig) {\n    title = getTranslation(collectionConfig.labels.plural, i18n)\n  }\n\n  return meta({\n    config,\n    description,\n    keywords,\n    title,\n  })\n}\n"],"names":["getTranslation","meta","generateListMetadata","args","collectionConfig","config","i18n","title","description","keywords","labels","plural"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAGA,SAASA,cAAc,QAAQ,2BAA0B;AAIzD,SAASC,IAAI,QAAQ,0BAAyB;AAE9C,OAAO,MAAMC,uBAAuB,OAClCC;IAIA,MAAM,EAAEC,gBAAgB,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGH;IAE3C,IAAII,QAAgB;IACpB,MAAMC,cAAsB;IAC5B,MAAMC,WAAmB;IAEzB,IAAIL,kBAAkB;QACpBG,QAAQP,eAAeI,iBAAiBM,MAAM,CAACC,MAAM,EAAEL;IACzD;IAEA,OAAOL,KAAK;QACVI;QACAG;QACAC;QACAF;IACF;AACF,EAAC"}

package/dist/views/LivePreview/Context/collisionDetection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collisionDetection.d.ts","sourceRoot":"","sources":["../../../../src/views/LivePreview/Context/collisionDetection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAMvD,eAAO,MAAM,wBAAwB,EAAE,kBA+BtC,CAAA"}

package/dist/views/LivePreview/Context/collisionDetection.js

@@ -0,0 +1,26 @@
+import { rectIntersection } from '@dnd-kit/core';
+// If the toolbar exits the preview area, we need to reset its position
+// This will prevent the toolbar from getting stuck outside the preview area
+export const customCollisionDetection = ({ collisionRect, droppableContainers, ...args })=>{
+    const droppableContainer = droppableContainers.find(({ id })=>id === 'live-preview-area');
+    const rectIntersectionCollisions = rectIntersection({
+        ...args,
+        collisionRect,
+        droppableContainers: [
+            droppableContainer
+        ]
+    });
+    // Collision detection algorithms return an array of collisions
+    if (rectIntersectionCollisions.length === 0) {
+        // The preview area is not intersecting, return early
+        return rectIntersectionCollisions;
+    }
+    // Compute whether the draggable element is completely contained within the preview area
+    const previewAreaRect = droppableContainer?.rect?.current;
+    const isContained = collisionRect.top >= previewAreaRect.top && collisionRect.left >= previewAreaRect.left && collisionRect.bottom <= previewAreaRect.bottom && collisionRect.right <= previewAreaRect.right;
+    if (isContained) {
+        return rectIntersectionCollisions;
+    }
+};
+
+//# sourceMappingURL=collisionDetection.js.map

package/dist/views/LivePreview/Context/collisionDetection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/views/LivePreview/Context/collisionDetection.ts"],"sourcesContent":["import type { CollisionDetection } from '@dnd-kit/core'\n\nimport { rectIntersection } from '@dnd-kit/core'\n\n// If the toolbar exits the preview area, we need to reset its position\n// This will prevent the toolbar from getting stuck outside the preview area\nexport const customCollisionDetection: CollisionDetection = ({\n  collisionRect,\n  droppableContainers,\n  ...args\n}) => {\n  const droppableContainer = droppableContainers.find(({ id }) => id === 'live-preview-area')\n\n  const rectIntersectionCollisions = rectIntersection({\n    ...args,\n    collisionRect,\n    droppableContainers: [droppableContainer],\n  })\n\n  // Collision detection algorithms return an array of collisions\n  if (rectIntersectionCollisions.length === 0) {\n    // The preview area is not intersecting, return early\n    return rectIntersectionCollisions\n  }\n\n  // Compute whether the draggable element is completely contained within the preview area\n  const previewAreaRect = droppableContainer?.rect?.current\n\n  const isContained =\n    collisionRect.top >= previewAreaRect.top &&\n    collisionRect.left >= previewAreaRect.left &&\n    collisionRect.bottom <= previewAreaRect.bottom &&\n    collisionRect.right <= previewAreaRect.right\n\n  if (isContained) {\n    return rectIntersectionCollisions\n  }\n}\n"],"names":["rectIntersection","customCollisionDetection","collisionRect","droppableContainers","args","droppableContainer","find","id","rectIntersectionCollisions","length","previewAreaRect","rect","current","isContained","top","left","bottom","right"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,SAASA,gBAAgB,QAAQ,gBAAe;AAEhD,uEAAuE;AACvE,4EAA4E;AAC5E,OAAO,MAAMC,2BAA+C,CAAC,EAC3DC,aAAa,EACbC,mBAAmB,EACnB,GAAGC,MACJ;IACC,MAAMC,qBAAqBF,oBAAoBG,IAAI,CAAC,CAAC,EAAEC,EAAE,EAAE,GAAKA,OAAO;IAEvE,MAAMC,6BAA6BR,iBAAiB;QAClD,GAAGI,IAAI;QACPF;QACAC,qBAAqB;YAACE;SAAmB;IAC3C;IAEA,+DAA+D;IAC/D,IAAIG,2BAA2BC,MAAM,KAAK,GAAG;QAC3C,qDAAqD;QACrD,OAAOD;IACT;IAEA,wFAAwF;IACxF,MAAME,kBAAkBL,oBAAoBM,MAAMC;IAElD,MAAMC,cACJX,cAAcY,GAAG,IAAIJ,gBAAgBI,GAAG,IACxCZ,cAAca,IAAI,IAAIL,gBAAgBK,IAAI,IAC1Cb,cAAcc,MAAM,IAAIN,gBAAgBM,MAAM,IAC9Cd,cAAce,KAAK,IAAIP,gBAAgBO,KAAK;IAE9C,IAAIJ,aAAa;QACf,OAAOL;IACT;AACF,EAAC"}

package/dist/views/LivePreview/Context/context.d.ts

@@ -0,0 +1,50 @@
+import type { LivePreviewConfig } from 'payload/config';
+import type { fieldSchemaToJSON } from 'payload/utilities';
+import type { Dispatch } from 'react';
+import type { usePopupWindow } from '../usePopupWindow.js';
+import type { SizeReducerAction } from './sizeReducer.js';
+export interface LivePreviewContextType {
+    appIsReady: boolean;
+    breakpoint: LivePreviewConfig['breakpoints'][number]['name'];
+    breakpoints: LivePreviewConfig['breakpoints'];
+    fieldSchemaJSON?: ReturnType<typeof fieldSchemaToJSON>;
+    iframeHasLoaded: boolean;
+    iframeRef: React.RefObject<HTMLIFrameElement>;
+    isPopupOpen: boolean;
+    measuredDeviceSize: {
+        height: number;
+        width: number;
+    };
+    openPopupWindow: ReturnType<typeof usePopupWindow>['openPopupWindow'];
+    popupRef?: React.MutableRefObject<Window | null>;
+    previewWindowType: 'iframe' | 'popup';
+    setAppIsReady: (appIsReady: boolean) => void;
+    setBreakpoint: (breakpoint: LivePreviewConfig['breakpoints'][number]['name']) => void;
+    setHeight: (height: number) => void;
+    setIframeHasLoaded: (loaded: boolean) => void;
+    setMeasuredDeviceSize: (size: {
+        height: number;
+        width: number;
+    }) => void;
+    setPreviewWindowType: (previewWindowType: 'iframe' | 'popup') => void;
+    setSize: Dispatch<SizeReducerAction>;
+    setToolbarPosition: (position: {
+        x: number;
+        y: number;
+    }) => void;
+    setWidth: (width: number) => void;
+    setZoom: (zoom: number) => void;
+    size: {
+        height: number;
+        width: number;
+    };
+    toolbarPosition: {
+        x: number;
+        y: number;
+    };
+    url: string | undefined;
+    zoom: number;
+}
+export declare const LivePreviewContext: import("react").Context<LivePreviewContextType>;
+export declare const useLivePreviewContext: () => LivePreviewContextType;
+//# sourceMappingURL=context.d.ts.map

package/dist/views/LivePreview/Context/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/views/LivePreview/Context/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAIrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAA;IAC5D,WAAW,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;IAC7C,eAAe,CAAC,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAA;IACtD,eAAe,EAAE,OAAO,CAAA;IACxB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;IAC7C,WAAW,EAAE,OAAO,CAAA;IACpB,kBAAkB,EAAE;QAClB,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,iBAAiB,CAAC,CAAA;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;IAChD,iBAAiB,EAAE,QAAQ,GAAG,OAAO,CAAA;IACrC,aAAa,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,aAAa,EAAE,CAAC,UAAU,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IACrF,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,kBAAkB,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IAC7C,qBAAqB,EAAE,CAAC,IAAI,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACxE,oBAAoB,EAAE,CAAC,iBAAiB,EAAE,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAA;IACrE,OAAO,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAA;IACpC,kBAAkB,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAChE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,eAAe,EAAE;QACf,CAAC,EAAE,MAAM,CAAA;QACT,CAAC,EAAE,MAAM,CAAA;KACV,CAAA;IACD,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;IACvB,IAAI,EAAE,MAAM,CAAA;CACb;AAED,eAAO,MAAM,kBAAkB,iDAmC7B,CAAA;AAEF,eAAO,MAAM,qBAAqB,8BAAuC,CAAA"}

package/dist/views/LivePreview/Context/context.js

@@ -0,0 +1,40 @@
+import { createContext, useContext } from 'react';
+export const LivePreviewContext = createContext({
+    appIsReady: false,
+    breakpoint: undefined,
+    breakpoints: undefined,
+    fieldSchemaJSON: undefined,
+    iframeHasLoaded: false,
+    iframeRef: undefined,
+    isPopupOpen: false,
+    measuredDeviceSize: {
+        height: 0,
+        width: 0
+    },
+    openPopupWindow: ()=>{},
+    popupRef: undefined,
+    previewWindowType: 'iframe',
+    setAppIsReady: ()=>{},
+    setBreakpoint: ()=>{},
+    setHeight: ()=>{},
+    setIframeHasLoaded: ()=>{},
+    setMeasuredDeviceSize: ()=>{},
+    setPreviewWindowType: ()=>{},
+    setSize: ()=>{},
+    setToolbarPosition: ()=>{},
+    setWidth: ()=>{},
+    setZoom: ()=>{},
+    size: {
+        height: 0,
+        width: 0
+    },
+    toolbarPosition: {
+        x: 0,
+        y: 0
+    },
+    url: undefined,
+    zoom: 1
+});
+export const useLivePreviewContext = ()=>useContext(LivePreviewContext);
+
+//# sourceMappingURL=context.js.map

package/dist/views/LivePreview/Context/context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/views/LivePreview/Context/context.ts"],"sourcesContent":["import type { LivePreviewConfig } from 'payload/config'\nimport type { fieldSchemaToJSON } from 'payload/utilities'\nimport type { Dispatch } from 'react'\n\nimport { createContext, useContext } from 'react'\n\nimport type { usePopupWindow } from '../usePopupWindow.js'\nimport type { SizeReducerAction } from './sizeReducer.js'\n\nexport interface LivePreviewContextType {\n  appIsReady: boolean\n  breakpoint: LivePreviewConfig['breakpoints'][number]['name']\n  breakpoints: LivePreviewConfig['breakpoints']\n  fieldSchemaJSON?: ReturnType<typeof fieldSchemaToJSON>\n  iframeHasLoaded: boolean\n  iframeRef: React.RefObject<HTMLIFrameElement>\n  isPopupOpen: boolean\n  measuredDeviceSize: {\n    height: number\n    width: number\n  }\n  openPopupWindow: ReturnType<typeof usePopupWindow>['openPopupWindow']\n  popupRef?: React.MutableRefObject<Window | null>\n  previewWindowType: 'iframe' | 'popup'\n  setAppIsReady: (appIsReady: boolean) => void\n  setBreakpoint: (breakpoint: LivePreviewConfig['breakpoints'][number]['name']) => void\n  setHeight: (height: number) => void\n  setIframeHasLoaded: (loaded: boolean) => void\n  setMeasuredDeviceSize: (size: { height: number; width: number }) => void\n  setPreviewWindowType: (previewWindowType: 'iframe' | 'popup') => void\n  setSize: Dispatch<SizeReducerAction>\n  setToolbarPosition: (position: { x: number; y: number }) => void\n  setWidth: (width: number) => void\n  setZoom: (zoom: number) => void\n  size: {\n    height: number\n    width: number\n  }\n  toolbarPosition: {\n    x: number\n    y: number\n  }\n  url: string | undefined\n  zoom: number\n}\n\nexport const LivePreviewContext = createContext<LivePreviewContextType>({\n  appIsReady: false,\n  breakpoint: undefined,\n  breakpoints: undefined,\n  fieldSchemaJSON: undefined,\n  iframeHasLoaded: false,\n  iframeRef: undefined,\n  isPopupOpen: false,\n  measuredDeviceSize: {\n    height: 0,\n    width: 0,\n  },\n  openPopupWindow: () => {},\n  popupRef: undefined,\n  previewWindowType: 'iframe',\n  setAppIsReady: () => {},\n  setBreakpoint: () => {},\n  setHeight: () => {},\n  setIframeHasLoaded: () => {},\n  setMeasuredDeviceSize: () => {},\n  setPreviewWindowType: () => {},\n  setSize: () => {},\n  setToolbarPosition: () => {},\n  setWidth: () => {},\n  setZoom: () => {},\n  size: {\n    height: 0,\n    width: 0,\n  },\n  toolbarPosition: {\n    x: 0,\n    y: 0,\n  },\n  url: undefined,\n  zoom: 1,\n})\n\nexport const useLivePreviewContext = () => useContext(LivePreviewContext)\n"],"names":["createContext","useContext","LivePreviewContext","appIsReady","breakpoint","undefined","breakpoints","fieldSchemaJSON","iframeHasLoaded","iframeRef","isPopupOpen","measuredDeviceSize","height","width","openPopupWindow","popupRef","previewWindowType","setAppIsReady","setBreakpoint","setHeight","setIframeHasLoaded","setMeasuredDeviceSize","setPreviewWindowType","setSize","setToolbarPosition","setWidth","setZoom","size","toolbarPosition","x","y","url","zoom","useLivePreviewContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAIA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAO;AA0CjD,OAAO,MAAMC,qBAAqBF,cAAsC;IACtEG,YAAY;IACZC,YAAYC;IACZC,aAAaD;IACbE,iBAAiBF;IACjBG,iBAAiB;IACjBC,WAAWJ;IACXK,aAAa;IACbC,oBAAoB;QAClBC,QAAQ;QACRC,OAAO;IACT;IACAC,iBAAiB,KAAO;IACxBC,UAAUV;IACVW,mBAAmB;IACnBC,eAAe,KAAO;IACtBC,eAAe,KAAO;IACtBC,WAAW,KAAO;IAClBC,oBAAoB,KAAO;IAC3BC,uBAAuB,KAAO;IAC9BC,sBAAsB,KAAO;IAC7BC,SAAS,KAAO;IAChBC,oBAAoB,KAAO;IAC3BC,UAAU,KAAO;IACjBC,SAAS,KAAO;IAChBC,MAAM;QACJf,QAAQ;QACRC,OAAO;IACT;IACAe,iBAAiB;QACfC,GAAG;QACHC,GAAG;IACL;IACAC,KAAK1B;IACL2B,MAAM;AACR,GAAE;AAEF,OAAO,MAAMC,wBAAwB,IAAMhC,WAAWC,oBAAmB"}

package/dist/views/LivePreview/Context/index.d.ts

@@ -0,0 +1,20 @@
+import type { LivePreviewConfig } from 'payload/config';
+import type { ClientFieldConfig } from 'payload/types';
+import React from 'react';
+import type { usePopupWindow } from '../usePopupWindow.js';
+export type LivePreviewProviderProps = {
+    appIsReady?: boolean;
+    breakpoints?: LivePreviewConfig['breakpoints'];
+    children: React.ReactNode;
+    deviceSize?: {
+        height: number;
+        width: number;
+    };
+    fieldSchema: ClientFieldConfig[];
+    isPopupOpen?: boolean;
+    openPopupWindow?: ReturnType<typeof usePopupWindow>['openPopupWindow'];
+    popupRef?: React.MutableRefObject<Window>;
+    url?: string;
+};
+export declare const LivePreviewProvider: React.FC<LivePreviewProviderProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/views/LivePreview/Context/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/LivePreview/Context/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,KAAK,EAAE,iBAAiB,EAAS,MAAM,eAAe,CAAA;AAI7D,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAM1D,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,CAAC,EAAE;QACX,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,WAAW,EAAE,iBAAiB,EAAE,CAAA;IAChC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,eAAe,CAAC,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,iBAAiB,CAAC,CAAA;IACtE,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACzC,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA0KlE,CAAA"}

package/dist/views/LivePreview/Context/index.js

@@ -0,0 +1,153 @@
+'use client';
+import { DndContext } from '@dnd-kit/core';
+import { fieldSchemaToJSON } from 'payload/utilities';
+import React, { useCallback, useEffect, useState } from 'react';
+import { customCollisionDetection } from './collisionDetection.js';
+import { LivePreviewContext } from './context.js';
+import { sizeReducer } from './sizeReducer.js';
+export const LivePreviewProvider = ({ breakpoints, children, fieldSchema, isPopupOpen, openPopupWindow, popupRef, url })=>{
+    const [previewWindowType, setPreviewWindowType] = useState('iframe');
+    const [appIsReady, setAppIsReady] = useState(false);
+    const [listeningForMessages, setListeningForMessages] = useState(false);
+    const iframeRef = React.useRef(null);
+    const [iframeHasLoaded, setIframeHasLoaded] = useState(false);
+    const [zoom, setZoom] = useState(1);
+    const [position, setPosition] = useState({
+        x: 0,
+        y: 0
+    });
+    const [size, setSize] = React.useReducer(sizeReducer, {
+        height: 0,
+        width: 0
+    });
+    const [measuredDeviceSize, setMeasuredDeviceSize] = useState({
+        height: 0,
+        width: 0
+    });
+    const [breakpoint, setBreakpoint] = React.useState('responsive');
+    const [fieldSchemaJSON] = useState(()=>{
+        return fieldSchemaToJSON(fieldSchema);
+    });
+    // The toolbar needs to freely drag and drop around the page
+    const handleDragEnd = (ev)=>{
+        // only update position if the toolbar is completely within the preview area
+        // otherwise reset it back to the previous position
+        // TODO: reset to the nearest edge of the preview area
+        if (ev.over && ev.over.id === 'live-preview-area') {
+            const newPos = {
+                x: position.x + ev.delta.x,
+                y: position.y + ev.delta.y
+            };
+            setPosition(newPos);
+        } else {
+        // reset
+        }
+    };
+    const setWidth = useCallback((width)=>{
+        setSize({
+            type: 'width',
+            value: width
+        });
+    }, [
+        setSize
+    ]);
+    const setHeight = useCallback((height)=>{
+        setSize({
+            type: 'height',
+            value: height
+        });
+    }, [
+        setSize
+    ]);
+    // explicitly set new width and height when as new breakpoints are selected
+    // exclude `custom` breakpoint as it is handled by the `setWidth` and `setHeight` directly
+    useEffect(()=>{
+        const foundBreakpoint = breakpoints?.find((bp)=>bp.name === breakpoint);
+        if (foundBreakpoint && breakpoint !== 'responsive' && breakpoint !== 'custom' && typeof foundBreakpoint?.width === 'number' && typeof foundBreakpoint?.height === 'number') {
+            setSize({
+                type: 'reset',
+                value: {
+                    height: foundBreakpoint.height,
+                    width: foundBreakpoint.width
+                }
+            });
+        }
+    }, [
+        breakpoint,
+        breakpoints
+    ]);
+    // Receive the `ready` message from the popup window
+    // This indicates that the app is ready to receive `window.postMessage` events
+    // This is also the only cross-origin way of detecting when a popup window has loaded
+    // Unlike iframe elements which have an `onLoad` handler, there is no way to access `window.open` on popups
+    useEffect(()=>{
+        const handleMessage = (event)=>{
+            if (url?.startsWith(event.origin) && event.data && typeof event.data === 'object' && event.data.type === 'payload-live-preview') {
+                if (event.data.ready) {
+                    setAppIsReady(true);
+                }
+            }
+        };
+        window.addEventListener('message', handleMessage);
+        setListeningForMessages(true);
+        return ()=>{
+            window.removeEventListener('message', handleMessage);
+        };
+    }, [
+        url,
+        listeningForMessages
+    ]);
+    const handleWindowChange = useCallback((type)=>{
+        setAppIsReady(false);
+        setPreviewWindowType(type);
+        if (type === 'popup') openPopupWindow();
+    }, [
+        openPopupWindow
+    ]);
+    // when the user closes the popup window, switch back to the iframe
+    // the `usePopupWindow` reports the `isPopupOpen` state for us to use here
+    useEffect(()=>{
+        const newPreviewWindowType = isPopupOpen ? 'popup' : 'iframe';
+        if (newPreviewWindowType !== previewWindowType) {
+            handleWindowChange('iframe');
+        }
+    }, [
+        previewWindowType,
+        isPopupOpen,
+        handleWindowChange
+    ]);
+    return /*#__PURE__*/ React.createElement(LivePreviewContext.Provider, {
+        value: {
+            appIsReady,
+            breakpoint,
+            breakpoints,
+            fieldSchemaJSON,
+            iframeHasLoaded,
+            iframeRef,
+            isPopupOpen,
+            measuredDeviceSize,
+            openPopupWindow,
+            popupRef,
+            previewWindowType,
+            setAppIsReady,
+            setBreakpoint,
+            setHeight,
+            setIframeHasLoaded,
+            setMeasuredDeviceSize,
+            setPreviewWindowType: handleWindowChange,
+            setSize,
+            setToolbarPosition: setPosition,
+            setWidth,
+            setZoom,
+            size,
+            toolbarPosition: position,
+            url,
+            zoom
+        }
+    }, /*#__PURE__*/ React.createElement(DndContext, {
+        collisionDetection: customCollisionDetection,
+        onDragEnd: handleDragEnd
+    }, listeningForMessages && children));
+};
+
+//# sourceMappingURL=index.js.map

package/dist/views/LivePreview/Context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/views/LivePreview/Context/index.tsx"],"sourcesContent":["'use client'\nimport type { LivePreviewConfig } from 'payload/config'\nimport type { ClientFieldConfig, Field } from 'payload/types'\n\nimport { DndContext } from '@dnd-kit/core'\nimport { fieldSchemaToJSON } from 'payload/utilities'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { usePopupWindow } from '../usePopupWindow.js'\n\nimport { customCollisionDetection } from './collisionDetection.js'\nimport { LivePreviewContext } from './context.js'\nimport { sizeReducer } from './sizeReducer.js'\n\nexport type LivePreviewProviderProps = {\n  appIsReady?: boolean\n  breakpoints?: LivePreviewConfig['breakpoints']\n  children: React.ReactNode\n  deviceSize?: {\n    height: number\n    width: number\n  }\n  fieldSchema: ClientFieldConfig[]\n  isPopupOpen?: boolean\n  openPopupWindow?: ReturnType<typeof usePopupWindow>['openPopupWindow']\n  popupRef?: React.MutableRefObject<Window>\n  url?: string\n}\n\nexport const LivePreviewProvider: React.FC<LivePreviewProviderProps> = ({\n  breakpoints,\n  children,\n  fieldSchema,\n  isPopupOpen,\n  openPopupWindow,\n  popupRef,\n  url,\n}) => {\n  const [previewWindowType, setPreviewWindowType] = useState<'iframe' | 'popup'>('iframe')\n\n  const [appIsReady, setAppIsReady] = useState(false)\n  const [listeningForMessages, setListeningForMessages] = useState(false)\n\n  const iframeRef = React.useRef<HTMLIFrameElement>(null)\n\n  const [iframeHasLoaded, setIframeHasLoaded] = useState(false)\n\n  const [zoom, setZoom] = useState(1)\n\n  const [position, setPosition] = useState({ x: 0, y: 0 })\n\n  const [size, setSize] = React.useReducer(sizeReducer, { height: 0, width: 0 })\n\n  const [measuredDeviceSize, setMeasuredDeviceSize] = useState({\n    height: 0,\n    width: 0,\n  })\n\n  const [breakpoint, setBreakpoint] =\n    React.useState<LivePreviewConfig['breakpoints'][0]['name']>('responsive')\n\n  const [fieldSchemaJSON] = useState(() => {\n    return fieldSchemaToJSON(fieldSchema)\n  })\n\n  // The toolbar needs to freely drag and drop around the page\n  const handleDragEnd = (ev) => {\n    // only update position if the toolbar is completely within the preview area\n    // otherwise reset it back to the previous position\n    // TODO: reset to the nearest edge of the preview area\n    if (ev.over && ev.over.id === 'live-preview-area') {\n      const newPos = {\n        x: position.x + ev.delta.x,\n        y: position.y + ev.delta.y,\n      }\n\n      setPosition(newPos)\n    } else {\n      // reset\n    }\n  }\n\n  const setWidth = useCallback(\n    (width) => {\n      setSize({ type: 'width', value: width })\n    },\n    [setSize],\n  )\n\n  const setHeight = useCallback(\n    (height) => {\n      setSize({ type: 'height', value: height })\n    },\n    [setSize],\n  )\n\n  // explicitly set new width and height when as new breakpoints are selected\n  // exclude `custom` breakpoint as it is handled by the `setWidth` and `setHeight` directly\n  useEffect(() => {\n    const foundBreakpoint = breakpoints?.find((bp) => bp.name === breakpoint)\n\n    if (\n      foundBreakpoint &&\n      breakpoint !== 'responsive' &&\n      breakpoint !== 'custom' &&\n      typeof foundBreakpoint?.width === 'number' &&\n      typeof foundBreakpoint?.height === 'number'\n    ) {\n      setSize({\n        type: 'reset',\n        value: {\n          height: foundBreakpoint.height,\n          width: foundBreakpoint.width,\n        },\n      })\n    }\n  }, [breakpoint, breakpoints])\n\n  // Receive the `ready` message from the popup window\n  // This indicates that the app is ready to receive `window.postMessage` events\n  // This is also the only cross-origin way of detecting when a popup window has loaded\n  // Unlike iframe elements which have an `onLoad` handler, there is no way to access `window.open` on popups\n  useEffect(() => {\n    const handleMessage = (event: MessageEvent) => {\n      if (\n        url?.startsWith(event.origin) &&\n        event.data &&\n        typeof event.data === 'object' &&\n        event.data.type === 'payload-live-preview'\n      ) {\n        if (event.data.ready) {\n          setAppIsReady(true)\n        }\n      }\n    }\n\n    window.addEventListener('message', handleMessage)\n\n    setListeningForMessages(true)\n\n    return () => {\n      window.removeEventListener('message', handleMessage)\n    }\n  }, [url, listeningForMessages])\n\n  const handleWindowChange = useCallback(\n    (type: 'iframe' | 'popup') => {\n      setAppIsReady(false)\n      setPreviewWindowType(type)\n      if (type === 'popup') openPopupWindow()\n    },\n    [openPopupWindow],\n  )\n\n  // when the user closes the popup window, switch back to the iframe\n  // the `usePopupWindow` reports the `isPopupOpen` state for us to use here\n  useEffect(() => {\n    const newPreviewWindowType = isPopupOpen ? 'popup' : 'iframe'\n\n    if (newPreviewWindowType !== previewWindowType) {\n      handleWindowChange('iframe')\n    }\n  }, [previewWindowType, isPopupOpen, handleWindowChange])\n\n  return (\n    <LivePreviewContext.Provider\n      value={{\n        appIsReady,\n        breakpoint,\n        breakpoints,\n        fieldSchemaJSON,\n        iframeHasLoaded,\n        iframeRef,\n        isPopupOpen,\n        measuredDeviceSize,\n        openPopupWindow,\n        popupRef,\n        previewWindowType,\n        setAppIsReady,\n        setBreakpoint,\n        setHeight,\n        setIframeHasLoaded,\n        setMeasuredDeviceSize,\n        setPreviewWindowType: handleWindowChange,\n        setSize,\n        setToolbarPosition: setPosition,\n        setWidth,\n        setZoom,\n        size,\n        toolbarPosition: position,\n        url,\n        zoom,\n      }}\n    >\n      <DndContext collisionDetection={customCollisionDetection} onDragEnd={handleDragEnd}>\n        {listeningForMessages && children}\n      </DndContext>\n    </LivePreviewContext.Provider>\n  )\n}\n"],"names":["DndContext","fieldSchemaToJSON","React","useCallback","useEffect","useState","customCollisionDetection","LivePreviewContext","sizeReducer","LivePreviewProvider","breakpoints","children","fieldSchema","isPopupOpen","openPopupWindow","popupRef","url","previewWindowType","setPreviewWindowType","appIsReady","setAppIsReady","listeningForMessages","setListeningForMessages","iframeRef","useRef","iframeHasLoaded","setIframeHasLoaded","zoom","setZoom","position","setPosition","x","y","size","setSize","useReducer","height","width","measuredDeviceSize","setMeasuredDeviceSize","breakpoint","setBreakpoint","fieldSchemaJSON","handleDragEnd","ev","over","id","newPos","delta","setWidth","type","value","setHeight","foundBreakpoint","find","bp","name","handleMessage","event","startsWith","origin","data","ready","window","addEventListener","removeEventListener","handleWindowChange","newPreviewWindowType","Provider","setToolbarPosition","toolbarPosition","collisionDetection","onDragEnd"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/views/LivePreview/Context/sizeReducer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizeReducer.d.ts","sourceRoot":"","sources":["../../../../src/views/LivePreview/Context/sizeReducer.ts"],"names":[],"mappings":"AAWA,KAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,iBAAiB,GACzB;IACE,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAA;IACxB,KAAK,EAAE,MAAM,CAAA;CACd,GACD;IACE,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE;QACL,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;CACF,CAAA;AAEL,eAAO,MAAM,WAAW,UAAW,gBAAgB,UAAU,iBAAiB;;YAjBpE,MAAM;CA0Bf,CAAA"}

package/dist/views/LivePreview/Context/sizeReducer.js

@@ -0,0 +1,31 @@
+// export const sizeReducer: (state, action) => {
+//   switch (action.type) {
+//     case 'width':
+//       return { ...state, width: action.value }
+//     case 'height':
+//       return { ...state, height: action.value }
+//     default:
+//       return { ...state, ...(action?.value || {}) }
+//   }
+// },
+export const sizeReducer = (state, action)=>{
+    switch(action.type){
+        case 'width':
+            return {
+                ...state,
+                width: action.value
+            };
+        case 'height':
+            return {
+                ...state,
+                height: action.value
+            };
+        default:
+            return {
+                ...state,
+                ...action?.value || {}
+            };
+    }
+};
+
+//# sourceMappingURL=sizeReducer.js.map

package/dist/views/LivePreview/Context/sizeReducer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/views/LivePreview/Context/sizeReducer.ts"],"sourcesContent":["// export const sizeReducer: (state, action) => {\n//   switch (action.type) {\n//     case 'width':\n//       return { ...state, width: action.value }\n//     case 'height':\n//       return { ...state, height: action.value }\n//     default:\n//       return { ...state, ...(action?.value || {}) }\n//   }\n// },\n\ntype SizeReducerState = {\n  height: number\n  width: number\n}\n\nexport type SizeReducerAction =\n  | {\n      type: 'height' | 'width'\n      value: number\n    }\n  | {\n      type: 'reset'\n      value: {\n        height: number\n        width: number\n      }\n    }\n\nexport const sizeReducer = (state: SizeReducerState, action: SizeReducerAction) => {\n  switch (action.type) {\n    case 'width':\n      return { ...state, width: action.value }\n    case 'height':\n      return { ...state, height: action.value }\n    default:\n      return { ...state, ...(action?.value || {}) }\n  }\n}\n"],"names":["sizeReducer","state","action","type","width","value","height"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,iDAAiD;AACjD,2BAA2B;AAC3B,oBAAoB;AACpB,iDAAiD;AACjD,qBAAqB;AACrB,kDAAkD;AAClD,eAAe;AACf,sDAAsD;AACtD,MAAM;AACN,KAAK;AAoBL,OAAO,MAAMA,cAAc,CAACC,OAAyBC;IACnD,OAAQA,OAAOC,IAAI;QACjB,KAAK;YACH,OAAO;gBAAE,GAAGF,KAAK;gBAAEG,OAAOF,OAAOG,KAAK;YAAC;QACzC,KAAK;YACH,OAAO;gBAAE,GAAGJ,KAAK;gBAAEK,QAAQJ,OAAOG,KAAK;YAAC;QAC1C;YACE,OAAO;gBAAE,GAAGJ,KAAK;gBAAE,GAAIC,QAAQG,SAAS,CAAC,CAAC;YAAE;IAChD;AACF,EAAC"}

package/dist/views/LivePreview/Device/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/LivePreview/Device/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAIxC,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CA2DA,CAAA"}

package/dist/views/LivePreview/Device/index.js

@@ -0,0 +1,51 @@
+'use client';
+import { useResize } from '@payloadcms/ui/hooks/useResize';
+import React, { useEffect } from 'react';
+import { useLivePreviewContext } from '../Context/context.js';
+export const DeviceContainer = (props)=>{
+    const { children } = props;
+    const deviceFrameRef = React.useRef(null);
+    const { breakpoint, setMeasuredDeviceSize, size, zoom } = useLivePreviewContext();
+    // Keep an accurate measurement of the actual device size as it is truly rendered
+    // This is helpful when `sizes` are non-number units like percentages, etc.
+    const { size: measuredDeviceSize } = useResize(deviceFrameRef);
+    // Sync the measured device size with the context so that other components can use it
+    // This happens from the bottom up so that as this component mounts and unmounts,
+    // Its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe
+    useEffect(()=>{
+        if (measuredDeviceSize) {
+            setMeasuredDeviceSize(measuredDeviceSize);
+        }
+    }, [
+        measuredDeviceSize,
+        setMeasuredDeviceSize
+    ]);
+    let x = '0';
+    let margin = '0';
+    if (breakpoint && breakpoint !== 'responsive') {
+        x = '-50%';
+        if (typeof zoom === 'number' && typeof size.width === 'number' && typeof size.height === 'number') {
+            const scaledWidth = size.width / zoom;
+            const difference = scaledWidth - size.width;
+            x = `${difference / 2}px`;
+            margin = '0 auto';
+        }
+    }
+    let width = zoom ? `${100 / zoom}%` : '100%';
+    let height = zoom ? `${100 / zoom}%` : '100%';
+    if (breakpoint !== 'responsive') {
+        width = `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`;
+        height = `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`;
+    }
+    return /*#__PURE__*/ React.createElement("div", {
+        ref: deviceFrameRef,
+        style: {
+            height,
+            margin,
+            transform: `translate3d(${x}, 0, 0)`,
+            width
+        }
+    }, children);
+};
+
+//# sourceMappingURL=index.js.map

package/dist/views/LivePreview/Device/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/views/LivePreview/Device/index.tsx"],"sourcesContent":["'use client'\nimport { useResize } from '@payloadcms/ui/hooks/useResize'\nimport React, { useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const deviceFrameRef = React.useRef<HTMLDivElement>(null)\n\n  const { breakpoint, setMeasuredDeviceSize, size, zoom } = useLivePreviewContext()\n\n  // Keep an accurate measurement of the actual device size as it is truly rendered\n  // This is helpful when `sizes` are non-number units like percentages, etc.\n  const { size: measuredDeviceSize } = useResize(deviceFrameRef)\n\n  // Sync the measured device size with the context so that other components can use it\n  // This happens from the bottom up so that as this component mounts and unmounts,\n  // Its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe\n  useEffect(() => {\n    if (measuredDeviceSize) {\n      setMeasuredDeviceSize(measuredDeviceSize)\n    }\n  }, [measuredDeviceSize, setMeasuredDeviceSize])\n\n  let x = '0'\n  let margin = '0'\n\n  if (breakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      typeof zoom === 'number' &&\n      typeof size.width === 'number' &&\n      typeof size.height === 'number'\n    ) {\n      const scaledWidth = size.width / zoom\n      const difference = scaledWidth - size.width\n      x = `${difference / 2}px`\n      margin = '0 auto'\n    }\n  }\n\n  let width = zoom ? `${100 / zoom}%` : '100%'\n  let height = zoom ? `${100 / zoom}%` : '100%'\n\n  if (breakpoint !== 'responsive') {\n    width = `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n    height = `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n  }\n\n  return (\n    <div\n      ref={deviceFrameRef}\n      style={{\n        height,\n        margin,\n        transform: `translate3d(${x}, 0, 0)`,\n        width,\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["useResize","React","useEffect","useLivePreviewContext","DeviceContainer","props","children","deviceFrameRef","useRef","breakpoint","setMeasuredDeviceSize","size","zoom","measuredDeviceSize","x","margin","width","height","scaledWidth","difference","div","ref","style","transform"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,iCAAgC;AAC1D,OAAOC,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,qBAAqB,QAAQ,wBAAuB;AAE7D,OAAO,MAAMC,kBAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAME,iBAAiBN,MAAMO,MAAM,CAAiB;IAEpD,MAAM,EAAEC,UAAU,EAAEC,qBAAqB,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGT;IAE1D,iFAAiF;IACjF,2EAA2E;IAC3E,MAAM,EAAEQ,MAAME,kBAAkB,EAAE,GAAGb,UAAUO;IAE/C,qFAAqF;IACrF,iFAAiF;IACjF,8FAA8F;IAC9FL,UAAU;QACR,IAAIW,oBAAoB;YACtBH,sBAAsBG;QACxB;IACF,GAAG;QAACA;QAAoBH;KAAsB;IAE9C,IAAII,IAAI;IACR,IAAIC,SAAS;IAEb,IAAIN,cAAcA,eAAe,cAAc;QAC7CK,IAAI;QAEJ,IACE,OAAOF,SAAS,YAChB,OAAOD,KAAKK,KAAK,KAAK,YACtB,OAAOL,KAAKM,MAAM,KAAK,UACvB;YACA,MAAMC,cAAcP,KAAKK,KAAK,GAAGJ;YACjC,MAAMO,aAAaD,cAAcP,KAAKK,KAAK;YAC3CF,IAAI,CAAC,EAAEK,aAAa,EAAE,EAAE,CAAC;YACzBJ,SAAS;QACX;IACF;IAEA,IAAIC,QAAQJ,OAAO,CAAC,EAAE,MAAMA,KAAK,CAAC,CAAC,GAAG;IACtC,IAAIK,SAASL,OAAO,CAAC,EAAE,MAAMA,KAAK,CAAC,CAAC,GAAG;IAEvC,IAAIH,eAAe,cAAc;QAC/BO,QAAQ,CAAC,EAAEL,MAAMK,QAAS,CAAA,OAAOJ,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC;QAClEK,SAAS,CAAC,EAAEN,MAAMM,SAAU,CAAA,OAAOL,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC;IACtE;IAEA,qBACE,oBAACQ;QACCC,KAAKd;QACLe,OAAO;YACLL;YACAF;YACAQ,WAAW,CAAC,YAAY,EAAET,EAAE,OAAO,CAAC;YACpCE;QACF;OAECV;AAGP,EAAC"}

package/dist/views/LivePreview/DeviceContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/LivePreview/DeviceContainer/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CA+CA,CAAA"}

package/dist/views/LivePreview/DeviceContainer/index.js

@@ -0,0 +1,29 @@
+'use client';
+import React from 'react';
+import { useLivePreviewContext } from '../Context/context.js';
+export const DeviceContainer = (props)=>{
+    const { children } = props;
+    const { breakpoint, breakpoints, size, zoom } = useLivePreviewContext();
+    const foundBreakpoint = breakpoint && breakpoints?.find((bp)=>bp.name === breakpoint);
+    let x = '0';
+    let margin = '0';
+    if (foundBreakpoint && breakpoint !== 'responsive') {
+        x = '-50%';
+        if (typeof zoom === 'number' && typeof size.width === 'number' && typeof size.height === 'number') {
+            const scaledWidth = size.width / zoom;
+            const difference = scaledWidth - size.width;
+            x = `${difference / 2}px`;
+            margin = '0 auto';
+        }
+    }
+    return /*#__PURE__*/ React.createElement("div", {
+        style: {
+            height: foundBreakpoint && foundBreakpoint?.name !== 'responsive' ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px` : typeof zoom === 'number' ? `${100 / zoom}%` : '100%',
+            margin,
+            transform: `translate3d(${x}, 0, 0)`,
+            width: foundBreakpoint && foundBreakpoint?.name !== 'responsive' ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px` : typeof zoom === 'number' ? `${100 / zoom}%` : '100%'
+        }
+    }, children);
+};
+
+//# sourceMappingURL=index.js.map

package/dist/views/LivePreview/DeviceContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/views/LivePreview/DeviceContainer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { breakpoint, breakpoints, size, zoom } = useLivePreviewContext()\n\n  const foundBreakpoint = breakpoint && breakpoints?.find((bp) => bp.name === breakpoint)\n\n  let x = '0'\n  let margin = '0'\n\n  if (foundBreakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      typeof zoom === 'number' &&\n      typeof size.width === 'number' &&\n      typeof size.height === 'number'\n    ) {\n      const scaledWidth = size.width / zoom\n      const difference = scaledWidth - size.width\n      x = `${difference / 2}px`\n      margin = '0 auto'\n    }\n  }\n\n  return (\n    <div\n      style={{\n        height:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n        margin,\n        transform: `translate3d(${x}, 0, 0)`,\n        width:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["React","useLivePreviewContext","DeviceContainer","props","children","breakpoint","breakpoints","size","zoom","foundBreakpoint","find","bp","name","x","margin","width","height","scaledWidth","difference","div","style","transform"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,qBAAqB,QAAQ,wBAAuB;AAE7D,OAAO,MAAMC,kBAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,EAAEE,UAAU,EAAEC,WAAW,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGP;IAEhD,MAAMQ,kBAAkBJ,cAAcC,aAAaI,KAAK,CAACC,KAAOA,GAAGC,IAAI,KAAKP;IAE5E,IAAIQ,IAAI;IACR,IAAIC,SAAS;IAEb,IAAIL,mBAAmBJ,eAAe,cAAc;QAClDQ,IAAI;QAEJ,IACE,OAAOL,SAAS,YAChB,OAAOD,KAAKQ,KAAK,KAAK,YACtB,OAAOR,KAAKS,MAAM,KAAK,UACvB;YACA,MAAMC,cAAcV,KAAKQ,KAAK,GAAGP;YACjC,MAAMU,aAAaD,cAAcV,KAAKQ,KAAK;YAC3CF,IAAI,CAAC,EAAEK,aAAa,EAAE,EAAE,CAAC;YACzBJ,SAAS;QACX;IACF;IAEA,qBACE,oBAACK;QACCC,OAAO;YACLJ,QACEP,mBAAmBA,iBAAiBG,SAAS,eACzC,CAAC,EAAEL,MAAMS,SAAU,CAAA,OAAOR,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC,GAC3D,OAAOA,SAAS,WACd,CAAC,EAAE,MAAMA,KAAK,CAAC,CAAC,GAChB;YACRM;YACAO,WAAW,CAAC,YAAY,EAAER,EAAE,OAAO,CAAC;YACpCE,OACEN,mBAAmBA,iBAAiBG,SAAS,eACzC,CAAC,EAAEL,MAAMQ,QAAS,CAAA,OAAOP,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC,GAC1D,OAAOA,SAAS,WACd,CAAC,EAAE,MAAMA,KAAK,CAAC,CAAC,GAChB;QACV;OAECJ;AAGP,EAAC"}

package/dist/views/LivePreview/IFrame/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './index.scss';
+type Props = {
+    setIframeHasLoaded: (value: boolean) => void;
+    url: string;
+};
+export declare const IFrame: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLIFrameElement>>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/views/LivePreview/IFrame/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/LivePreview/IFrame/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAGzC,OAAO,cAAc,CAAA;AAIrB,KAAK,KAAK,GAAG;IACX,kBAAkB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,eAAO,MAAM,MAAM,iFAmBjB,CAAA"}

package/dist/views/LivePreview/IFrame/index.js

@@ -0,0 +1,22 @@
+'use client';
+import React, { forwardRef } from 'react';
+import { useLivePreviewContext } from '../Context/context.js';
+const baseClass = 'live-preview-iframe';
+export const IFrame = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { setIframeHasLoaded, url } = props;
+    const { zoom } = useLivePreviewContext();
+    return /*#__PURE__*/ React.createElement("iframe", {
+        className: baseClass,
+        onLoad: ()=>{
+            setIframeHasLoaded(true);
+        },
+        ref: ref,
+        src: url,
+        style: {
+            transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined
+        },
+        title: url
+    });
+});
+
+//# sourceMappingURL=index.js.map

package/dist/views/LivePreview/IFrame/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/views/LivePreview/IFrame/index.tsx"],"sourcesContent":["'use client'\nimport React, { forwardRef } from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-iframe'\n\ntype Props = {\n  setIframeHasLoaded: (value: boolean) => void\n  url: string\n}\n\nexport const IFrame = forwardRef<HTMLIFrameElement, Props>((props, ref) => {\n  const { setIframeHasLoaded, url } = props\n\n  const { zoom } = useLivePreviewContext()\n\n  return (\n    <iframe\n      className={baseClass}\n      onLoad={() => {\n        setIframeHasLoaded(true)\n      }}\n      ref={ref}\n      src={url}\n      style={{\n        transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined,\n      }}\n      title={url}\n    />\n  )\n})\n"],"names":["React","forwardRef","useLivePreviewContext","baseClass","IFrame","props","ref","setIframeHasLoaded","url","zoom","iframe","className","onLoad","src","style","transform","undefined","title"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,SAASC,UAAU,QAAQ,QAAO;AAEzC,SAASC,qBAAqB,QAAQ,wBAAuB;AAG7D,MAAMC,YAAY;AAOlB,OAAO,MAAMC,uBAASH,WAAqC,CAACI,OAAOC;IACjE,MAAM,EAAEC,kBAAkB,EAAEC,GAAG,EAAE,GAAGH;IAEpC,MAAM,EAAEI,IAAI,EAAE,GAAGP;IAEjB,qBACE,oBAACQ;QACCC,WAAWR;QACXS,QAAQ;YACNL,mBAAmB;QACrB;QACAD,KAAKA;QACLO,KAAKL;QACLM,OAAO;YACLC,WAAW,OAAON,SAAS,WAAW,CAAC,MAAM,EAAEA,KAAK,EAAE,CAAC,GAAGO;QAC5D;QACAC,OAAOT;;AAGb,GAAE"}

package/dist/views/LivePreview/Preview/index.d.ts

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

package/dist/views/LivePreview/Preview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/LivePreview/Preview/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAMlD,OAAO,KAAoB,MAAM,OAAO,CAAA;AAMxC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAgH/C,CAAA"}