@orion-studios/payload-studio 0.6.0-beta.173 → 0.6.0-beta.175

package/dist/admin/index.mjs

@@ -7,14 +7,14 @@ import {
   socialMediaConnectionsField,
   themePreferenceField,
   withTooltips
-} from "../chunk-KHK6RTGC.mjs";
+} from "../chunk-JC3UV74N.mjs";
+import "../chunk-W2UOCJDX.mjs";
 import {
   SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM,
   SOCIAL_MEDIA_ICON_OPTIONS,
   SOCIAL_MEDIA_PLATFORMS,
   SOCIAL_MEDIA_PLATFORM_LABELS
 } from "../chunk-ZTXJG4K5.mjs";
-import "../chunk-W2UOCJDX.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {
   SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM,

package/dist/builder-v2/client.js

@@ -1776,7 +1776,9 @@ var quickVerticalAlignStyles = {
 var negativePaddingCss = `
   .orion-builder-v2-negative-padding {
     display: flow-root;
+    isolation: isolate;
     overflow: visible;
+    position: relative;
   }
 
   .orion-builder-v2-negative-padding.is-orion-negative-padding-bottom:not(.is-orion-negative-padding-top),
@@ -1784,13 +1786,27 @@ var negativePaddingCss = `
     overflow: hidden;
   }
 
+  .orion-builder-v2-negative-padding::before {
+    background: var(--orion-negative-padding-background, transparent);
+    content: "";
+    inset: calc(-1 * var(--orion-negative-padding-top, 0px))
+      calc(-1 * var(--orion-negative-padding-right, 0px))
+      calc(-1 * var(--orion-negative-padding-bottom, 0px))
+      calc(-1 * var(--orion-negative-padding-left, 0px));
+    pointer-events: none;
+    position: absolute;
+    z-index: -1;
+  }
+
   .orion-builder-v2-negative-padding > * {
     margin-top: var(--orion-negative-padding-top, 0px) !important;
     margin-right: var(--orion-negative-padding-right, 0px) !important;
     margin-bottom: var(--orion-negative-padding-bottom, 0px) !important;
     margin-left: var(--orion-negative-padding-left, 0px) !important;
     max-width: none !important;
+    position: relative;
     width: calc(100% - var(--orion-negative-padding-left, 0px) - var(--orion-negative-padding-right, 0px)) !important;
+    z-index: 1;
   }
 `;
 var canvasSelectionCss = `
@@ -2007,6 +2023,8 @@ var negativePaddingSides = ["top", "bottom", "left", "right"];
 var negativePaddingSideFromProperty = (property) => property.startsWith("padding-") ? property.replace(/^padding-/, "") : "";
 var negativePaddingAttributeForSide = (side) => `data-orion-negative-padding-${side}`;
 var negativePaddingVariableForSide = (side) => `--orion-negative-padding-${side}`;
+var negativePaddingBackgroundAttribute = "data-orion-negative-padding-background";
+var negativePaddingBackgroundVariable = "--orion-negative-padding-background";
 var spacingTargetForComponent = (component) => {
   const element = component?.getEl?.();
   return element || null;
@@ -2602,6 +2620,15 @@ function GrapesPageEditor({
           (paddingSide) => paddingSide !== side && Boolean(attrs[negativePaddingAttributeForSide(paddingSide)])
         );
         if (!hasOtherNegativePadding) {
+          const negativePaddingBackground = firstString(
+            attrs[negativePaddingBackgroundAttribute],
+            selected.getStyle?.()[negativePaddingBackgroundVariable]
+          );
+          if (negativePaddingBackground) {
+            selected.addStyle?.({ "background-color": negativePaddingBackground });
+          }
+          selected.removeStyle?.(negativePaddingBackgroundVariable);
+          selected.removeAttributes?.(negativePaddingBackgroundAttribute);
           selected.removeClass?.("orion-builder-v2-negative-padding");
         }
       }
@@ -2629,10 +2656,23 @@ function GrapesPageEditor({
     if (isPadding) {
       const side = negativePaddingSideFromProperty(property);
       const negativeStyleValue = `${Number.isInteger(adjustment) ? adjustment : Number(adjustment.toFixed(2))}${unit}`;
+      const currentStyle = selected.getStyle?.() || {};
+      const backgroundColor = firstString(
+        currentStyle[negativePaddingBackgroundVariable],
+        selected.getAttributes?.()[negativePaddingBackgroundAttribute],
+        getStyleColorValue(currentStyle, "background-color")
+      );
       selected.addClass?.("orion-builder-v2-negative-padding");
       selected.addClass?.(`is-orion-negative-padding-${side}`);
-      selected.addAttributes?.({ [negativePaddingAttributeForSide(side)]: negativeStyleValue });
+      selected.addAttributes?.({
+        ...backgroundColor ? { [negativePaddingBackgroundAttribute]: backgroundColor } : {},
+        [negativePaddingAttributeForSide(side)]: negativeStyleValue
+      });
       selected.addStyle?.({
+        ...backgroundColor ? {
+          [negativePaddingBackgroundVariable]: backgroundColor,
+          "background-color": "transparent"
+        } : {},
         [negativePaddingVariableForSide(side)]: negativeStyleValue,
         [property]: "0px"
       });
@@ -2939,6 +2979,7 @@ function GrapesPageEditor({
       }
       const computed = window.getComputedStyle(element);
       const attrs = component.getAttributes?.() || {};
+      const style = component.getStyle?.() || {};
       spacingProperties.forEach((property) => {
         const negativePaddingSide = negativePaddingSideFromProperty(property);
         const negativePaddingValue = negativePaddingSide ? firstString(attrs[negativePaddingAttributeForSide(negativePaddingSide)]) : "";
@@ -2946,6 +2987,10 @@ function GrapesPageEditor({
           writeStylePanelLength(property, negativePaddingValue);
           return;
         }
+        if (property.startsWith("margin-")) {
+          writeStylePanelLength(property, firstString(style[property], computed.getPropertyValue(property)));
+          return;
+        }
         writeStylePanelLength(property, computed.getPropertyValue(property));
       });
     });

package/dist/builder-v2/client.mjs

@@ -1652,7 +1652,9 @@ var quickVerticalAlignStyles = {
 var negativePaddingCss = `
   .orion-builder-v2-negative-padding {
     display: flow-root;
+    isolation: isolate;
     overflow: visible;
+    position: relative;
   }
 
   .orion-builder-v2-negative-padding.is-orion-negative-padding-bottom:not(.is-orion-negative-padding-top),
@@ -1660,13 +1662,27 @@ var negativePaddingCss = `
     overflow: hidden;
   }
 
+  .orion-builder-v2-negative-padding::before {
+    background: var(--orion-negative-padding-background, transparent);
+    content: "";
+    inset: calc(-1 * var(--orion-negative-padding-top, 0px))
+      calc(-1 * var(--orion-negative-padding-right, 0px))
+      calc(-1 * var(--orion-negative-padding-bottom, 0px))
+      calc(-1 * var(--orion-negative-padding-left, 0px));
+    pointer-events: none;
+    position: absolute;
+    z-index: -1;
+  }
+
   .orion-builder-v2-negative-padding > * {
     margin-top: var(--orion-negative-padding-top, 0px) !important;
     margin-right: var(--orion-negative-padding-right, 0px) !important;
     margin-bottom: var(--orion-negative-padding-bottom, 0px) !important;
     margin-left: var(--orion-negative-padding-left, 0px) !important;
     max-width: none !important;
+    position: relative;
     width: calc(100% - var(--orion-negative-padding-left, 0px) - var(--orion-negative-padding-right, 0px)) !important;
+    z-index: 1;
   }
 `;
 var canvasSelectionCss = `
@@ -1883,6 +1899,8 @@ var negativePaddingSides = ["top", "bottom", "left", "right"];
 var negativePaddingSideFromProperty = (property) => property.startsWith("padding-") ? property.replace(/^padding-/, "") : "";
 var negativePaddingAttributeForSide = (side) => `data-orion-negative-padding-${side}`;
 var negativePaddingVariableForSide = (side) => `--orion-negative-padding-${side}`;
+var negativePaddingBackgroundAttribute = "data-orion-negative-padding-background";
+var negativePaddingBackgroundVariable = "--orion-negative-padding-background";
 var spacingTargetForComponent = (component) => {
   const element = component?.getEl?.();
   return element || null;
@@ -2478,6 +2496,15 @@ function GrapesPageEditor({
           (paddingSide) => paddingSide !== side && Boolean(attrs[negativePaddingAttributeForSide(paddingSide)])
         );
         if (!hasOtherNegativePadding) {
+          const negativePaddingBackground = firstString(
+            attrs[negativePaddingBackgroundAttribute],
+            selected.getStyle?.()[negativePaddingBackgroundVariable]
+          );
+          if (negativePaddingBackground) {
+            selected.addStyle?.({ "background-color": negativePaddingBackground });
+          }
+          selected.removeStyle?.(negativePaddingBackgroundVariable);
+          selected.removeAttributes?.(negativePaddingBackgroundAttribute);
           selected.removeClass?.("orion-builder-v2-negative-padding");
         }
       }
@@ -2505,10 +2532,23 @@ function GrapesPageEditor({
     if (isPadding) {
       const side = negativePaddingSideFromProperty(property);
       const negativeStyleValue = `${Number.isInteger(adjustment) ? adjustment : Number(adjustment.toFixed(2))}${unit}`;
+      const currentStyle = selected.getStyle?.() || {};
+      const backgroundColor = firstString(
+        currentStyle[negativePaddingBackgroundVariable],
+        selected.getAttributes?.()[negativePaddingBackgroundAttribute],
+        getStyleColorValue(currentStyle, "background-color")
+      );
       selected.addClass?.("orion-builder-v2-negative-padding");
       selected.addClass?.(`is-orion-negative-padding-${side}`);
-      selected.addAttributes?.({ [negativePaddingAttributeForSide(side)]: negativeStyleValue });
+      selected.addAttributes?.({
+        ...backgroundColor ? { [negativePaddingBackgroundAttribute]: backgroundColor } : {},
+        [negativePaddingAttributeForSide(side)]: negativeStyleValue
+      });
       selected.addStyle?.({
+        ...backgroundColor ? {
+          [negativePaddingBackgroundVariable]: backgroundColor,
+          "background-color": "transparent"
+        } : {},
         [negativePaddingVariableForSide(side)]: negativeStyleValue,
         [property]: "0px"
       });
@@ -2815,6 +2855,7 @@ function GrapesPageEditor({
       }
       const computed = window.getComputedStyle(element);
       const attrs = component.getAttributes?.() || {};
+      const style = component.getStyle?.() || {};
       spacingProperties.forEach((property) => {
         const negativePaddingSide = negativePaddingSideFromProperty(property);
         const negativePaddingValue = negativePaddingSide ? firstString(attrs[negativePaddingAttributeForSide(negativePaddingSide)]) : "";
@@ -2822,6 +2863,10 @@ function GrapesPageEditor({
           writeStylePanelLength(property, negativePaddingValue);
           return;
         }
+        if (property.startsWith("margin-")) {
+          writeStylePanelLength(property, firstString(style[property], computed.getPropertyValue(property)));
+          return;
+        }
         writeStylePanelLength(property, computed.getPropertyValue(property));
       });
     });

package/dist/index.mjs

@@ -1,25 +1,25 @@
 import {
   admin_exports
-} from "./chunk-KHK6RTGC.mjs";
+} from "./chunk-JC3UV74N.mjs";
+import {
+  admin_app_exports
+} from "./chunk-RKTIFEUY.mjs";
+import "./chunk-W2UOCJDX.mjs";
+import {
+  blocks_exports
+} from "./chunk-JQAHXYAM.mjs";
 import {
   nextjs_exports
 } from "./chunk-ZADL33R6.mjs";
 import "./chunk-ZTXJG4K5.mjs";
 import {
   studio_pages_exports
-} from "./chunk-7HME6R2V.mjs";
+} from "./chunk-NGLIA2OE.mjs";
+import "./chunk-OQSEJXC4.mjs";
 import "./chunk-7ZMXZRBP.mjs";
 import {
   studio_exports
 } from "./chunk-ADIIWIYL.mjs";
-import {
-  blocks_exports
-} from "./chunk-JQAHXYAM.mjs";
-import "./chunk-OQSEJXC4.mjs";
-import {
-  admin_app_exports
-} from "./chunk-RKTIFEUY.mjs";
-import "./chunk-W2UOCJDX.mjs";
 import "./chunk-6BWS3CLP.mjs";
 export {
   admin_exports as admin,

package/dist/studio-pages/index.mjs

@@ -7,7 +7,8 @@ import {
   pageStudioModuleManifest,
   resolveBuilderThemeTokens,
   toEditorInitialDoc
-} from "../chunk-7HME6R2V.mjs";
+} from "../chunk-NGLIA2OE.mjs";
+import "../chunk-OQSEJXC4.mjs";
 import {
   createDefaultStudioDocument,
   defaultBuilderThemeTokens,
@@ -15,7 +16,6 @@ import {
   studioDocumentToLayout
 } from "../chunk-7ZMXZRBP.mjs";
 import "../chunk-ADIIWIYL.mjs";
-import "../chunk-OQSEJXC4.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {
   createDefaultStudioDocument,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.6.0-beta.173",
+  "version": "0.6.0-beta.175",
   "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",

package/dist/{chunk-KHK6RTGC.mjs → chunk-JC3UV74N.mjs}

@@ -1,12 +1,12 @@
+import {
+  adminNavIcons
+} from "./chunk-W2UOCJDX.mjs";
 import {
   SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM,
   SOCIAL_MEDIA_ICON_OPTIONS,
   SOCIAL_MEDIA_PLATFORMS,
   SOCIAL_MEDIA_PLATFORM_LABELS
 } from "./chunk-ZTXJG4K5.mjs";
-import {
-  adminNavIcons
-} from "./chunk-W2UOCJDX.mjs";
 import {
   __export,
   __require

package/dist/{chunk-7HME6R2V.mjs → chunk-NGLIA2OE.mjs}

@@ -1,3 +1,6 @@
+import {
+  sectionStyleDefaults
+} from "./chunk-OQSEJXC4.mjs";
 import {
   createDefaultStudioDocument,
   defaultBuilderThemeTokens,
@@ -11,9 +14,6 @@ import {
   createEmptyStudioDocument,
   validateStudioDocument
 } from "./chunk-ADIIWIYL.mjs";
-import {
-  sectionStyleDefaults
-} from "./chunk-OQSEJXC4.mjs";
 import {
   __export
 } from "./chunk-6BWS3CLP.mjs";