@orion-studios/payload-studio 0.6.0-beta.177 → 0.6.0-beta.179

package/dist/builder-v2/client.js

@@ -1909,7 +1909,8 @@ var normalizeCssColorValue = (value) => {
     return "";
   }
   const trimmed = value.trim();
-  return trimmed && trimmed !== "none" ? trimmed : "";
+  const normalized = trimmed.toLowerCase();
+  return trimmed && normalized !== "none" && normalized !== "transparent" && normalized !== "rgba(0, 0, 0, 0)" ? trimmed : "";
 };
 var getStyleColorValue = (style, property) => normalizeCssColorValue(
   style[property] || style[property.replace(/-([a-z])/g, (_, char) => char.toUpperCase())]
@@ -2025,6 +2026,33 @@ var negativePaddingAttributeForSide = (side) => `data-orion-negative-padding-${s
 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 removeGeneratedSelectionMargins = (component) => {
+  const style = component?.getStyle?.() || {};
+  const cleanup = {};
+  ["margin-top", "margin-bottom"].forEach((property) => {
+    const value = String(style[property] || "").trim();
+    if (value === "-2px" || value === "-2") {
+      cleanup[property] = "";
+    }
+  });
+  if (Object.keys(cleanup).length > 0) {
+    component?.addStyle?.(cleanup);
+  }
+};
+var removeGeneratedNegativePaddingMargin = (component, side, negativePaddingValue) => {
+  if (side !== "top" && side !== "bottom") {
+    return;
+  }
+  const property = `margin-${side}`;
+  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");
+  }
+};
 var getStoredOrionBackgroundColor = (attrs, style) => {
   const block = parseOrionBlockAttribute(attrs["data-orion-block"]);
   return firstString(
@@ -2619,10 +2647,12 @@ function GrapesPageEditor({
     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,
@@ -2636,9 +2666,20 @@ function GrapesPageEditor({
         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);
@@ -2659,6 +2700,13 @@ function GrapesPageEditor({
     }
     selected.addStyle?.({ [property]: value });
     editorRef.current?.select?.(selected);
+    if (property.startsWith("padding-")) {
+      window.requestAnimationFrame(() => {
+        spacingProperties.filter((spacingProperty) => spacingProperty.startsWith("margin-")).forEach((spacingProperty) => {
+          writeStylePanelLength(spacingProperty, firstString(selected.getStyle?.()?.[spacingProperty], "0px"));
+        });
+      });
+    }
   };
   const applyNegativeSpacingInput = (property, value, baseValue) => {
     const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
@@ -2688,6 +2736,7 @@ function GrapesPageEditor({
       );
       selected.addClass?.("orion-builder-v2-negative-padding");
       selected.addClass?.(`is-orion-negative-padding-${side}`);
+      removeGeneratedSelectionMargins(selected);
       selected.addAttributes?.({
         ...backgroundColor ? { [negativePaddingBackgroundAttribute]: backgroundColor } : {},
         [negativePaddingAttributeForSide(side)]: negativeStyleValue
@@ -2791,7 +2840,10 @@ function GrapesPageEditor({
     if (Object.keys(block).length === 0) {
       return;
     }
-    const backgroundColor = getStyleColorValue(component?.getStyle?.() || target.getStyle?.() || {}, "background-color");
+    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");
     if (!backgroundColor) {
       return;
     }
@@ -2892,15 +2944,18 @@ function GrapesPageEditor({
       return;
     }
     const panelBackgroundColor = normalizeCssColorValue(readStylePanelColor("background-color"));
-    const styleBackgroundColor = getStyleColorValue(component?.getStyle?.() || target.getStyle?.() || {}, "background-color");
-    const backgroundColor = normalizeCssColorValue(panelBackgroundColor === "none" ? "" : panelBackgroundColor) || styleBackgroundColor;
+    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;
     if (!backgroundColor) {
       return;
     }
-    if (getStyleColorValue(target.getStyle?.() || {}, "background-color") !== backgroundColor) {
+    if (!negativePaddingActive && getStyleColorValue(targetStyle, "background-color") !== backgroundColor) {
       target.addStyle?.({ "background-color": backgroundColor });
     }
-    if (component && component !== target && getStyleColorValue(component.getStyle?.() || {}, "background-color") !== backgroundColor) {
+    if (!negativePaddingActive && component && component !== target && getStyleColorValue(componentStyle, "background-color") !== backgroundColor) {
       component.addStyle?.({ "background-color": backgroundColor });
     }
     target.addAttributes?.({
@@ -2926,7 +2981,9 @@ function GrapesPageEditor({
         if (Object.keys(block).length === 0) {
           return;
         }
-        const backgroundColor = getStyleColorValue(component.getStyle?.() || {}, "background-color");
+        const style = component.getStyle?.() || {};
+        const negativePaddingActive = hasNegativePaddingState(attrs, style);
+        const backgroundColor = negativePaddingActive ? getStoredOrionBackgroundColor(attrs, style) : getStyleColorValue(style, "background-color");
         if (!backgroundColor || normalizeCssColorValue(block.backgroundColor) === backgroundColor && normalizeCssColorValue(attrs["data-orion-background-color"]) === backgroundColor) {
           return;
         }
@@ -2996,7 +3053,11 @@ function GrapesPageEditor({
     rememberComponentSnapshot(component);
     markSelectedCanvasBlock(component);
     refreshSelectedState(component);
-    window.requestAnimationFrame(() => {
+    const writeSpacingControls = () => {
+      const activeComponent = selectedComponentRef.current;
+      if (!activeComponent || component !== activeComponent && getCurrentOrionBlockTarget(component) !== activeComponent) {
+        return;
+      }
       const element = spacingTargetForComponent(component);
       if (!element) {
         return;
@@ -3004,6 +3065,9 @@ function GrapesPageEditor({
       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)]) : "";
@@ -3012,12 +3076,16 @@ function GrapesPageEditor({
           return;
         }
         if (property.startsWith("margin-")) {
-          writeStylePanelLength(property, firstString(style[property], computed.getPropertyValue(property)));
+          writeStylePanelLength(property, firstString(style[property], "0px"));
           return;
         }
         writeStylePanelLength(property, computed.getPropertyValue(property));
       });
-    });
+    };
+    window.requestAnimationFrame(writeSpacingControls);
+    window.setTimeout(writeSpacingControls, 80);
+    window.setTimeout(writeSpacingControls, 240);
+    window.setTimeout(writeSpacingControls, 600);
   };
   const applyQuickLayout = (layout) => {
     const component = selectedComponentRef.current;

package/dist/builder-v2/client.mjs

@@ -1785,7 +1785,8 @@ var normalizeCssColorValue = (value) => {
     return "";
   }
   const trimmed = value.trim();
-  return trimmed && trimmed !== "none" ? trimmed : "";
+  const normalized = trimmed.toLowerCase();
+  return trimmed && normalized !== "none" && normalized !== "transparent" && normalized !== "rgba(0, 0, 0, 0)" ? trimmed : "";
 };
 var getStyleColorValue = (style, property) => normalizeCssColorValue(
   style[property] || style[property.replace(/-([a-z])/g, (_, char) => char.toUpperCase())]
@@ -1901,6 +1902,33 @@ var negativePaddingAttributeForSide = (side) => `data-orion-negative-padding-${s
 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 removeGeneratedSelectionMargins = (component) => {
+  const style = component?.getStyle?.() || {};
+  const cleanup = {};
+  ["margin-top", "margin-bottom"].forEach((property) => {
+    const value = String(style[property] || "").trim();
+    if (value === "-2px" || value === "-2") {
+      cleanup[property] = "";
+    }
+  });
+  if (Object.keys(cleanup).length > 0) {
+    component?.addStyle?.(cleanup);
+  }
+};
+var removeGeneratedNegativePaddingMargin = (component, side, negativePaddingValue) => {
+  if (side !== "top" && side !== "bottom") {
+    return;
+  }
+  const property = `margin-${side}`;
+  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");
+  }
+};
 var getStoredOrionBackgroundColor = (attrs, style) => {
   const block = parseOrionBlockAttribute(attrs["data-orion-block"]);
   return firstString(
@@ -2495,10 +2523,12 @@ function GrapesPageEditor({
     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,
@@ -2512,9 +2542,20 @@ function GrapesPageEditor({
         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);
@@ -2535,6 +2576,13 @@ function GrapesPageEditor({
     }
     selected.addStyle?.({ [property]: value });
     editorRef.current?.select?.(selected);
+    if (property.startsWith("padding-")) {
+      window.requestAnimationFrame(() => {
+        spacingProperties.filter((spacingProperty) => spacingProperty.startsWith("margin-")).forEach((spacingProperty) => {
+          writeStylePanelLength(spacingProperty, firstString(selected.getStyle?.()?.[spacingProperty], "0px"));
+        });
+      });
+    }
   };
   const applyNegativeSpacingInput = (property, value, baseValue) => {
     const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
@@ -2564,6 +2612,7 @@ function GrapesPageEditor({
       );
       selected.addClass?.("orion-builder-v2-negative-padding");
       selected.addClass?.(`is-orion-negative-padding-${side}`);
+      removeGeneratedSelectionMargins(selected);
       selected.addAttributes?.({
         ...backgroundColor ? { [negativePaddingBackgroundAttribute]: backgroundColor } : {},
         [negativePaddingAttributeForSide(side)]: negativeStyleValue
@@ -2667,7 +2716,10 @@ function GrapesPageEditor({
     if (Object.keys(block).length === 0) {
       return;
     }
-    const backgroundColor = getStyleColorValue(component?.getStyle?.() || target.getStyle?.() || {}, "background-color");
+    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");
     if (!backgroundColor) {
       return;
     }
@@ -2768,15 +2820,18 @@ function GrapesPageEditor({
       return;
     }
     const panelBackgroundColor = normalizeCssColorValue(readStylePanelColor("background-color"));
-    const styleBackgroundColor = getStyleColorValue(component?.getStyle?.() || target.getStyle?.() || {}, "background-color");
-    const backgroundColor = normalizeCssColorValue(panelBackgroundColor === "none" ? "" : panelBackgroundColor) || styleBackgroundColor;
+    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;
     if (!backgroundColor) {
       return;
     }
-    if (getStyleColorValue(target.getStyle?.() || {}, "background-color") !== backgroundColor) {
+    if (!negativePaddingActive && getStyleColorValue(targetStyle, "background-color") !== backgroundColor) {
       target.addStyle?.({ "background-color": backgroundColor });
     }
-    if (component && component !== target && getStyleColorValue(component.getStyle?.() || {}, "background-color") !== backgroundColor) {
+    if (!negativePaddingActive && component && component !== target && getStyleColorValue(componentStyle, "background-color") !== backgroundColor) {
       component.addStyle?.({ "background-color": backgroundColor });
     }
     target.addAttributes?.({
@@ -2802,7 +2857,9 @@ function GrapesPageEditor({
         if (Object.keys(block).length === 0) {
           return;
         }
-        const backgroundColor = getStyleColorValue(component.getStyle?.() || {}, "background-color");
+        const style = component.getStyle?.() || {};
+        const negativePaddingActive = hasNegativePaddingState(attrs, style);
+        const backgroundColor = negativePaddingActive ? getStoredOrionBackgroundColor(attrs, style) : getStyleColorValue(style, "background-color");
         if (!backgroundColor || normalizeCssColorValue(block.backgroundColor) === backgroundColor && normalizeCssColorValue(attrs["data-orion-background-color"]) === backgroundColor) {
           return;
         }
@@ -2872,7 +2929,11 @@ function GrapesPageEditor({
     rememberComponentSnapshot(component);
     markSelectedCanvasBlock(component);
     refreshSelectedState(component);
-    window.requestAnimationFrame(() => {
+    const writeSpacingControls = () => {
+      const activeComponent = selectedComponentRef.current;
+      if (!activeComponent || component !== activeComponent && getCurrentOrionBlockTarget(component) !== activeComponent) {
+        return;
+      }
       const element = spacingTargetForComponent(component);
       if (!element) {
         return;
@@ -2880,6 +2941,9 @@ function GrapesPageEditor({
       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)]) : "";
@@ -2888,12 +2952,16 @@ function GrapesPageEditor({
           return;
         }
         if (property.startsWith("margin-")) {
-          writeStylePanelLength(property, firstString(style[property], computed.getPropertyValue(property)));
+          writeStylePanelLength(property, firstString(style[property], "0px"));
           return;
         }
         writeStylePanelLength(property, computed.getPropertyValue(property));
       });
-    });
+    };
+    window.requestAnimationFrame(writeSpacingControls);
+    window.setTimeout(writeSpacingControls, 80);
+    window.setTimeout(writeSpacingControls, 240);
+    window.setTimeout(writeSpacingControls, 600);
   };
   const applyQuickLayout = (layout) => {
     const component = selectedComponentRef.current;

package/dist/index.mjs

@@ -5,21 +5,21 @@ import {
   nextjs_exports
 } from "./chunk-ZADL33R6.mjs";
 import "./chunk-ZTXJG4K5.mjs";
-import {
-  studio_pages_exports
-} from "./chunk-7HME6R2V.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 {
+  studio_pages_exports
+} from "./chunk-276KAPGM.mjs";
+import "./chunk-7ZMXZRBP.mjs";
+import "./chunk-OQSEJXC4.mjs";
+import {
+  studio_exports
+} from "./chunk-ADIIWIYL.mjs";
 import "./chunk-6BWS3CLP.mjs";
 export {
   admin_exports as admin,

package/dist/studio-pages/index.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.6.0-beta.177",
+  "version": "0.6.0-beta.179",
   "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
@@ -139,6 +139,7 @@
     "typescript": "^5.3.0"
   },
   "dependencies": {
+    "@orion-studios/payload-studio": "file:",
     "grapesjs": "^0.22.16",
     "sanitize-html": "^2.17.3"
   }

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

@@ -5,15 +5,15 @@ import {
   migrateBlockToSettingsV2,
   studioDocumentToLayout
 } from "./chunk-7ZMXZRBP.mjs";
+import {
+  sectionStyleDefaults
+} from "./chunk-OQSEJXC4.mjs";
 import {
   assertStudioDocumentV1,
   compileStudioDocument,
   createEmptyStudioDocument,
   validateStudioDocument
 } from "./chunk-ADIIWIYL.mjs";
-import {
-  sectionStyleDefaults
-} from "./chunk-OQSEJXC4.mjs";
 import {
   __export
 } from "./chunk-6BWS3CLP.mjs";