@orion-studios/payload-studio 0.6.0-beta.157 → 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);
@@ -1425,8 +1426,10 @@ 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);
+            input.dispatchEvent(new InputEvent("input", { bubbles: true, inputType: "insertText" }));
             return;
           }
           if (value2.startsWith("-") && (event.key === "Backspace" || event.key === "Delete")) {
@@ -1903,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 "";
@@ -1925,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__"));
@@ -2540,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);
@@ -1301,8 +1302,10 @@ 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);
+            input.dispatchEvent(new InputEvent("input", { bubbles: true, inputType: "insertText" }));
             return;
           }
           if (value2.startsWith("-") && (event.key === "Backspace" || event.key === "Delete")) {
@@ -1779,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 "";
@@ -1801,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__"));
@@ -2416,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,18 +8,18 @@ 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-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";
-import "./chunk-W2UOCJDX.mjs";
 import "./chunk-6BWS3CLP.mjs";
 export {
   admin_exports as admin,

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.158",
   "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";