@orion-studios/payload-studio 0.6.0-beta.157 → 0.6.0-beta.159

package/dist/builder-v2/client.js

@@ -1402,9 +1402,10 @@ var decorateBuilderNumericSteppers = (root = document) => {
     if (property.startsWith("padding-")) {
       const keepNegativePaddingValue = (event) => {
         if (!input.value.trim().startsWith("-")) {
+          delete input.dataset.orionRawValue;
           return;
         }
-        event.stopPropagation();
+        input.dataset.orionRawValue = input.value.trim();
       };
       input.addEventListener("input", keepNegativePaddingValue, true);
       input.addEventListener("change", keepNegativePaddingValue, true);
@@ -1425,8 +1426,14 @@ var decorateBuilderNumericSteppers = (root = document) => {
             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;
             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 }
+              })
+            );
             return;
           }
           if (value2.startsWith("-") && (event.key === "Backspace" || event.key === "Delete")) {
@@ -1903,7 +1910,8 @@ var readStylePanelValue = (property) => {
 };
 var readStylePanelLength = (property) => {
   const control = readStylePanelValue(property);
-  const value = control?.querySelector("input")?.value.trim() || "";
+  const input = control?.querySelector("input");
+  const value = (input?.dataset.orionRawValue || input?.value || "").trim();
   const unit = control?.querySelector("select")?.value.trim() || "";
   if (!value) {
     return "";
@@ -1925,6 +1933,7 @@ var readStylePanelColor = (property) => {
   return swatchColor;
 };
 var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
+var negativePaddingMarginProperty = (property) => property === "padding-top" ? "margin-top" : property === "padding-right" ? "margin-right" : property === "padding-bottom" ? "margin-bottom" : property === "padding-left" ? "margin-left" : "";
 var propertyNameFromStyleControl = (element) => {
   const property = element?.closest(".gjs-sm-property");
   const className = Array.from(property?.classList || []).find((name) => name.startsWith("gjs-sm-property__"));
@@ -2540,7 +2549,23 @@ 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;
-    selected.addStyle?.({ [property]: value });
+    const negativePaddingMargin = value.startsWith("-") ? negativePaddingMarginProperty(property) : "";
+    selected.addStyle?.(
+      negativePaddingMargin ? { [property]: "0px", [negativePaddingMargin]: value } : { [property]: value }
+    );
+    editorRef.current?.select?.(selected);
+  };
+  const applyNegativePaddingInput = (property, value) => {
+    const negativePaddingMargin = negativePaddingMarginProperty(property);
+    const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
+    if (!selected || !negativePaddingMargin || !value.startsWith("-")) {
+      return;
+    }
+    const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
+    const styleValue = `${value}${unit}`;
+    selectedComponentRef.current = selected;
+    lastSelectedComponentRef.current = selected;
+    selected.addStyle?.({ [property]: "0px", [negativePaddingMargin]: styleValue });
     editorRef.current?.select?.(selected);
   };
   const updateSelectedOrionBlock = (updates) => {
@@ -3608,6 +3633,9 @@ function GrapesPageEditor({
     const onStylePanelInput = (event) => {
       const target = event.target;
       if (target?.closest("#orion-builder-v2-styles")) {
+        if (target?.dataset?.orionRawValue?.startsWith("-")) {
+          return;
+        }
         const activeElement = document.activeElement;
         if (!sidebarPointerActiveRef.current && !activeElement?.closest("#orion-builder-v2-styles")) {
           return;
@@ -3662,6 +3690,13 @@ function GrapesPageEditor({
       closeBuilderHelpPopovers(wrapper);
       openBuilderHelpPopover(helpTrigger, wrapper, willOpen);
     };
+    const onNegativePaddingInput = (event) => {
+      const detail = event.detail || {};
+      if (!detail.property || !detail.value) {
+        return;
+      }
+      applyNegativePaddingInput(detail.property, detail.value);
+    };
     const observer = new MutationObserver(() => {
       decorateBuilderControls();
     });
@@ -3675,6 +3710,7 @@ function GrapesPageEditor({
     document.addEventListener("input", refreshControls);
     document.addEventListener("input", onStylePanelInput, true);
     document.addEventListener("keydown", onDocumentKeydown, true);
+    window.addEventListener("orion-builder-v2-negative-padding-input", onNegativePaddingInput);
     return () => {
       observer.disconnect();
       document.removeEventListener("change", refreshControls);
@@ -3683,6 +3719,7 @@ function GrapesPageEditor({
       document.removeEventListener("input", refreshControls);
       document.removeEventListener("input", onStylePanelInput, true);
       document.removeEventListener("keydown", onDocumentKeydown, true);
+      window.removeEventListener("orion-builder-v2-negative-padding-input", onNegativePaddingInput);
     };
   }, []);
   (0, import_react.useEffect)(() => {

package/dist/builder-v2/client.mjs

@@ -1278,9 +1278,10 @@ var decorateBuilderNumericSteppers = (root = document) => {
     if (property.startsWith("padding-")) {
       const keepNegativePaddingValue = (event) => {
         if (!input.value.trim().startsWith("-")) {
+          delete input.dataset.orionRawValue;
           return;
         }
-        event.stopPropagation();
+        input.dataset.orionRawValue = input.value.trim();
       };
       input.addEventListener("input", keepNegativePaddingValue, true);
       input.addEventListener("change", keepNegativePaddingValue, true);
@@ -1301,8 +1302,14 @@ var decorateBuilderNumericSteppers = (root = document) => {
             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;
             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 }
+              })
+            );
             return;
           }
           if (value2.startsWith("-") && (event.key === "Backspace" || event.key === "Delete")) {
@@ -1779,7 +1786,8 @@ var readStylePanelValue = (property) => {
 };
 var readStylePanelLength = (property) => {
   const control = readStylePanelValue(property);
-  const value = control?.querySelector("input")?.value.trim() || "";
+  const input = control?.querySelector("input");
+  const value = (input?.dataset.orionRawValue || input?.value || "").trim();
   const unit = control?.querySelector("select")?.value.trim() || "";
   if (!value) {
     return "";
@@ -1801,6 +1809,7 @@ var readStylePanelColor = (property) => {
   return swatchColor;
 };
 var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
+var negativePaddingMarginProperty = (property) => property === "padding-top" ? "margin-top" : property === "padding-right" ? "margin-right" : property === "padding-bottom" ? "margin-bottom" : property === "padding-left" ? "margin-left" : "";
 var propertyNameFromStyleControl = (element) => {
   const property = element?.closest(".gjs-sm-property");
   const className = Array.from(property?.classList || []).find((name) => name.startsWith("gjs-sm-property__"));
@@ -2416,7 +2425,23 @@ 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;
-    selected.addStyle?.({ [property]: value });
+    const negativePaddingMargin = value.startsWith("-") ? negativePaddingMarginProperty(property) : "";
+    selected.addStyle?.(
+      negativePaddingMargin ? { [property]: "0px", [negativePaddingMargin]: value } : { [property]: value }
+    );
+    editorRef.current?.select?.(selected);
+  };
+  const applyNegativePaddingInput = (property, value) => {
+    const negativePaddingMargin = negativePaddingMarginProperty(property);
+    const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
+    if (!selected || !negativePaddingMargin || !value.startsWith("-")) {
+      return;
+    }
+    const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
+    const styleValue = `${value}${unit}`;
+    selectedComponentRef.current = selected;
+    lastSelectedComponentRef.current = selected;
+    selected.addStyle?.({ [property]: "0px", [negativePaddingMargin]: styleValue });
     editorRef.current?.select?.(selected);
   };
   const updateSelectedOrionBlock = (updates) => {
@@ -3484,6 +3509,9 @@ function GrapesPageEditor({
     const onStylePanelInput = (event) => {
       const target = event.target;
       if (target?.closest("#orion-builder-v2-styles")) {
+        if (target?.dataset?.orionRawValue?.startsWith("-")) {
+          return;
+        }
         const activeElement = document.activeElement;
         if (!sidebarPointerActiveRef.current && !activeElement?.closest("#orion-builder-v2-styles")) {
           return;
@@ -3538,6 +3566,13 @@ function GrapesPageEditor({
       closeBuilderHelpPopovers(wrapper);
       openBuilderHelpPopover(helpTrigger, wrapper, willOpen);
     };
+    const onNegativePaddingInput = (event) => {
+      const detail = event.detail || {};
+      if (!detail.property || !detail.value) {
+        return;
+      }
+      applyNegativePaddingInput(detail.property, detail.value);
+    };
     const observer = new MutationObserver(() => {
       decorateBuilderControls();
     });
@@ -3551,6 +3586,7 @@ function GrapesPageEditor({
     document.addEventListener("input", refreshControls);
     document.addEventListener("input", onStylePanelInput, true);
     document.addEventListener("keydown", onDocumentKeydown, true);
+    window.addEventListener("orion-builder-v2-negative-padding-input", onNegativePaddingInput);
     return () => {
       observer.disconnect();
       document.removeEventListener("change", refreshControls);
@@ -3559,6 +3595,7 @@ function GrapesPageEditor({
       document.removeEventListener("input", refreshControls);
       document.removeEventListener("input", onStylePanelInput, true);
       document.removeEventListener("keydown", onDocumentKeydown, true);
+      window.removeEventListener("orion-builder-v2-negative-padding-input", onNegativePaddingInput);
     };
   }, []);
   useEffect(() => {

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.157",
+  "version": "0.6.0-beta.159",
   "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";