@orion-studios/payload-studio 0.6.0-beta.168 → 0.6.0-beta.169

package/dist/builder-v2/client.js

@@ -1772,7 +1772,21 @@ var quickVerticalAlignStyles = {
   middle: "center",
   top: "flex-start"
 };
+var negativePaddingCss = `
+  .orion-builder-v2-negative-padding {
+    overflow: visible;
+  }
+
+  .orion-builder-v2-negative-padding > * {
+    margin-top: var(--orion-negative-padding-top, 0px);
+    margin-right: var(--orion-negative-padding-right, 0px);
+    margin-bottom: var(--orion-negative-padding-bottom, 0px);
+    margin-left: var(--orion-negative-padding-left, 0px);
+  }
+`;
 var canvasSelectionCss = `
+  ${negativePaddingCss}
+
   .gjs-selected,
   [data-gjs-highlightable].gjs-selected {
     outline-color: #c7643d !important;
@@ -1980,6 +1994,10 @@ 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 spacingTargetForComponent = (component) => {
   const element = component?.getEl?.();
   return element || null;
@@ -2171,7 +2189,8 @@ var postToParent = (payload) => {
 };
 var buildSavePayload = (editor, status, projectData) => ({
   builderMode: "grapes-v2",
-  compiledCss: scopeBuilderCss(editor.getCss()),
+  compiledCss: scopeBuilderCss(`${negativePaddingCss}
+${editor.getCss()}`),
   compiledHtml: sanitizeBuilderHtml(editor.getHtml()),
   projectData,
   status
@@ -2563,6 +2582,20 @@ function GrapesPageEditor({
     const 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("-")) {
+      const side = negativePaddingSideFromProperty(property);
+      if (side) {
+        selected.removeStyle?.(negativePaddingVariableForSide(side));
+        selected.removeAttributes?.(negativePaddingAttributeForSide(side));
+        const attrs = selected.getAttributes?.() || {};
+        const hasOtherNegativePadding = negativePaddingSides.some(
+          (paddingSide) => paddingSide !== side && Boolean(attrs[negativePaddingAttributeForSide(paddingSide)])
+        );
+        if (!hasOtherNegativePadding) {
+          selected.removeClass?.("orion-builder-v2-negative-padding");
+        }
+      }
+    }
     selected.addStyle?.({ [property]: value });
     editorRef.current?.select?.(selected);
   };
@@ -2583,7 +2616,18 @@ function GrapesPageEditor({
     const styleValue = `${Number.isInteger(next) ? next : Number(next.toFixed(2))}${unit}`;
     selectedComponentRef.current = selected;
     lastSelectedComponentRef.current = selected;
-    selected.addStyle?.({ [property]: styleValue });
+    if (isPadding) {
+      const side = negativePaddingSideFromProperty(property);
+      const negativeStyleValue = `${Number.isInteger(adjustment) ? adjustment : Number(adjustment.toFixed(2))}${unit}`;
+      selected.addClass?.("orion-builder-v2-negative-padding");
+      selected.addAttributes?.({ [negativePaddingAttributeForSide(side)]: negativeStyleValue });
+      selected.addStyle?.({
+        [negativePaddingVariableForSide(side)]: negativeStyleValue,
+        [property]: "0px"
+      });
+    } else {
+      selected.addStyle?.({ [property]: styleValue });
+    }
     editorRef.current?.select?.(selected);
   };
   const updateSelectedOrionBlock = (updates) => {
@@ -2883,7 +2927,14 @@ function GrapesPageEditor({
         return;
       }
       const computed = window.getComputedStyle(element);
+      const attrs = component.getAttributes?.() || {};
       spacingProperties.forEach((property) => {
+        const negativePaddingSide = negativePaddingSideFromProperty(property);
+        const negativePaddingValue = negativePaddingSide ? firstString(attrs[negativePaddingAttributeForSide(negativePaddingSide)]) : "";
+        if (negativePaddingValue) {
+          writeStylePanelLength(property, negativePaddingValue);
+          return;
+        }
         writeStylePanelLength(property, computed.getPropertyValue(property));
       });
     });

package/dist/builder-v2/client.mjs

@@ -1648,7 +1648,21 @@ var quickVerticalAlignStyles = {
   middle: "center",
   top: "flex-start"
 };
+var negativePaddingCss = `
+  .orion-builder-v2-negative-padding {
+    overflow: visible;
+  }
+
+  .orion-builder-v2-negative-padding > * {
+    margin-top: var(--orion-negative-padding-top, 0px);
+    margin-right: var(--orion-negative-padding-right, 0px);
+    margin-bottom: var(--orion-negative-padding-bottom, 0px);
+    margin-left: var(--orion-negative-padding-left, 0px);
+  }
+`;
 var canvasSelectionCss = `
+  ${negativePaddingCss}
+
   .gjs-selected,
   [data-gjs-highlightable].gjs-selected {
     outline-color: #c7643d !important;
@@ -1856,6 +1870,10 @@ 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 spacingTargetForComponent = (component) => {
   const element = component?.getEl?.();
   return element || null;
@@ -2047,7 +2065,8 @@ var postToParent = (payload) => {
 };
 var buildSavePayload = (editor, status, projectData) => ({
   builderMode: "grapes-v2",
-  compiledCss: scopeBuilderCss(editor.getCss()),
+  compiledCss: scopeBuilderCss(`${negativePaddingCss}
+${editor.getCss()}`),
   compiledHtml: sanitizeBuilderHtml(editor.getHtml()),
   projectData,
   status
@@ -2439,6 +2458,20 @@ function GrapesPageEditor({
     const 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("-")) {
+      const side = negativePaddingSideFromProperty(property);
+      if (side) {
+        selected.removeStyle?.(negativePaddingVariableForSide(side));
+        selected.removeAttributes?.(negativePaddingAttributeForSide(side));
+        const attrs = selected.getAttributes?.() || {};
+        const hasOtherNegativePadding = negativePaddingSides.some(
+          (paddingSide) => paddingSide !== side && Boolean(attrs[negativePaddingAttributeForSide(paddingSide)])
+        );
+        if (!hasOtherNegativePadding) {
+          selected.removeClass?.("orion-builder-v2-negative-padding");
+        }
+      }
+    }
     selected.addStyle?.({ [property]: value });
     editorRef.current?.select?.(selected);
   };
@@ -2459,7 +2492,18 @@ function GrapesPageEditor({
     const styleValue = `${Number.isInteger(next) ? next : Number(next.toFixed(2))}${unit}`;
     selectedComponentRef.current = selected;
     lastSelectedComponentRef.current = selected;
-    selected.addStyle?.({ [property]: styleValue });
+    if (isPadding) {
+      const side = negativePaddingSideFromProperty(property);
+      const negativeStyleValue = `${Number.isInteger(adjustment) ? adjustment : Number(adjustment.toFixed(2))}${unit}`;
+      selected.addClass?.("orion-builder-v2-negative-padding");
+      selected.addAttributes?.({ [negativePaddingAttributeForSide(side)]: negativeStyleValue });
+      selected.addStyle?.({
+        [negativePaddingVariableForSide(side)]: negativeStyleValue,
+        [property]: "0px"
+      });
+    } else {
+      selected.addStyle?.({ [property]: styleValue });
+    }
     editorRef.current?.select?.(selected);
   };
   const updateSelectedOrionBlock = (updates) => {
@@ -2759,7 +2803,14 @@ function GrapesPageEditor({
         return;
       }
       const computed = window.getComputedStyle(element);
+      const attrs = component.getAttributes?.() || {};
       spacingProperties.forEach((property) => {
+        const negativePaddingSide = negativePaddingSideFromProperty(property);
+        const negativePaddingValue = negativePaddingSide ? firstString(attrs[negativePaddingAttributeForSide(negativePaddingSide)]) : "";
+        if (negativePaddingValue) {
+          writeStylePanelLength(property, negativePaddingValue);
+          return;
+        }
         writeStylePanelLength(property, computed.getPropertyValue(property));
       });
     });

package/dist/index.mjs

@@ -10,12 +10,12 @@ import {
 } from "./chunk-JQAHXYAM.mjs";
 import {
   studio_pages_exports
-} from "./chunk-7HME6R2V.mjs";
+} from "./chunk-276KAPGM.mjs";
 import "./chunk-7ZMXZRBP.mjs";
+import "./chunk-OQSEJXC4.mjs";
 import {
   studio_exports
 } from "./chunk-ADIIWIYL.mjs";
-import "./chunk-OQSEJXC4.mjs";
 import {
   admin_app_exports
 } from "./chunk-RKTIFEUY.mjs";

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.168",
+  "version": "0.6.0-beta.169",
   "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",

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";