@orion-studios/payload-studio 0.6.0-beta.163 → 0.6.0-beta.165

package/dist/builder-v2/client.js

@@ -1400,15 +1400,13 @@ var decorateBuilderNumericSteppers = (root = document) => {
     input.inputMode = "decimal";
     field.querySelector("select")?.setAttribute("tabindex", "-1");
     if (property.startsWith("padding-")) {
-      const keepNegativePaddingValue = (event) => {
-        if (!input.value.trim().startsWith("-")) {
-          delete input.dataset.orionRawValue;
+      input.addEventListener("input", () => {
+        if (input.value.trim().startsWith("-")) {
           return;
         }
-        input.dataset.orionRawValue = input.value.trim();
-      };
-      input.addEventListener("input", keepNegativePaddingValue, true);
-      input.addEventListener("change", keepNegativePaddingValue, true);
+        delete input.dataset.orionPaddingBase;
+        delete input.dataset.orionPaddingDraft;
+      });
     }
     input.addEventListener(
       "keydown",
@@ -1416,25 +1414,25 @@ var decorateBuilderNumericSteppers = (root = document) => {
         if (property.startsWith("padding-")) {
           const selectionStart2 = input.selectionStart ?? 0;
           const selectionEnd2 = input.selectionEnd ?? selectionStart2;
-          const value2 = input.dataset.orionRawValue || input.value || "";
+          const value2 = input.dataset.orionPaddingDraft || input.value || "";
           const isReplacingAll = selectionStart2 === 0 && selectionEnd2 === value2.length;
-          const isNegativeEntry = value2.startsWith("-") || Boolean(input.dataset.orionRawValue?.startsWith("-")) || event.key === "-";
+          const isNegativeEntry = value2.startsWith("-") || Boolean(input.dataset.orionPaddingDraft?.startsWith("-")) || event.key === "-";
           if (isNegativeEntry && event.key.length === 1 && /^[-.\d]$/.test(event.key)) {
             event.preventDefault();
             event.stopImmediatePropagation();
-            if (!input.dataset.orionRawValue) {
+            if (!input.dataset.orionPaddingDraft) {
               input.dataset.orionPaddingBase = input.value || "0";
             }
             const inserted = event.key === "-" ? "-" : event.key;
             const rawValue = value2.startsWith("-") && event.key === "-" && selectionStart2 === 0 && selectionEnd2 <= 1 ? value2.slice(1) : isReplacingAll ? inserted : `${value2.slice(0, selectionStart2)}${inserted}${value2.slice(selectionEnd2)}`;
             const nextValue2 = rawValue.replace(/(?!^)-/g, "").replace(/^(-?[^.]*\.).*\./, "$1");
             input.value = nextValue2;
-            input.dataset.orionRawValue = nextValue2;
+            input.dataset.orionPaddingDraft = nextValue2;
             const nextCursor2 = Math.min((isReplacingAll ? 0 : selectionStart2) + inserted.length, nextValue2.length);
             input.setSelectionRange(nextCursor2, nextCursor2);
             window.dispatchEvent(
               new CustomEvent("orion-builder-v2-negative-padding-input", {
-                detail: { property, value: nextValue2 }
+                detail: { baseValue: input.dataset.orionPaddingBase || "0", property, value: nextValue2 }
               })
             );
             return;
@@ -1914,7 +1912,7 @@ var readStylePanelValue = (property) => {
 var readStylePanelLength = (property) => {
   const control = readStylePanelValue(property);
   const input = control?.querySelector("input");
-  const value = (input?.dataset.orionRawValue || input?.value || "").trim();
+  const value = (input?.value || "").trim();
   const unit = control?.querySelector("select")?.value.trim() || "";
   if (!value) {
     return "";
@@ -1936,13 +1934,14 @@ var readStylePanelColor = (property) => {
   return swatchColor;
 };
 var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
-var negativePaddingVariableForProperty = (property) => property === "padding-top" ? "--orion-builder-negative-padding-top" : property === "padding-right" ? "--orion-builder-negative-padding-right" : property === "padding-bottom" ? "--orion-builder-negative-padding-bottom" : property === "padding-left" ? "--orion-builder-negative-padding-left" : "";
-var negativePaddingVariables = [
-  "--orion-builder-negative-padding-top",
-  "--orion-builder-negative-padding-right",
-  "--orion-builder-negative-padding-bottom",
-  "--orion-builder-negative-padding-left"
-];
+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__"));
@@ -2558,41 +2557,25 @@ 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-") && !value.startsWith("-")) {
-      clearNegativePaddingForProperty(selected, property);
-    }
     selected.addStyle?.({ [property]: value });
     editorRef.current?.select?.(selected);
   };
-  const clearNegativePaddingForProperty = (component, property) => {
-    const variable = negativePaddingVariableForProperty(property);
-    if (!variable) {
-      return;
-    }
-    component.removeStyle?.(variable);
-    const style = component.getStyle?.() || {};
-    const hasNegativePadding = negativePaddingVariables.some((candidate) => candidate !== variable && Boolean(style[candidate]));
-    if (!hasNegativePadding) {
-      component.removeClass?.("orion-builder-v2-has-negative-padding");
-    }
-  };
-  const applyNegativePaddingInput = (property, value) => {
+  const applyNegativePaddingInput = (property, value, baseValue) => {
     const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
-    const variable = negativePaddingVariableForProperty(property);
-    if (!selected || !variable || !value.startsWith("-")) {
+    if (!selected || !property.startsWith("padding-") || !value.startsWith("-")) {
       return;
     }
     const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
-    const amount = Math.abs(Number.parseFloat(value));
-    if (!Number.isFinite(amount) || amount <= 0) {
-      clearNegativePaddingForProperty(selected, property);
+    const base = cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0;
+    const adjustment = Number.parseFloat(value);
+    if (!Number.isFinite(adjustment)) {
       return;
     }
-    const styleValue = `${Number.isInteger(amount) ? amount : Number(amount.toFixed(2))}${unit}`;
+    const next = Math.max(0, base + adjustment);
+    const styleValue = `${Number.isInteger(next) ? next : Number(next.toFixed(2))}${unit}`;
     selectedComponentRef.current = selected;
     lastSelectedComponentRef.current = selected;
-    selected.addClass?.("orion-builder-v2-has-negative-padding");
-    selected.addStyle?.({ [variable]: styleValue });
+    selected.addStyle?.({ [property]: styleValue });
     editorRef.current?.select?.(selected);
   };
   const updateSelectedOrionBlock = (updates) => {
@@ -3673,7 +3656,7 @@ function GrapesPageEditor({
     const onStylePanelInput = (event) => {
       const target = event.target;
       if (target?.closest("#orion-builder-v2-styles")) {
-        if (target?.dataset?.orionRawValue?.startsWith("-")) {
+        if (target?.dataset?.orionPaddingDraft?.startsWith("-")) {
           return;
         }
         const activeElement = document.activeElement;
@@ -3735,7 +3718,7 @@ function GrapesPageEditor({
       if (!detail.property || !detail.value) {
         return;
       }
-      applyNegativePaddingInput(detail.property, detail.value);
+      applyNegativePaddingInput(detail.property, detail.value, detail.baseValue || "0");
     };
     const observer = new MutationObserver(() => {
       decorateBuilderControls();

package/dist/builder-v2/client.mjs

@@ -1276,15 +1276,13 @@ var decorateBuilderNumericSteppers = (root = document) => {
     input.inputMode = "decimal";
     field.querySelector("select")?.setAttribute("tabindex", "-1");
     if (property.startsWith("padding-")) {
-      const keepNegativePaddingValue = (event) => {
-        if (!input.value.trim().startsWith("-")) {
-          delete input.dataset.orionRawValue;
+      input.addEventListener("input", () => {
+        if (input.value.trim().startsWith("-")) {
           return;
         }
-        input.dataset.orionRawValue = input.value.trim();
-      };
-      input.addEventListener("input", keepNegativePaddingValue, true);
-      input.addEventListener("change", keepNegativePaddingValue, true);
+        delete input.dataset.orionPaddingBase;
+        delete input.dataset.orionPaddingDraft;
+      });
     }
     input.addEventListener(
       "keydown",
@@ -1292,25 +1290,25 @@ var decorateBuilderNumericSteppers = (root = document) => {
         if (property.startsWith("padding-")) {
           const selectionStart2 = input.selectionStart ?? 0;
           const selectionEnd2 = input.selectionEnd ?? selectionStart2;
-          const value2 = input.dataset.orionRawValue || input.value || "";
+          const value2 = input.dataset.orionPaddingDraft || input.value || "";
           const isReplacingAll = selectionStart2 === 0 && selectionEnd2 === value2.length;
-          const isNegativeEntry = value2.startsWith("-") || Boolean(input.dataset.orionRawValue?.startsWith("-")) || event.key === "-";
+          const isNegativeEntry = value2.startsWith("-") || Boolean(input.dataset.orionPaddingDraft?.startsWith("-")) || event.key === "-";
           if (isNegativeEntry && event.key.length === 1 && /^[-.\d]$/.test(event.key)) {
             event.preventDefault();
             event.stopImmediatePropagation();
-            if (!input.dataset.orionRawValue) {
+            if (!input.dataset.orionPaddingDraft) {
               input.dataset.orionPaddingBase = input.value || "0";
             }
             const inserted = event.key === "-" ? "-" : event.key;
             const rawValue = value2.startsWith("-") && event.key === "-" && selectionStart2 === 0 && selectionEnd2 <= 1 ? value2.slice(1) : isReplacingAll ? inserted : `${value2.slice(0, selectionStart2)}${inserted}${value2.slice(selectionEnd2)}`;
             const nextValue2 = rawValue.replace(/(?!^)-/g, "").replace(/^(-?[^.]*\.).*\./, "$1");
             input.value = nextValue2;
-            input.dataset.orionRawValue = nextValue2;
+            input.dataset.orionPaddingDraft = nextValue2;
             const nextCursor2 = Math.min((isReplacingAll ? 0 : selectionStart2) + inserted.length, nextValue2.length);
             input.setSelectionRange(nextCursor2, nextCursor2);
             window.dispatchEvent(
               new CustomEvent("orion-builder-v2-negative-padding-input", {
-                detail: { property, value: nextValue2 }
+                detail: { baseValue: input.dataset.orionPaddingBase || "0", property, value: nextValue2 }
               })
             );
             return;
@@ -1790,7 +1788,7 @@ var readStylePanelValue = (property) => {
 var readStylePanelLength = (property) => {
   const control = readStylePanelValue(property);
   const input = control?.querySelector("input");
-  const value = (input?.dataset.orionRawValue || input?.value || "").trim();
+  const value = (input?.value || "").trim();
   const unit = control?.querySelector("select")?.value.trim() || "";
   if (!value) {
     return "";
@@ -1812,13 +1810,14 @@ var readStylePanelColor = (property) => {
   return swatchColor;
 };
 var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
-var negativePaddingVariableForProperty = (property) => property === "padding-top" ? "--orion-builder-negative-padding-top" : property === "padding-right" ? "--orion-builder-negative-padding-right" : property === "padding-bottom" ? "--orion-builder-negative-padding-bottom" : property === "padding-left" ? "--orion-builder-negative-padding-left" : "";
-var negativePaddingVariables = [
-  "--orion-builder-negative-padding-top",
-  "--orion-builder-negative-padding-right",
-  "--orion-builder-negative-padding-bottom",
-  "--orion-builder-negative-padding-left"
-];
+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__"));
@@ -2434,41 +2433,25 @@ 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-") && !value.startsWith("-")) {
-      clearNegativePaddingForProperty(selected, property);
-    }
     selected.addStyle?.({ [property]: value });
     editorRef.current?.select?.(selected);
   };
-  const clearNegativePaddingForProperty = (component, property) => {
-    const variable = negativePaddingVariableForProperty(property);
-    if (!variable) {
-      return;
-    }
-    component.removeStyle?.(variable);
-    const style = component.getStyle?.() || {};
-    const hasNegativePadding = negativePaddingVariables.some((candidate) => candidate !== variable && Boolean(style[candidate]));
-    if (!hasNegativePadding) {
-      component.removeClass?.("orion-builder-v2-has-negative-padding");
-    }
-  };
-  const applyNegativePaddingInput = (property, value) => {
+  const applyNegativePaddingInput = (property, value, baseValue) => {
     const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
-    const variable = negativePaddingVariableForProperty(property);
-    if (!selected || !variable || !value.startsWith("-")) {
+    if (!selected || !property.startsWith("padding-") || !value.startsWith("-")) {
       return;
     }
     const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
-    const amount = Math.abs(Number.parseFloat(value));
-    if (!Number.isFinite(amount) || amount <= 0) {
-      clearNegativePaddingForProperty(selected, property);
+    const base = cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0;
+    const adjustment = Number.parseFloat(value);
+    if (!Number.isFinite(adjustment)) {
       return;
     }
-    const styleValue = `${Number.isInteger(amount) ? amount : Number(amount.toFixed(2))}${unit}`;
+    const next = Math.max(0, base + adjustment);
+    const styleValue = `${Number.isInteger(next) ? next : Number(next.toFixed(2))}${unit}`;
     selectedComponentRef.current = selected;
     lastSelectedComponentRef.current = selected;
-    selected.addClass?.("orion-builder-v2-has-negative-padding");
-    selected.addStyle?.({ [variable]: styleValue });
+    selected.addStyle?.({ [property]: styleValue });
     editorRef.current?.select?.(selected);
   };
   const updateSelectedOrionBlock = (updates) => {
@@ -3549,7 +3532,7 @@ function GrapesPageEditor({
     const onStylePanelInput = (event) => {
       const target = event.target;
       if (target?.closest("#orion-builder-v2-styles")) {
-        if (target?.dataset?.orionRawValue?.startsWith("-")) {
+        if (target?.dataset?.orionPaddingDraft?.startsWith("-")) {
           return;
         }
         const activeElement = document.activeElement;
@@ -3611,7 +3594,7 @@ function GrapesPageEditor({
       if (!detail.property || !detail.value) {
         return;
       }
-      applyNegativePaddingInput(detail.property, detail.value);
+      applyNegativePaddingInput(detail.property, detail.value, detail.baseValue || "0");
     };
     const observer = new MutationObserver(() => {
       decorateBuilderControls();

package/dist/builder-v2/styles.css

@@ -2385,14 +2385,6 @@
   letter-spacing: 0;
 }
 
-.orion-builder-v2-has-negative-padding > .xo-builder-preview,
-.orion-builder-v2-runtime .orion-builder-v2-has-negative-padding > * {
-  margin-top: calc(var(--orion-builder-negative-padding-top, 0px) * -1) !important;
-  margin-right: calc(var(--orion-builder-negative-padding-right, 0px) * -1) !important;
-  margin-bottom: calc(var(--orion-builder-negative-padding-bottom, 0px) * -1) !important;
-  margin-left: calc(var(--orion-builder-negative-padding-left, 0px) * -1) !important;
-}
-
 .xo-builder-preview *,
 .xo-builder-preview *::before,
 .xo-builder-preview *::after {

package/dist/index.mjs

@@ -1,18 +1,18 @@
 import {
   admin_exports
 } from "./chunk-KHK6RTGC.mjs";
-import {
-  blocks_exports
-} from "./chunk-JQAHXYAM.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-NGLIA2OE.mjs";
-import "./chunk-OQSEJXC4.mjs";
+} from "./chunk-276KAPGM.mjs";
 import "./chunk-7ZMXZRBP.mjs";
+import "./chunk-OQSEJXC4.mjs";
 import {
   studio_exports
 } from "./chunk-ADIIWIYL.mjs";

package/dist/studio-pages/index.mjs

@@ -7,14 +7,14 @@ import {
   pageStudioModuleManifest,
   resolveBuilderThemeTokens,
   toEditorInitialDoc
-} from "../chunk-NGLIA2OE.mjs";
-import "../chunk-OQSEJXC4.mjs";
+} from "../chunk-276KAPGM.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.163",
+  "version": "0.6.0-beta.165",
   "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",

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

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