@payloadcms/next 3.0.0-canary.294ea5c → 3.0.0-canary.2d0dd26

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

@@ -46,7 +46,11 @@ export const DeviceContainer = props => {
       if (deviceIsLargerThanFrame) {
         if (zoom > 1) {
           const differenceFromDeviceToFrame = measuredDeviceSize.width - outerFrameSize.width;
-          if (differenceFromDeviceToFrame < 0) x = `${differenceFromDeviceToFrame / 2}px`;else x = '0';
+          if (differenceFromDeviceToFrame < 0) {
+            x = `${differenceFromDeviceToFrame / 2}px`;
+          } else {
+            x = '0';
+          }
         } else {
           x = '0';
         }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useResize","React","useEffect","useLivePreviewContext","DeviceContainer","props","children","deviceFrameRef","useRef","outerFrameRef","breakpoint","setMeasuredDeviceSize","size","desiredSize","zoom","measuredDeviceSize","current","outerFrameSize","deviceIsLargerThanFrame","x","margin","width","height","scaledDesiredWidth","scaledDeviceWidth","scaledDeviceDifferencePixels","differenceFromDeviceToFrame","_jsx","ref","style","transform"],"sources":["../../../../src/views/LivePreview/Device/index.tsx"],"sourcesContent":["'use client'\nimport { useResize } from '@payloadcms/ui'\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  const outerFrameRef = React.useRef<HTMLDivElement>(null)\n\n  const { breakpoint, setMeasuredDeviceSize, size: desiredSize, 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.current)\n  const { size: outerFrameSize } = useResize(outerFrameRef.current)\n\n  let deviceIsLargerThanFrame: boolean = false\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      desiredSize &&\n      measuredDeviceSize &&\n      typeof zoom === 'number' &&\n      typeof desiredSize.width === 'number' &&\n      typeof desiredSize.height === 'number' &&\n      typeof measuredDeviceSize.width === 'number' &&\n      typeof measuredDeviceSize.height === 'number'\n    ) {\n      margin = '0 auto'\n      const scaledDesiredWidth = desiredSize.width / zoom\n      const scaledDeviceWidth = measuredDeviceSize.width * zoom\n      const scaledDeviceDifferencePixels = scaledDesiredWidth - desiredSize.width\n      deviceIsLargerThanFrame = scaledDeviceWidth > outerFrameSize.width\n\n      if (deviceIsLargerThanFrame) {\n        if (zoom > 1) {\n          const differenceFromDeviceToFrame = measuredDeviceSize.width - outerFrameSize.width\n          if (differenceFromDeviceToFrame < 0) x = `${differenceFromDeviceToFrame / 2}px`\n          else x = '0'\n        } else {\n          x = '0'\n        }\n      } else {\n        if (zoom >= 1) {\n          x = `${scaledDeviceDifferencePixels / 2}px`\n        } else {\n          const differenceFromDeviceToFrame = outerFrameSize.width - scaledDeviceWidth\n          x = `${differenceFromDeviceToFrame / 2}px`\n          margin = '0'\n        }\n      }\n    }\n  }\n\n  let width = zoom ? `${100 / zoom}%` : '100%'\n  let height = zoom ? `${100 / zoom}%` : '100%'\n\n  if (breakpoint !== 'responsive') {\n    width = `${desiredSize?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n    height = `${desiredSize?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n  }\n\n  return (\n    <div\n      ref={outerFrameRef}\n      style={{\n        height: '100%',\n        width: '100%',\n      }}\n    >\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    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useResize","React","useEffect","useLivePreviewContext","DeviceContainer","props","children","deviceFrameRef","useRef","outerFrameRef","breakpoint","setMeasuredDeviceSize","size","desiredSize","zoom","measuredDeviceSize","current","outerFrameSize","deviceIsLargerThanFrame","x","margin","width","height","scaledDesiredWidth","scaledDeviceWidth","scaledDeviceDifferencePixels","differenceFromDeviceToFrame","_jsx","ref","style","transform"],"sources":["../../../../src/views/LivePreview/Device/index.tsx"],"sourcesContent":["'use client'\nimport { useResize } from '@payloadcms/ui'\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  const outerFrameRef = React.useRef<HTMLDivElement>(null)\n\n  const { breakpoint, setMeasuredDeviceSize, size: desiredSize, 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.current)\n  const { size: outerFrameSize } = useResize(outerFrameRef.current)\n\n  let deviceIsLargerThanFrame: boolean = false\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      desiredSize &&\n      measuredDeviceSize &&\n      typeof zoom === 'number' &&\n      typeof desiredSize.width === 'number' &&\n      typeof desiredSize.height === 'number' &&\n      typeof measuredDeviceSize.width === 'number' &&\n      typeof measuredDeviceSize.height === 'number'\n    ) {\n      margin = '0 auto'\n      const scaledDesiredWidth = desiredSize.width / zoom\n      const scaledDeviceWidth = measuredDeviceSize.width * zoom\n      const scaledDeviceDifferencePixels = scaledDesiredWidth - desiredSize.width\n      deviceIsLargerThanFrame = scaledDeviceWidth > outerFrameSize.width\n\n      if (deviceIsLargerThanFrame) {\n        if (zoom > 1) {\n          const differenceFromDeviceToFrame = measuredDeviceSize.width - outerFrameSize.width\n          if (differenceFromDeviceToFrame < 0) {\n            x = `${differenceFromDeviceToFrame / 2}px`\n          } else {\n            x = '0'\n          }\n        } else {\n          x = '0'\n        }\n      } else {\n        if (zoom >= 1) {\n          x = `${scaledDeviceDifferencePixels / 2}px`\n        } else {\n          const differenceFromDeviceToFrame = outerFrameSize.width - scaledDeviceWidth\n          x = `${differenceFromDeviceToFrame / 2}px`\n          margin = '0'\n        }\n      }\n    }\n  }\n\n  let width = zoom ? `${100 / zoom}%` : '100%'\n  let height = zoom ? `${100 / zoom}%` : '100%'\n\n  if (breakpoint !== 'responsive') {\n    width = `${desiredSize?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n    height = `${desiredSize?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n  }\n\n  return (\n    <div\n      ref={outerFrameRef}\n      style={{\n        height: '100%',\n        width: '100%',\n      }}\n    >\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    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,7 +1,9 @@
-.live-preview-iframe {
-  background-color: white;
-  border: 0;
-  width: 100%;
-  height: 100%;
-  transform-origin: top left;
+@layer payload-default {
+  .live-preview-iframe {
+    background-color: white;
+    border: 0;
+    width: 100%;
+    height: 100%;
+    transform-origin: top left;
+  }
 }

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

@@ -1,41 +1,43 @@
 @import '../../../scss/styles.scss';
 
-.live-preview-window {
-  background-color: var(--theme-bg);
-  width: 60%;
-  flex-shrink: 0;
-  flex-grow: 0;
-  position: sticky;
-  top: var(--doc-controls-height);
-  height: calc(100vh - var(--doc-controls-height));
-  overflow: hidden;
+@layer payload-default {
+  .live-preview-window {
+    background-color: var(--theme-bg);
+    width: 60%;
+    flex-shrink: 0;
+    flex-grow: 0;
+    position: sticky;
+    top: var(--doc-controls-height);
+    height: calc(100vh - var(--doc-controls-height));
+    overflow: hidden;
 
-  &__wrapper {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: flex-start;
-  }
-
-  &__main {
-    flex-grow: 1;
-    height: 100%;
-    width: 100%;
-  }
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      justify-content: flex-start;
+    }
 
-  &--has-breakpoint {
-    .live-preview-iframe {
-      border: 1px solid var(--theme-elevation-100);
+    &__main {
+      flex-grow: 1;
+      height: 100%;
+      width: 100%;
     }
 
-    .live-preview-window {
-      &__main {
-        padding: var(--base);
+    &--has-breakpoint {
+      .live-preview-iframe {
+        border: 1px solid var(--theme-elevation-100);
+      }
+
+      .live-preview-window {
+        &__main {
+          padding: var(--base);
+        }
       }
     }
-  }
 
-  @include mid-break {
-    width: 100%;
+    @include mid-break {
+      width: 100%;
+    }
   }
 }

package/dist/views/LivePreview/Toolbar/Controls/index.js

@@ -2,7 +2,7 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronIcon, LinkIcon, Popup, PopupList, XIcon, useTranslation } from '@payloadcms/ui';
+import { ChevronIcon, LinkIcon, Popup, PopupList, useTranslation, XIcon } from '@payloadcms/ui';
 import React from 'react';
 import { useLivePreviewContext } from '../../Context/context.js';
 import { PreviewFrameSizeInput } from '../SizeInput/index.js';

package/dist/views/LivePreview/Toolbar/Controls/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ChevronIcon","LinkIcon","Popup","PopupList","XIcon","useTranslation","React","useLivePreviewContext","PreviewFrameSizeInput","baseClass","zoomOptions","ToolbarControls","$","breakpoint","breakpoints","setBreakpoint","setPreviewWindowType","setZoom","url","zoom","t","t0","customOption","label","value","t2","t3","close","close_0","_jsx","ButtonGroup","children","Fragment","map","zoomValue","_jsxs","Button","active","onClick","e","preventDefault","className","length","button","find","bp","name","horizontalAlign","render","t1","bp_0","axis","href","type"],"sources":["../../../../../src/views/LivePreview/Toolbar/Controls/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport { ChevronIcon, LinkIcon, Popup, PopupList, XIcon, useTranslation } from '@payloadcms/ui'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../Context/context.js'\nimport { PreviewFrameSizeInput } from '../SizeInput/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar-controls'\nconst zoomOptions = [50, 75, 100, 125, 150, 200]\n\nexport const ToolbarControls: React.FC<EditViewProps> = () => {\n  const { breakpoint, breakpoints, setBreakpoint, setPreviewWindowType, setZoom, url, zoom } =\n    useLivePreviewContext()\n  const { t } = useTranslation()\n\n  const customOption = {\n    label: t('general:custom'),\n    value: 'custom',\n  }\n\n  return (\n    <div className={baseClass}>\n      {breakpoints?.length > 0 && (\n        <Popup\n          button={\n            <React.Fragment>\n              <span>\n                {breakpoints.find((bp) => bp.name == breakpoint)?.label ?? customOption.label}\n              </span>\n              &nbsp;\n              <ChevronIcon className={`${baseClass}__chevron`} />\n            </React.Fragment>\n          }\n          className={`${baseClass}__breakpoint`}\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.ButtonGroup>\n              <React.Fragment>\n                {breakpoints.map((bp) => (\n                  <PopupList.Button\n                    active={bp.name == breakpoint}\n                    key={bp.name}\n                    onClick={() => {\n                      setBreakpoint(bp.name)\n                      close()\n                    }}\n                  >\n                    {bp.label}\n                  </PopupList.Button>\n                ))}\n                {/* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */}\n                {breakpoint === 'custom' && (\n                  <PopupList.Button\n                    active={breakpoint == customOption.value}\n                    onClick={() => {\n                      setBreakpoint(customOption.value)\n                      close()\n                    }}\n                  >\n                    {customOption.label}\n                  </PopupList.Button>\n                )}\n              </React.Fragment>\n            </PopupList.ButtonGroup>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      )}\n      <div className={`${baseClass}__device-size`}>\n        <PreviewFrameSizeInput axis=\"x\" />\n        <span className={`${baseClass}__size-divider`}>\n          <XIcon />\n        </span>\n        <PreviewFrameSizeInput axis=\"y\" />\n      </div>\n      <Popup\n        button={\n          <React.Fragment>\n            <span>{zoom * 100}%</span>\n            &nbsp;\n            <ChevronIcon className={`${baseClass}__chevron`} />\n          </React.Fragment>\n        }\n        className={`${baseClass}__zoom`}\n        horizontalAlign=\"right\"\n        render={({ close }) => (\n          <PopupList.ButtonGroup>\n            <React.Fragment>\n              {zoomOptions.map((zoomValue) => (\n                <PopupList.Button\n                  active={zoom * 100 == zoomValue}\n                  key={zoomValue}\n                  onClick={() => {\n                    setZoom(zoomValue / 100)\n                    close()\n                  }}\n                >\n                  {zoomValue}%\n                </PopupList.Button>\n              ))}\n            </React.Fragment>\n          </PopupList.ButtonGroup>\n        )}\n        showScrollbar\n        verticalAlign=\"bottom\"\n      />\n      <a\n        className={`${baseClass}__external`}\n        href={url}\n        onClick={(e) => {\n          e.preventDefault()\n          setPreviewWindowType('popup')\n        }}\n        type=\"button\"\n      >\n        <LinkIcon />\n      </a>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,SAASC,WAAW,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,SAAS,EAAEC,KAAK,EAAEC,cAAc,QAAQ;AAC/E,OAAOC,KAAA,MAAW;AAElB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,qBAAqB,QAAQ;AAGtC,MAAMC,SAAA,GAAY;AAClB,MAAMC,WAAA,GAAc,CAAC,IAAI,IAAI,KAAK,KAAK,KAAK,IAAI;AAEhD,OAAO,MAAMC,eAAA,GAA2CA,CAAA;EAAA,MAAAC,CAAA,GAAAb,EAAA;EACtD;IAAAc,UAAA;IAAAC,WAAA;IAAAC,aAAA;IAAAC,oBAAA;IAAAC,OAAA;IAAAC,GAAA;IAAAC;EAAA,IACEZ,qBAAA;EACF;IAAAa;EAAA,IAAcf,cAAA;EAAA,IAAAgB,EAAA;EAAA,IAAAT,CAAA,QAAAQ,CAAA,IAAAR,CAAA,QAAAE,WAAA,IAAAF,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAG,aAAA,IAAAH,CAAA,QAAAO,IAAA,IAAAP,CAAA,QAAAK,OAAA,IAAAL,CAAA,QAAAI,oBAAA,IAAAJ,CAAA,QAAAM,GAAA;IAEd,MAAAI,YAAA;MAAAC,KAAA,EACSH,CAAA,CAAE;MAAAI,KAAA,EACF;IAAA;IACT,IAAAC,EAAA;IAAA,IAAAb,CAAA,QAAAO,IAAA,IAAAP,CAAA,SAAAK,OAAA;MAoEcQ,EAAA,GAAAC,EAAA;QAAC;UAAAC,KAAA,EAAAC;QAAA,IAAAF,EAAS;QAAA,OAChBG,IAAA,CAAA1B,SAAA,CAAA2B,WAAA;UAAAC,QAAA,EACEF,IAAA,CAAAvB,KAAA,CAAA0B,QAAA;YAAAD,QAAA,EACGrB,WAAA,CAAAuB,GAAA,CAAAC,SAAA,IACCC,KAAA,CAAAhC,SAAA,CAAAiC,MAAA;cAAAC,MAAA,EACUlB,IAAA,MAAO,IAAOe,SAAA;cAAAI,OAAA,EAAAA,CAAA;gBAGpBrB,OAAA,CAAQiB,SAAA,MAAY;gBACpBP,OAAA;cAAA;cAAAI,QAAA,GAGDG,SAAA,EAAU;YAAA,GANNA,SAAA;UAAA,C;;;;;;;;;;;MAkBNR,EAAA,GAAAa,CAAA;QACPA,CAAA,CAAAC,cAAA,CAAgB;QAChBxB,oBAAA,CAAqB;MAAA;MACvBJ,CAAA,OAAAI,oBAAA;MAAAJ,CAAA,OAAAc,EAAA;IAAA;MAAAA,EAAA,GAAAd,CAAA;IAAA;IA5FJS,EAAA,GAAAc,KAAA,CAAC;MAAAM,SAAA,EAAAhC,SAAA;MAAAsB,QAAA,GACEjB,WAAA,EAAA4B,MAAA,IAAsB,IACrBb,IAAA,CAAA3B,KAAA;QAAAyC,MAAA,EAEIR,KAAA,CAAA7B,KAAA,CAAA0B,QAAA;UAAAD,QAAA,GACEF,IAAA,CAAC;YAAAE,QAAA,EACEjB,WAAA,CAAA8B,IAAA,CAAAC,EAAA,IAAyBA,EAAA,CAAAC,IAAA,IAAWjC,UAAA,GAAAU,KAAA,IAAsBD,YAAA,CAAAC;UAAkB,C,GACxE,QAEPM,IAAA,CAAA7B,WAAA;YAAAyC,SAAA,EAAwB,GAAAhC,SAAA;UAAuB,C;;mBAGxC,GAAAA,SAAA,cAA0B;QAAAsC,eAAA,EACrB;QAAAC,MAAA,EAAAC,EAAA;UACP;YAAAtB;UAAA,IAAAsB,EAAS;UAAA,OAChBpB,IAAA,CAAA1B,SAAA,CAAA2B,WAAA;YAAAC,QAAA,EACEI,KAAA,CAAA7B,KAAA,CAAA0B,QAAA;cAAAD,QAAA,GACGjB,WAAA,CAAAmB,GAAA,CAAAiB,IAAA,IACCrB,IAAA,CAAA1B,SAAA,CAAAiC,MAAA;gBAAAC,MAAA,EACUQ,IAAA,CAAAC,IAAA,IAAWjC,UAAA;gBAAAyB,OAAA,EAAAA,CAAA;kBAGjBvB,aAAA,CAAc8B,IAAA,CAAAC,IAAO;kBACrBnB,KAAA;gBAAA;gBAAAI,QAAA,EAGDc,IAAA,CAAAtB;cAAA,GANIsB,IAAA,CAAAC,IAAO,IAUfjC,UAAA,KAAe,YACdgB,IAAA,CAAA1B,SAAA,CAAAiC,MAAA;gBAAAC,MAAA,EACUxB,UAAA,IAAcS,YAAA,CAAAE,KAAkB;gBAAAc,OAAA,EAAAA,CAAA;kBAEtCvB,aAAA,CAAcO,YAAA,CAAAE,KAAkB;kBAChCG,KAAA;gBAAA;gBAAAI,QAAA,EAGDT,YAAA,CAAAC;cAAA,C;;;;;uBAOG;MAAA,C,GAGlBY,KAAA,CAAC;QAAAM,SAAA,EAAe,GAAAhC,SAAA,eAA2B;QAAAsB,QAAA,GACzCF,IAAA,CAAArB,qBAAA;UAAA2C,IAAA,EAA4B;QAAA,C,GAC5BtB,IAAA,CAAC;UAAAY,SAAA,EAAgB,GAAAhC,SAAA,gBAA4B;UAAAsB,QAAA,EAC3CF,IAAA,CAAAzB,KAAA,IAAC;QAAA,C,GAEHyB,IAAA,CAAArB,qBAAA;UAAA2C,IAAA,EAA4B;QAAA,C;UAE9BtB,IAAA,CAAA3B,KAAA;QAAAyC,MAAA,EAEIR,KAAA,CAAA7B,KAAA,CAAA0B,QAAA;UAAAD,QAAA,GACEI,KAAA,CAAC;YAAAJ,QAAA,GAAMZ,IAAA,MAAO,EAAI;UAAA,C,GAAQ,QAE1BU,IAAA,CAAA7B,WAAA;YAAAyC,SAAA,EAAwB,GAAAhC,SAAA;UAAuB,C;;mBAGxC,GAAAA,SAAA,QAAoB;QAAAsC,eAAA,EACf;QAAAC,MAAA,EACRvB,E;;uBAmBM;MAAA,C,GAEhBI,IAAA,CAAC;QAAAY,SAAA,EACY,GAAAhC,SAAA,YAAwB;QAAA2C,IAAA,EAC7BlC,GAAA;QAAAoB,OAAA,EACGZ,EAGT;QAAA2B,IAAA,EACK;QAAAtB,QAAA,EAELF,IAAA,CAAA5B,QAAA,IAAC;MAAA,C;;;;;;;;;;;;;;SA/FLoB,E;CAmGJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","ChevronIcon","LinkIcon","Popup","PopupList","useTranslation","XIcon","React","useLivePreviewContext","PreviewFrameSizeInput","baseClass","zoomOptions","ToolbarControls","$","breakpoint","breakpoints","setBreakpoint","setPreviewWindowType","setZoom","url","zoom","t","t0","customOption","label","value","t2","t3","close","close_0","_jsx","ButtonGroup","children","Fragment","map","zoomValue","_jsxs","Button","active","onClick","e","preventDefault","className","length","button","find","bp","name","horizontalAlign","render","t1","bp_0","axis","href","type"],"sources":["../../../../../src/views/LivePreview/Toolbar/Controls/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport { ChevronIcon, LinkIcon, Popup, PopupList, useTranslation, XIcon } from '@payloadcms/ui'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../Context/context.js'\nimport { PreviewFrameSizeInput } from '../SizeInput/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar-controls'\nconst zoomOptions = [50, 75, 100, 125, 150, 200]\n\nexport const ToolbarControls: React.FC<EditViewProps> = () => {\n  const { breakpoint, breakpoints, setBreakpoint, setPreviewWindowType, setZoom, url, zoom } =\n    useLivePreviewContext()\n  const { t } = useTranslation()\n\n  const customOption = {\n    label: t('general:custom'),\n    value: 'custom',\n  }\n\n  return (\n    <div className={baseClass}>\n      {breakpoints?.length > 0 && (\n        <Popup\n          button={\n            <React.Fragment>\n              <span>\n                {breakpoints.find((bp) => bp.name == breakpoint)?.label ?? customOption.label}\n              </span>\n              &nbsp;\n              <ChevronIcon className={`${baseClass}__chevron`} />\n            </React.Fragment>\n          }\n          className={`${baseClass}__breakpoint`}\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.ButtonGroup>\n              <React.Fragment>\n                {breakpoints.map((bp) => (\n                  <PopupList.Button\n                    active={bp.name == breakpoint}\n                    key={bp.name}\n                    onClick={() => {\n                      setBreakpoint(bp.name)\n                      close()\n                    }}\n                  >\n                    {bp.label}\n                  </PopupList.Button>\n                ))}\n                {/* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */}\n                {breakpoint === 'custom' && (\n                  <PopupList.Button\n                    active={breakpoint == customOption.value}\n                    onClick={() => {\n                      setBreakpoint(customOption.value)\n                      close()\n                    }}\n                  >\n                    {customOption.label}\n                  </PopupList.Button>\n                )}\n              </React.Fragment>\n            </PopupList.ButtonGroup>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      )}\n      <div className={`${baseClass}__device-size`}>\n        <PreviewFrameSizeInput axis=\"x\" />\n        <span className={`${baseClass}__size-divider`}>\n          <XIcon />\n        </span>\n        <PreviewFrameSizeInput axis=\"y\" />\n      </div>\n      <Popup\n        button={\n          <React.Fragment>\n            <span>{zoom * 100}%</span>\n            &nbsp;\n            <ChevronIcon className={`${baseClass}__chevron`} />\n          </React.Fragment>\n        }\n        className={`${baseClass}__zoom`}\n        horizontalAlign=\"right\"\n        render={({ close }) => (\n          <PopupList.ButtonGroup>\n            <React.Fragment>\n              {zoomOptions.map((zoomValue) => (\n                <PopupList.Button\n                  active={zoom * 100 == zoomValue}\n                  key={zoomValue}\n                  onClick={() => {\n                    setZoom(zoomValue / 100)\n                    close()\n                  }}\n                >\n                  {zoomValue}%\n                </PopupList.Button>\n              ))}\n            </React.Fragment>\n          </PopupList.ButtonGroup>\n        )}\n        showScrollbar\n        verticalAlign=\"bottom\"\n      />\n      <a\n        className={`${baseClass}__external`}\n        href={url}\n        onClick={(e) => {\n          e.preventDefault()\n          setPreviewWindowType('popup')\n        }}\n        type=\"button\"\n      >\n        <LinkIcon />\n      </a>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/LivePreview/Toolbar/Controls/index.scss

@@ -1,59 +1,61 @@
 @import '../../../../scss/styles.scss';
 
-.live-preview-toolbar-controls {
-  display: flex;
-  align-items: center;
-  gap: calc(var(--base) / 3);
-
-  &__breakpoint {
-    border: none;
-    background: transparent;
-    height: var(--base);
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  &__device-size {
+@layer payload-default {
+  .live-preview-toolbar-controls {
     display: flex;
     align-items: center;
-  }
+    gap: calc(var(--base) / 3);
 
-  &__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;
-  }
+    &__breakpoint {
+      border: none;
+      background: transparent;
+      height: var(--base);
 
-  &__zoom {
-    width: 55px;
-    border: none;
-    background: transparent;
-    height: var(--base);
+      &:focus {
+        outline: none;
+      }
+    }
 
-    &:focus {
-      outline: none;
+    &__device-size {
+      display: flex;
+      align-items: center;
     }
-  }
 
-  &__external {
-    flex-shrink: 0;
-    display: flex;
-    width: var(--base);
-    height: var(--base);
-    align-items: center;
-    justify-content: center;
-    padding: 6px 0;
-  }
+    &__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;
+    }
 
-  .popup-button {
-    display: flex;
-    align-items: center;
+    &__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;
+    }
+
+    .popup-button {
+      display: flex;
+      align-items: center;
+    }
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/LivePreview/Toolbar/SizeInput/index.tsx"],"names":[],"mappings":"AACA,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,CA0DA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/LivePreview/Toolbar/SizeInput/index.tsx"],"names":[],"mappings":"AACA,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,CA+DA,CAAA"}

package/dist/views/LivePreview/Toolbar/SizeInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","useLivePreviewContext","baseClass","PreviewFrameSizeInput","props","$","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","internalState","setInternalState","useState","width","height","t0","e","newValue","Number","target","value","type","toFixed","handleChange","t1","t2","t3","t4","t5","_jsx","className","min","name","onChange","step"],"sources":["../../../../../src/views/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../../Context/context.js'\nimport './index.scss'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n  axis?: 'x' | 'y'\n}> = (props) => {\n  const { axis } = props\n\n  const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n    useLivePreviewContext()\n\n  const [internalState, setInternalState] = React.useState<number>(\n    (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n  )\n\n  // when the input is changed manually, we need to set the breakpoint as `custom`\n  // this will then allow us to set an explicit width and height\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      let newValue = Number(e.target.value)\n\n      if (newValue < 0) newValue = 0\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n      // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n  )\n\n  // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n  // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n  useEffect(() => {\n    if (breakpoint === 'responsive' && measuredDeviceSize) {\n      if (axis === 'x') setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n      else setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n    }\n\n    if (breakpoint !== 'responsive' && size) {\n      setInternalState(axis === 'x' ? size.width : size.height)\n    }\n  }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n  return (\n    <input\n      className={baseClass}\n      min={0}\n      name={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n      onChange={handleChange}\n      step={1}\n      type=\"number\"\n      value={internalState || 0}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","useLivePreviewContext","baseClass","PreviewFrameSizeInput","props","$","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","internalState","setInternalState","useState","width","height","t0","e","newValue","Number","target","value","type","toFixed","handleChange","t1","t2","t3","t4","t5","_jsx","className","min","name","onChange","step"],"sources":["../../../../../src/views/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../../Context/context.js'\nimport './index.scss'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n  axis?: 'x' | 'y'\n}> = (props) => {\n  const { axis } = props\n\n  const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n    useLivePreviewContext()\n\n  const [internalState, setInternalState] = React.useState<number>(\n    (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n  )\n\n  // when the input is changed manually, we need to set the breakpoint as `custom`\n  // this will then allow us to set an explicit width and height\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      let newValue = Number(e.target.value)\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n      // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n  )\n\n  // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n  // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n  useEffect(() => {\n    if (breakpoint === 'responsive' && measuredDeviceSize) {\n      if (axis === 'x') {\n        setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n      } else {\n        setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n      }\n    }\n\n    if (breakpoint !== 'responsive' && size) {\n      setInternalState(axis === 'x' ? size.width : size.height)\n    }\n  }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n  return (\n    <input\n      className={baseClass}\n      min={0}\n      name={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n      onChange={handleChange}\n      step={1}\n      type=\"number\"\n      value={internalState || 0}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,10 +1,12 @@
-.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;
+@layer payload-default {
+  .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/views/LivePreview/Toolbar/index.scss

@@ -1,41 +1,43 @@
 @import '../../../scss/styles.scss';
 
-.live-preview-toolbar {
-  display: flex;
-  background-color: var(--theme-bg);
-  color: var(--theme-text);
-  height: calc(var(--base) * 1.75);
-  align-items: center;
-  flex-shrink: 0;
+@layer payload-default {
+  .live-preview-toolbar {
+    display: flex;
+    background-color: var(--theme-bg);
+    color: var(--theme-text);
+    height: calc(var(--base) * 1.75);
+    align-items: center;
+    flex-shrink: 0;
 
-  &--static {
-    position: relative;
-    width: 100%;
-    justify-content: center;
-    border-bottom: 1px solid var(--theme-elevation-100);
-  }
+    &--static {
+      position: relative;
+      width: 100%;
+      justify-content: center;
+      border-bottom: 1px solid var(--theme-elevation-100);
+    }
 
-  &--draggable {
-    @include shadow-lg;
-    position: absolute;
-    top: 0;
-    left: 0;
-    margin: 0;
-    border-radius: 4px;
-  }
+    &--draggable {
+      @include shadow-lg;
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin: 0;
+      border-radius: 4px;
+    }
 
-  &__drag-handle {
-    background: transparent;
-    border: 0;
-    padding: 0;
-    cursor: grab;
+    &__drag-handle {
+      background: transparent;
+      border: 0;
+      padding: 0;
+      cursor: grab;
 
-    .icon--drag-handle .fill {
-      fill: var(--theme-elevation-300);
-    }
+      .icon--drag-handle .fill {
+        fill: var(--theme-elevation-300);
+      }
 
-    &:active {
-      cursor: grabbing;
+      &:active {
+        cursor: grabbing;
+      }
     }
   }
 }

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

@@ -1,4 +1,6 @@
-.toolbar-area {
-  width: 100%;
-  height: 100%;
+@layer payload-default {
+  .toolbar-area {
+    width: 100%;
+    height: 100%;
+  }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/views/LivePreview/index.client.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAKV,IAAI,EACJ,iBAAiB,EAClB,MAAM,SAAS,CAAA;AAehB,OAAO,KAAgC,MAAM,OAAO,CAAA;AAQpD,OAAO,cAAc,CAAA;AAiLrB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACvC,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;IACtD,QAAQ,CAAC,WAAW,EAAE,IAAI,CAAA;IAC1B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;CACrB,CAmDA,CAAA"}
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/views/LivePreview/index.client.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAMV,IAAI,EACJ,iBAAiB,EAClB,MAAM,SAAS,CAAA;AA2BhB,OAAO,KAA6D,MAAM,OAAO,CAAA;AAIjF,OAAO,cAAc,CAAA;AA4ZrB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACvC,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;IACtD,QAAQ,CAAC,WAAW,EAAE,IAAI,CAAA;IAC1B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;CACrB,CA8CA,CAAA"}