@orion-studios/payload-studio 0.6.0-beta.178 → 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())]
@@ -2026,6 +2027,32 @@ 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(
@@ -2620,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,
@@ -2637,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);
@@ -2660,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());
@@ -2689,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
@@ -2792,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;
     }
@@ -3002,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;
@@ -3010,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)]) : "";
@@ -3018,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())]
@@ -1902,6 +1903,32 @@ 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(
@@ -2496,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,
@@ -2513,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);
@@ -2536,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());
@@ -2565,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
@@ -2668,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;
     }
@@ -2878,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;
@@ -2886,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)]) : "";
@@ -2894,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

@@ -8,6 +8,10 @@ import "./chunk-ZTXJG4K5.mjs";
 import {
   blocks_exports
 } from "./chunk-JQAHXYAM.mjs";
+import {
+  admin_app_exports
+} from "./chunk-RKTIFEUY.mjs";
+import "./chunk-W2UOCJDX.mjs";
 import {
   studio_pages_exports
 } from "./chunk-276KAPGM.mjs";
@@ -16,10 +20,6 @@ import "./chunk-OQSEJXC4.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.6.0-beta.178",
+  "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"
   }