@orion-studios/payload-studio 0.6.0-beta.181 → 0.6.0-beta.182

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

@@ -1773,22 +1773,7 @@ var quickVerticalAlignStyles = {
   middle: "center",
   top: "flex-start"
 };
-var negativePaddingCss = `
-  .orion-builder-v2-negative-padding {
-    display: flow-root;
-    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;
-    overflow: visible;
-    position: relative;
-    width: calc(100% - var(--orion-negative-padding-left, 0px) - var(--orion-negative-padding-right, 0px)) !important;
-  }
-`;
 var canvasSelectionCss = `
-  ${negativePaddingCss}
-
   .gjs-selected,
   [data-gjs-highlightable].gjs-selected {
     outline-color: #c7643d !important;
@@ -1957,14 +1942,6 @@ var readStylePanelColor = (property) => {
   return swatchColor;
 };
 var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
-var cssPixelValue = (value) => {
-  const match = value.trim().match(/^(-?\d*\.?\d+)(px)?$/i);
-  if (!match) {
-    return null;
-  }
-  const parsed = Number.parseFloat(match[1]);
-  return Number.isFinite(parsed) ? parsed : null;
-};
 var propertyNameFromStyleControl = (element) => {
   const property = element?.closest(".gjs-sm-property");
   const className = Array.from(property?.classList || []).find((name) => name.startsWith("gjs-sm-property__"));
@@ -1997,13 +1974,9 @@ var spacingProperties = [
   "padding-left",
   "padding-right"
 ];
-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 hasNegativePaddingState = (attrs, style) => negativePaddingSides.some((side) => Boolean(attrs[negativePaddingAttributeForSide(side)] || style[negativePaddingVariableForSide(side)]));
+var legacyNegativePaddingSides = ["top", "bottom", "left", "right"];
+var legacyNegativePaddingBackgroundAttribute = "data-orion-negative-padding-background";
+var legacyNegativePaddingBackgroundVariable = "--orion-negative-padding-background";
 var removeGeneratedSelectionMargins = (component) => {
   const style = component?.getStyle?.() || {};
   const cleanup = {};
@@ -2017,38 +1990,45 @@ var removeGeneratedSelectionMargins = (component) => {
     component?.addStyle?.(cleanup);
   }
 };
-var removeGeneratedNegativePaddingMargin = (component, side, negativePaddingValue) => {
-  if (side !== "top" && side !== "bottom") {
-    return;
-  }
-  const property = `margin-${side}`;
+var stripLegacyNegativePadding = (component) => {
+  const attrs = component?.getAttributes?.() || {};
   const style = component?.getStyle?.() || {};
-  const currentMargin = String(style[property] || "").trim();
-  const generatedMargin = String(negativePaddingValue || "").trim();
-  if (generatedMargin && currentMargin === generatedMargin) {
-    component?.addStyle?.({ [property]: "" });
-    writeStylePanelLength(property, "0px");
+  const hasLegacyNegativePadding = component?.getEl?.()?.classList.contains("orion-builder-v2-negative-padding") || legacyNegativePaddingSides.some((side) => Boolean(attrs[`data-orion-negative-padding-${side}`] || style[`--orion-negative-padding-${side}`]));
+  if (!hasLegacyNegativePadding) {
+    return;
   }
-};
-var getStoredOrionBackgroundColor = (attrs, style) => {
   const block = parseOrionBlockAttribute(attrs["data-orion-block"]);
-  return firstString(
-    attrs[negativePaddingBackgroundAttribute],
-    style[negativePaddingBackgroundVariable],
+  const backgroundColor = firstString(
+    attrs[legacyNegativePaddingBackgroundAttribute],
+    style[legacyNegativePaddingBackgroundVariable],
     attrs["data-orion-background-color"],
     block.backgroundColor
   );
-};
-var ensureNegativePaddingBackground = (component) => {
-  const attrs = component?.getAttributes?.() || {};
-  const style = component?.getStyle?.() || {};
-  if (!hasNegativePaddingState(attrs, style)) {
-    return;
-  }
-  const backgroundColor = getStoredOrionBackgroundColor(attrs, style);
-  if (backgroundColor && getStyleColorValue(style, "background-color") !== backgroundColor) {
-    component?.addStyle?.({ "background-color": backgroundColor });
+  const cleanupStyle = {
+    [legacyNegativePaddingBackgroundVariable]: ""
+  };
+  const cleanupAttributes = [legacyNegativePaddingBackgroundAttribute];
+  legacyNegativePaddingSides.forEach((side) => {
+    cleanupStyle[`--orion-negative-padding-${side}`] = "";
+    cleanupAttributes.push(`data-orion-negative-padding-${side}`);
+    component?.removeClass?.(`is-orion-negative-padding-${side}`);
+  });
+  component?.removeClass?.("orion-builder-v2-negative-padding");
+  component?.addStyle?.({
+    ...cleanupStyle,
+    ...backgroundColor ? { "background-color": backgroundColor } : {}
+  });
+  component?.removeAttributes?.(cleanupAttributes);
+  if (backgroundColor && Object.keys(block).length > 0) {
+    component?.addAttributes?.({
+      "data-orion-background-color": backgroundColor,
+      "data-orion-block": serializeOrionBlockAttribute({
+        ...block,
+        backgroundColor
+      })
+    });
   }
+  removeGeneratedSelectionMargins(component);
 };
 var spacingTargetForComponent = (component) => {
   const element = component?.getEl?.();
@@ -2241,8 +2221,7 @@ var postToParent = (payload) => {
 };
 var buildSavePayload = (editor, status, projectData) => ({
   builderMode: "grapes-v2",
-  compiledCss: scopeBuilderCss(`${negativePaddingCss}
-${editor.getCss()}`),
+  compiledCss: scopeBuilderCss(editor.getCss()),
   compiledHtml: sanitizeBuilderHtml(editor.getHtml()),
   projectData,
   status
@@ -2631,60 +2610,13 @@ function GrapesPageEditor({
     if (!selected) {
       return;
     }
-    const value = property === "font-weight" ? normalizeFontWeightValue(readStylePanelSelect(property)) || readStylePanelInput(property) : property === "opacity" ? readStylePanelInput(property) : readStylePanelLength(property) || readStylePanelInput(property) || readStylePanelSelect(property) || readStylePanelRadio(property);
+    let value = property === "font-weight" ? normalizeFontWeightValue(readStylePanelSelect(property)) || readStylePanelInput(property) : property === "opacity" ? readStylePanelInput(property) : readStylePanelLength(property) || readStylePanelInput(property) || readStylePanelSelect(property) || readStylePanelRadio(property);
     selectedComponentRef.current = selected;
     lastSelectedComponentRef.current = selected;
-    if (property.startsWith("padding-") && !String(value).trim().startsWith("-")) {
-      removeGeneratedSelectionMargins(selected);
-      const side = negativePaddingSideFromProperty(property);
-      if (side) {
-        const attrs = selected.getAttributes?.() || {};
-        const selectedStyle = selected.getStyle?.() || {};
-        const currentNegativePaddingValue = attrs[negativePaddingAttributeForSide(side)] || selectedStyle[negativePaddingVariableForSide(side)];
-        const nextNegativePaddingBySide = Object.fromEntries(
-          negativePaddingSides.map((paddingSide) => [
-            paddingSide,
-            paddingSide === side ? "" : firstString(attrs[negativePaddingAttributeForSide(paddingSide)])
-          ])
-        );
-        const hasOtherNegativePadding = negativePaddingSides.some(
-          (paddingSide) => Boolean(nextNegativePaddingBySide[paddingSide])
-        );
-        const negativePaddingBackground = getStoredOrionBackgroundColor(attrs, selectedStyle);
-        selected.removeStyle?.(negativePaddingVariableForSide(side));
-        selected.removeAttributes?.(negativePaddingAttributeForSide(side));
-        selected.removeClass?.(`is-orion-negative-padding-${side}`);
-        removeGeneratedNegativePaddingMargin(selected, side, currentNegativePaddingValue);
-        if (!hasOtherNegativePadding) {
-          if (negativePaddingBackground) {
-            selected.addStyle?.({ "background-color": negativePaddingBackground });
-            const block = parseOrionBlockAttribute(attrs["data-orion-block"]);
-            if (Object.keys(block).length > 0) {
-              selected.addAttributes?.({
-                "data-orion-background-color": negativePaddingBackground,
-                "data-orion-block": serializeOrionBlockAttribute({
-                  ...block,
-                  backgroundColor: negativePaddingBackground
-                })
-              });
-            }
-          }
-          selected.removeStyle?.(negativePaddingBackgroundVariable);
-          selected.removeAttributes?.(negativePaddingBackgroundAttribute);
-          negativePaddingSides.forEach((paddingSide) => {
-            selected.removeStyle?.(negativePaddingVariableForSide(paddingSide));
-            selected.removeAttributes?.(negativePaddingAttributeForSide(paddingSide));
-            selected.removeClass?.(`is-orion-negative-padding-${paddingSide}`);
-          });
-          selected.removeClass?.("orion-builder-v2-negative-padding");
-        } else if (negativePaddingBackground) {
-          selected.addStyle?.({
-            [negativePaddingBackgroundVariable]: negativePaddingBackground,
-            "background-color": negativePaddingBackground
-          });
-          selected.addAttributes?.({ [negativePaddingBackgroundAttribute]: negativePaddingBackground });
-        }
-      }
+    stripLegacyNegativePadding(selected);
+    if (property.startsWith("padding-") && String(value).trim().startsWith("-")) {
+      value = "0px";
+      writeStylePanelLength(property, value);
     }
     selected.addStyle?.({ [property]: value });
     editorRef.current?.select?.(selected);
@@ -2696,11 +2628,10 @@ function GrapesPageEditor({
       });
     }
   };
-  const applyNegativeSpacingInput = (property, value, baseValue) => {
+  const applyNegativeSpacingInput = (property, value) => {
     const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
-    const isPadding = property.startsWith("padding-");
     const isMargin = property.startsWith("margin-");
-    if (!selected || !isPadding && !isMargin || !value.startsWith("-")) {
+    if (!selected || !isMargin || !value.startsWith("-")) {
       return;
     }
     const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
@@ -2708,38 +2639,11 @@ function GrapesPageEditor({
     if (!Number.isFinite(adjustment)) {
       return;
     }
-    const base = isPadding ? cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0 : 0;
-    const next = isPadding ? Math.max(0, base + adjustment) : adjustment;
-    const styleValue = `${Number.isInteger(next) ? next : Number(next.toFixed(2))}${unit}`;
+    const styleValue = `${Number.isInteger(adjustment) ? adjustment : Number(adjustment.toFixed(2))}${unit}`;
     selectedComponentRef.current = selected;
     lastSelectedComponentRef.current = selected;
-    if (isPadding) {
-      const side = negativePaddingSideFromProperty(property);
-      const negativeStyleValue = `${Number.isInteger(adjustment) ? adjustment : Number(adjustment.toFixed(2))}${unit}`;
-      const currentStyle = selected.getStyle?.() || {};
-      const currentAttributes = selected.getAttributes?.() || {};
-      const backgroundColor = firstString(
-        getStoredOrionBackgroundColor(currentAttributes, currentStyle),
-        getStyleColorValue(currentStyle, "background-color")
-      );
-      selected.addClass?.("orion-builder-v2-negative-padding");
-      selected.addClass?.(`is-orion-negative-padding-${side}`);
-      removeGeneratedSelectionMargins(selected);
-      selected.addAttributes?.({
-        ...backgroundColor ? { [negativePaddingBackgroundAttribute]: backgroundColor } : {},
-        [negativePaddingAttributeForSide(side)]: negativeStyleValue
-      });
-      selected.addStyle?.({
-        ...backgroundColor ? {
-          [negativePaddingBackgroundVariable]: backgroundColor,
-          "background-color": backgroundColor
-        } : {},
-        [negativePaddingVariableForSide(side)]: negativeStyleValue,
-        [property]: "0px"
-      });
-    } else {
-      selected.addStyle?.({ [property]: styleValue });
-    }
+    stripLegacyNegativePadding(selected);
+    selected.addStyle?.({ [property]: styleValue });
     editorRef.current?.select?.(selected);
   };
   const updateSelectedOrionBlock = (updates) => {
@@ -2828,10 +2732,8 @@ function GrapesPageEditor({
     if (Object.keys(block).length === 0) {
       return;
     }
-    const targetStyle = target.getStyle?.() || {};
-    const componentStyle = component?.getStyle?.() || targetStyle;
-    const negativePaddingActive = hasNegativePaddingState(attrs, targetStyle) || hasNegativePaddingState(attrs, componentStyle);
-    const backgroundColor = negativePaddingActive ? getStoredOrionBackgroundColor(attrs, targetStyle) || getStoredOrionBackgroundColor(attrs, componentStyle) : getStyleColorValue(componentStyle || targetStyle, "background-color");
+    const componentStyle = component?.getStyle?.() || target.getStyle?.() || {};
+    const backgroundColor = getStyleColorValue(componentStyle, "background-color");
     if (!backgroundColor) {
       return;
     }
@@ -2935,15 +2837,14 @@ function GrapesPageEditor({
     const targetStyle = target.getStyle?.() || {};
     const componentStyle = component?.getStyle?.() || targetStyle;
     const styleBackgroundColor = getStyleColorValue(componentStyle || targetStyle, "background-color");
-    const negativePaddingActive = hasNegativePaddingState(attrs, targetStyle) || hasNegativePaddingState(attrs, componentStyle);
-    const backgroundColor = negativePaddingActive ? getStoredOrionBackgroundColor(attrs, targetStyle) || getStoredOrionBackgroundColor(attrs, componentStyle) : normalizeCssColorValue(panelBackgroundColor === "none" ? "" : panelBackgroundColor) || styleBackgroundColor;
+    const backgroundColor = normalizeCssColorValue(panelBackgroundColor === "none" ? "" : panelBackgroundColor) || styleBackgroundColor;
     if (!backgroundColor) {
       return;
     }
-    if (!negativePaddingActive && getStyleColorValue(targetStyle, "background-color") !== backgroundColor) {
+    if (getStyleColorValue(targetStyle, "background-color") !== backgroundColor) {
       target.addStyle?.({ "background-color": backgroundColor });
     }
-    if (!negativePaddingActive && component && component !== target && getStyleColorValue(componentStyle, "background-color") !== backgroundColor) {
+    if (component && component !== target && getStyleColorValue(componentStyle, "background-color") !== backgroundColor) {
       component.addStyle?.({ "background-color": backgroundColor });
     }
     target.addAttributes?.({
@@ -2969,9 +2870,9 @@ function GrapesPageEditor({
         if (Object.keys(block).length === 0) {
           return;
         }
+        stripLegacyNegativePadding(component);
         const style = component.getStyle?.() || {};
-        const negativePaddingActive = hasNegativePaddingState(attrs, style);
-        const backgroundColor = negativePaddingActive ? getStoredOrionBackgroundColor(attrs, style) : getStyleColorValue(style, "background-color");
+        const backgroundColor = getStyleColorValue(style, "background-color");
         if (!backgroundColor || normalizeCssColorValue(block.backgroundColor) === backgroundColor && normalizeCssColorValue(attrs["data-orion-background-color"]) === backgroundColor) {
           return;
         }
@@ -3038,7 +2939,7 @@ function GrapesPageEditor({
       return;
     }
     hydrateSelectedTypographyStyleFromOrionBlock(component);
-    ensureNegativePaddingBackground(component);
+    stripLegacyNegativePadding(component);
     rememberComponentSnapshot(component);
     markSelectedCanvasBlock(component);
     refreshSelectedState(component);
@@ -3052,18 +2953,8 @@ function GrapesPageEditor({
         return;
       }
       const computed = window.getComputedStyle(element);
-      const attrs = component.getAttributes?.() || {};
       const style = component.getStyle?.() || {};
-      if (hasNegativePaddingState(attrs, style)) {
-        removeGeneratedSelectionMargins(component);
-      }
       spacingProperties.forEach((property) => {
-        const negativePaddingSide = negativePaddingSideFromProperty(property);
-        const negativePaddingValue = negativePaddingSide ? firstString(attrs[negativePaddingAttributeForSide(negativePaddingSide)]) : "";
-        if (negativePaddingValue) {
-          writeStylePanelLength(property, negativePaddingValue);
-          return;
-        }
         if (property.startsWith("margin-")) {
           writeStylePanelLength(property, firstString(style[property], "0px"));
           return;
@@ -3914,7 +3805,7 @@ function GrapesPageEditor({
       if (!detail.property || !detail.value) {
         return;
       }
-      applyNegativeSpacingInput(detail.property, detail.value, detail.baseValue || "0");
+      applyNegativeSpacingInput(detail.property, detail.value);
     };
     const observer = new MutationObserver(() => {
       decorateBuilderControls();

package/dist/builder-v2/client.mjs

@@ -1649,22 +1649,7 @@ var quickVerticalAlignStyles = {
   middle: "center",
   top: "flex-start"
 };
-var negativePaddingCss = `
-  .orion-builder-v2-negative-padding {
-    display: flow-root;
-    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;
-    overflow: visible;
-    position: relative;
-    width: calc(100% - var(--orion-negative-padding-left, 0px) - var(--orion-negative-padding-right, 0px)) !important;
-  }
-`;
 var canvasSelectionCss = `
-  ${negativePaddingCss}
-
   .gjs-selected,
   [data-gjs-highlightable].gjs-selected {
     outline-color: #c7643d !important;
@@ -1833,14 +1818,6 @@ var readStylePanelColor = (property) => {
   return swatchColor;
 };
 var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
-var cssPixelValue = (value) => {
-  const match = value.trim().match(/^(-?\d*\.?\d+)(px)?$/i);
-  if (!match) {
-    return null;
-  }
-  const parsed = Number.parseFloat(match[1]);
-  return Number.isFinite(parsed) ? parsed : null;
-};
 var propertyNameFromStyleControl = (element) => {
   const property = element?.closest(".gjs-sm-property");
   const className = Array.from(property?.classList || []).find((name) => name.startsWith("gjs-sm-property__"));
@@ -1873,13 +1850,9 @@ var spacingProperties = [
   "padding-left",
   "padding-right"
 ];
-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 hasNegativePaddingState = (attrs, style) => negativePaddingSides.some((side) => Boolean(attrs[negativePaddingAttributeForSide(side)] || style[negativePaddingVariableForSide(side)]));
+var legacyNegativePaddingSides = ["top", "bottom", "left", "right"];
+var legacyNegativePaddingBackgroundAttribute = "data-orion-negative-padding-background";
+var legacyNegativePaddingBackgroundVariable = "--orion-negative-padding-background";
 var removeGeneratedSelectionMargins = (component) => {
   const style = component?.getStyle?.() || {};
   const cleanup = {};
@@ -1893,38 +1866,45 @@ var removeGeneratedSelectionMargins = (component) => {
     component?.addStyle?.(cleanup);
   }
 };
-var removeGeneratedNegativePaddingMargin = (component, side, negativePaddingValue) => {
-  if (side !== "top" && side !== "bottom") {
-    return;
-  }
-  const property = `margin-${side}`;
+var stripLegacyNegativePadding = (component) => {
+  const attrs = component?.getAttributes?.() || {};
   const style = component?.getStyle?.() || {};
-  const currentMargin = String(style[property] || "").trim();
-  const generatedMargin = String(negativePaddingValue || "").trim();
-  if (generatedMargin && currentMargin === generatedMargin) {
-    component?.addStyle?.({ [property]: "" });
-    writeStylePanelLength(property, "0px");
+  const hasLegacyNegativePadding = component?.getEl?.()?.classList.contains("orion-builder-v2-negative-padding") || legacyNegativePaddingSides.some((side) => Boolean(attrs[`data-orion-negative-padding-${side}`] || style[`--orion-negative-padding-${side}`]));
+  if (!hasLegacyNegativePadding) {
+    return;
   }
-};
-var getStoredOrionBackgroundColor = (attrs, style) => {
   const block = parseOrionBlockAttribute(attrs["data-orion-block"]);
-  return firstString(
-    attrs[negativePaddingBackgroundAttribute],
-    style[negativePaddingBackgroundVariable],
+  const backgroundColor = firstString(
+    attrs[legacyNegativePaddingBackgroundAttribute],
+    style[legacyNegativePaddingBackgroundVariable],
     attrs["data-orion-background-color"],
     block.backgroundColor
   );
-};
-var ensureNegativePaddingBackground = (component) => {
-  const attrs = component?.getAttributes?.() || {};
-  const style = component?.getStyle?.() || {};
-  if (!hasNegativePaddingState(attrs, style)) {
-    return;
-  }
-  const backgroundColor = getStoredOrionBackgroundColor(attrs, style);
-  if (backgroundColor && getStyleColorValue(style, "background-color") !== backgroundColor) {
-    component?.addStyle?.({ "background-color": backgroundColor });
+  const cleanupStyle = {
+    [legacyNegativePaddingBackgroundVariable]: ""
+  };
+  const cleanupAttributes = [legacyNegativePaddingBackgroundAttribute];
+  legacyNegativePaddingSides.forEach((side) => {
+    cleanupStyle[`--orion-negative-padding-${side}`] = "";
+    cleanupAttributes.push(`data-orion-negative-padding-${side}`);
+    component?.removeClass?.(`is-orion-negative-padding-${side}`);
+  });
+  component?.removeClass?.("orion-builder-v2-negative-padding");
+  component?.addStyle?.({
+    ...cleanupStyle,
+    ...backgroundColor ? { "background-color": backgroundColor } : {}
+  });
+  component?.removeAttributes?.(cleanupAttributes);
+  if (backgroundColor && Object.keys(block).length > 0) {
+    component?.addAttributes?.({
+      "data-orion-background-color": backgroundColor,
+      "data-orion-block": serializeOrionBlockAttribute({
+        ...block,
+        backgroundColor
+      })
+    });
   }
+  removeGeneratedSelectionMargins(component);
 };
 var spacingTargetForComponent = (component) => {
   const element = component?.getEl?.();
@@ -2117,8 +2097,7 @@ var postToParent = (payload) => {
 };
 var buildSavePayload = (editor, status, projectData) => ({
   builderMode: "grapes-v2",
-  compiledCss: scopeBuilderCss(`${negativePaddingCss}
-${editor.getCss()}`),
+  compiledCss: scopeBuilderCss(editor.getCss()),
   compiledHtml: sanitizeBuilderHtml(editor.getHtml()),
   projectData,
   status
@@ -2507,60 +2486,13 @@ function GrapesPageEditor({
     if (!selected) {
       return;
     }
-    const value = property === "font-weight" ? normalizeFontWeightValue(readStylePanelSelect(property)) || readStylePanelInput(property) : property === "opacity" ? readStylePanelInput(property) : readStylePanelLength(property) || readStylePanelInput(property) || readStylePanelSelect(property) || readStylePanelRadio(property);
+    let value = property === "font-weight" ? normalizeFontWeightValue(readStylePanelSelect(property)) || readStylePanelInput(property) : property === "opacity" ? readStylePanelInput(property) : readStylePanelLength(property) || readStylePanelInput(property) || readStylePanelSelect(property) || readStylePanelRadio(property);
     selectedComponentRef.current = selected;
     lastSelectedComponentRef.current = selected;
-    if (property.startsWith("padding-") && !String(value).trim().startsWith("-")) {
-      removeGeneratedSelectionMargins(selected);
-      const side = negativePaddingSideFromProperty(property);
-      if (side) {
-        const attrs = selected.getAttributes?.() || {};
-        const selectedStyle = selected.getStyle?.() || {};
-        const currentNegativePaddingValue = attrs[negativePaddingAttributeForSide(side)] || selectedStyle[negativePaddingVariableForSide(side)];
-        const nextNegativePaddingBySide = Object.fromEntries(
-          negativePaddingSides.map((paddingSide) => [
-            paddingSide,
-            paddingSide === side ? "" : firstString(attrs[negativePaddingAttributeForSide(paddingSide)])
-          ])
-        );
-        const hasOtherNegativePadding = negativePaddingSides.some(
-          (paddingSide) => Boolean(nextNegativePaddingBySide[paddingSide])
-        );
-        const negativePaddingBackground = getStoredOrionBackgroundColor(attrs, selectedStyle);
-        selected.removeStyle?.(negativePaddingVariableForSide(side));
-        selected.removeAttributes?.(negativePaddingAttributeForSide(side));
-        selected.removeClass?.(`is-orion-negative-padding-${side}`);
-        removeGeneratedNegativePaddingMargin(selected, side, currentNegativePaddingValue);
-        if (!hasOtherNegativePadding) {
-          if (negativePaddingBackground) {
-            selected.addStyle?.({ "background-color": negativePaddingBackground });
-            const block = parseOrionBlockAttribute(attrs["data-orion-block"]);
-            if (Object.keys(block).length > 0) {
-              selected.addAttributes?.({
-                "data-orion-background-color": negativePaddingBackground,
-                "data-orion-block": serializeOrionBlockAttribute({
-                  ...block,
-                  backgroundColor: negativePaddingBackground
-                })
-              });
-            }
-          }
-          selected.removeStyle?.(negativePaddingBackgroundVariable);
-          selected.removeAttributes?.(negativePaddingBackgroundAttribute);
-          negativePaddingSides.forEach((paddingSide) => {
-            selected.removeStyle?.(negativePaddingVariableForSide(paddingSide));
-            selected.removeAttributes?.(negativePaddingAttributeForSide(paddingSide));
-            selected.removeClass?.(`is-orion-negative-padding-${paddingSide}`);
-          });
-          selected.removeClass?.("orion-builder-v2-negative-padding");
-        } else if (negativePaddingBackground) {
-          selected.addStyle?.({
-            [negativePaddingBackgroundVariable]: negativePaddingBackground,
-            "background-color": negativePaddingBackground
-          });
-          selected.addAttributes?.({ [negativePaddingBackgroundAttribute]: negativePaddingBackground });
-        }
-      }
+    stripLegacyNegativePadding(selected);
+    if (property.startsWith("padding-") && String(value).trim().startsWith("-")) {
+      value = "0px";
+      writeStylePanelLength(property, value);
     }
     selected.addStyle?.({ [property]: value });
     editorRef.current?.select?.(selected);
@@ -2572,11 +2504,10 @@ function GrapesPageEditor({
       });
     }
   };
-  const applyNegativeSpacingInput = (property, value, baseValue) => {
+  const applyNegativeSpacingInput = (property, value) => {
     const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
-    const isPadding = property.startsWith("padding-");
     const isMargin = property.startsWith("margin-");
-    if (!selected || !isPadding && !isMargin || !value.startsWith("-")) {
+    if (!selected || !isMargin || !value.startsWith("-")) {
       return;
     }
     const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
@@ -2584,38 +2515,11 @@ function GrapesPageEditor({
     if (!Number.isFinite(adjustment)) {
       return;
     }
-    const base = isPadding ? cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0 : 0;
-    const next = isPadding ? Math.max(0, base + adjustment) : adjustment;
-    const styleValue = `${Number.isInteger(next) ? next : Number(next.toFixed(2))}${unit}`;
+    const styleValue = `${Number.isInteger(adjustment) ? adjustment : Number(adjustment.toFixed(2))}${unit}`;
     selectedComponentRef.current = selected;
     lastSelectedComponentRef.current = selected;
-    if (isPadding) {
-      const side = negativePaddingSideFromProperty(property);
-      const negativeStyleValue = `${Number.isInteger(adjustment) ? adjustment : Number(adjustment.toFixed(2))}${unit}`;
-      const currentStyle = selected.getStyle?.() || {};
-      const currentAttributes = selected.getAttributes?.() || {};
-      const backgroundColor = firstString(
-        getStoredOrionBackgroundColor(currentAttributes, currentStyle),
-        getStyleColorValue(currentStyle, "background-color")
-      );
-      selected.addClass?.("orion-builder-v2-negative-padding");
-      selected.addClass?.(`is-orion-negative-padding-${side}`);
-      removeGeneratedSelectionMargins(selected);
-      selected.addAttributes?.({
-        ...backgroundColor ? { [negativePaddingBackgroundAttribute]: backgroundColor } : {},
-        [negativePaddingAttributeForSide(side)]: negativeStyleValue
-      });
-      selected.addStyle?.({
-        ...backgroundColor ? {
-          [negativePaddingBackgroundVariable]: backgroundColor,
-          "background-color": backgroundColor
-        } : {},
-        [negativePaddingVariableForSide(side)]: negativeStyleValue,
-        [property]: "0px"
-      });
-    } else {
-      selected.addStyle?.({ [property]: styleValue });
-    }
+    stripLegacyNegativePadding(selected);
+    selected.addStyle?.({ [property]: styleValue });
     editorRef.current?.select?.(selected);
   };
   const updateSelectedOrionBlock = (updates) => {
@@ -2704,10 +2608,8 @@ function GrapesPageEditor({
     if (Object.keys(block).length === 0) {
       return;
     }
-    const targetStyle = target.getStyle?.() || {};
-    const componentStyle = component?.getStyle?.() || targetStyle;
-    const negativePaddingActive = hasNegativePaddingState(attrs, targetStyle) || hasNegativePaddingState(attrs, componentStyle);
-    const backgroundColor = negativePaddingActive ? getStoredOrionBackgroundColor(attrs, targetStyle) || getStoredOrionBackgroundColor(attrs, componentStyle) : getStyleColorValue(componentStyle || targetStyle, "background-color");
+    const componentStyle = component?.getStyle?.() || target.getStyle?.() || {};
+    const backgroundColor = getStyleColorValue(componentStyle, "background-color");
     if (!backgroundColor) {
       return;
     }
@@ -2811,15 +2713,14 @@ function GrapesPageEditor({
     const targetStyle = target.getStyle?.() || {};
     const componentStyle = component?.getStyle?.() || targetStyle;
     const styleBackgroundColor = getStyleColorValue(componentStyle || targetStyle, "background-color");
-    const negativePaddingActive = hasNegativePaddingState(attrs, targetStyle) || hasNegativePaddingState(attrs, componentStyle);
-    const backgroundColor = negativePaddingActive ? getStoredOrionBackgroundColor(attrs, targetStyle) || getStoredOrionBackgroundColor(attrs, componentStyle) : normalizeCssColorValue(panelBackgroundColor === "none" ? "" : panelBackgroundColor) || styleBackgroundColor;
+    const backgroundColor = normalizeCssColorValue(panelBackgroundColor === "none" ? "" : panelBackgroundColor) || styleBackgroundColor;
     if (!backgroundColor) {
       return;
     }
-    if (!negativePaddingActive && getStyleColorValue(targetStyle, "background-color") !== backgroundColor) {
+    if (getStyleColorValue(targetStyle, "background-color") !== backgroundColor) {
       target.addStyle?.({ "background-color": backgroundColor });
     }
-    if (!negativePaddingActive && component && component !== target && getStyleColorValue(componentStyle, "background-color") !== backgroundColor) {
+    if (component && component !== target && getStyleColorValue(componentStyle, "background-color") !== backgroundColor) {
       component.addStyle?.({ "background-color": backgroundColor });
     }
     target.addAttributes?.({
@@ -2845,9 +2746,9 @@ function GrapesPageEditor({
         if (Object.keys(block).length === 0) {
           return;
         }
+        stripLegacyNegativePadding(component);
         const style = component.getStyle?.() || {};
-        const negativePaddingActive = hasNegativePaddingState(attrs, style);
-        const backgroundColor = negativePaddingActive ? getStoredOrionBackgroundColor(attrs, style) : getStyleColorValue(style, "background-color");
+        const backgroundColor = getStyleColorValue(style, "background-color");
         if (!backgroundColor || normalizeCssColorValue(block.backgroundColor) === backgroundColor && normalizeCssColorValue(attrs["data-orion-background-color"]) === backgroundColor) {
           return;
         }
@@ -2914,7 +2815,7 @@ function GrapesPageEditor({
       return;
     }
     hydrateSelectedTypographyStyleFromOrionBlock(component);
-    ensureNegativePaddingBackground(component);
+    stripLegacyNegativePadding(component);
     rememberComponentSnapshot(component);
     markSelectedCanvasBlock(component);
     refreshSelectedState(component);
@@ -2928,18 +2829,8 @@ function GrapesPageEditor({
         return;
       }
       const computed = window.getComputedStyle(element);
-      const attrs = component.getAttributes?.() || {};
       const style = component.getStyle?.() || {};
-      if (hasNegativePaddingState(attrs, style)) {
-        removeGeneratedSelectionMargins(component);
-      }
       spacingProperties.forEach((property) => {
-        const negativePaddingSide = negativePaddingSideFromProperty(property);
-        const negativePaddingValue = negativePaddingSide ? firstString(attrs[negativePaddingAttributeForSide(negativePaddingSide)]) : "";
-        if (negativePaddingValue) {
-          writeStylePanelLength(property, negativePaddingValue);
-          return;
-        }
         if (property.startsWith("margin-")) {
           writeStylePanelLength(property, firstString(style[property], "0px"));
           return;
@@ -3790,7 +3681,7 @@ function GrapesPageEditor({
       if (!detail.property || !detail.value) {
         return;
       }
-      applyNegativeSpacingInput(detail.property, detail.value, detail.baseValue || "0");
+      applyNegativeSpacingInput(detail.property, detail.value);
     };
     const observer = new MutationObserver(() => {
       decorateBuilderControls();

package/dist/index.mjs

@@ -1,25 +1,25 @@
 import {
   admin_exports
-} from "./chunk-KHK6RTGC.mjs";
+} from "./chunk-JC3UV74N.mjs";
+import {
+  blocks_exports
+} from "./chunk-JQAHXYAM.mjs";
+import {
+  admin_app_exports
+} from "./chunk-RKTIFEUY.mjs";
+import "./chunk-W2UOCJDX.mjs";
 import {
   nextjs_exports
 } from "./chunk-ZADL33R6.mjs";
 import "./chunk-ZTXJG4K5.mjs";
-import {
-  blocks_exports
-} from "./chunk-JQAHXYAM.mjs";
 import {
   studio_pages_exports
-} from "./chunk-276KAPGM.mjs";
-import "./chunk-7ZMXZRBP.mjs";
+} from "./chunk-NGLIA2OE.mjs";
 import "./chunk-OQSEJXC4.mjs";
+import "./chunk-7ZMXZRBP.mjs";
 import {
   studio_exports
 } from "./chunk-ADIIWIYL.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,14 +7,14 @@ import {
   pageStudioModuleManifest,
   resolveBuilderThemeTokens,
   toEditorInitialDoc
-} from "../chunk-276KAPGM.mjs";
+} from "../chunk-NGLIA2OE.mjs";
+import "../chunk-OQSEJXC4.mjs";
 import {
   createDefaultStudioDocument,
   defaultBuilderThemeTokens,
   layoutToStudioDocument,
   studioDocumentToLayout
 } from "../chunk-7ZMXZRBP.mjs";
-import "../chunk-OQSEJXC4.mjs";
 import "../chunk-ADIIWIYL.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.6.0-beta.181",
+  "version": "0.6.0-beta.182",
   "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-276KAPGM.mjs → chunk-NGLIA2OE.mjs}

@@ -1,3 +1,6 @@
+import {
+  sectionStyleDefaults
+} from "./chunk-OQSEJXC4.mjs";
 import {
   createDefaultStudioDocument,
   defaultBuilderThemeTokens,
@@ -5,9 +8,6 @@ import {
   migrateBlockToSettingsV2,
   studioDocumentToLayout
 } from "./chunk-7ZMXZRBP.mjs";
-import {
-  sectionStyleDefaults
-} from "./chunk-OQSEJXC4.mjs";
 import {
   assertStudioDocumentV1,
   compileStudioDocument,