@orion-studios/payload-studio 0.6.0-beta.156 → 0.6.0-beta.158

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);
@@ -1412,6 +1413,29 @@ var decorateBuilderNumericSteppers = (root = document) => {
     input.addEventListener(
       "keydown",
       (event) => {
+        if (property.startsWith("padding-")) {
+          const selectionStart2 = input.selectionStart ?? 0;
+          const selectionEnd2 = input.selectionEnd ?? selectionStart2;
+          const value2 = input.value || "";
+          const isReplacingAll = selectionStart2 === 0 && selectionEnd2 === value2.length;
+          const isNegativeEntry = value2.startsWith("-") || event.key === "-";
+          if (isNegativeEntry && event.key.length === 1 && /^[-.\d]$/.test(event.key)) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            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;
+            const nextCursor2 = Math.min((isReplacingAll ? 0 : selectionStart2) + inserted.length, nextValue2.length);
+            input.setSelectionRange(nextCursor2, nextCursor2);
+            input.dispatchEvent(new InputEvent("input", { bubbles: true, inputType: "insertText" }));
+            return;
+          }
+          if (value2.startsWith("-") && (event.key === "Backspace" || event.key === "Delete")) {
+            return;
+          }
+        }
         if (event.key !== "-" || event.metaKey || event.ctrlKey || event.altKey) {
           return;
         }
@@ -1882,7 +1906,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 "";
@@ -1904,6 +1929,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__"));
@@ -2519,7 +2545,10 @@ 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 updateSelectedOrionBlock = (updates) => {

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);
@@ -1288,6 +1289,29 @@ var decorateBuilderNumericSteppers = (root = document) => {
     input.addEventListener(
       "keydown",
       (event) => {
+        if (property.startsWith("padding-")) {
+          const selectionStart2 = input.selectionStart ?? 0;
+          const selectionEnd2 = input.selectionEnd ?? selectionStart2;
+          const value2 = input.value || "";
+          const isReplacingAll = selectionStart2 === 0 && selectionEnd2 === value2.length;
+          const isNegativeEntry = value2.startsWith("-") || event.key === "-";
+          if (isNegativeEntry && event.key.length === 1 && /^[-.\d]$/.test(event.key)) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            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;
+            const nextCursor2 = Math.min((isReplacingAll ? 0 : selectionStart2) + inserted.length, nextValue2.length);
+            input.setSelectionRange(nextCursor2, nextCursor2);
+            input.dispatchEvent(new InputEvent("input", { bubbles: true, inputType: "insertText" }));
+            return;
+          }
+          if (value2.startsWith("-") && (event.key === "Backspace" || event.key === "Delete")) {
+            return;
+          }
+        }
         if (event.key !== "-" || event.metaKey || event.ctrlKey || event.altKey) {
           return;
         }
@@ -1758,7 +1782,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 "";
@@ -1780,6 +1805,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__"));
@@ -2395,7 +2421,10 @@ 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 updateSelectedOrionBlock = (updates) => {

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