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

package/dist/builder-v2/client.js

@@ -1399,7 +1399,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
     input.type = "text";
     input.inputMode = "decimal";
     field.querySelector("select")?.setAttribute("tabindex", "-1");
-    if (property.startsWith("padding-")) {
+    if (property.startsWith("padding-") || property.startsWith("margin-")) {
       input.addEventListener("input", () => {
         if (input.value.trim().startsWith("-")) {
           return;
@@ -1411,12 +1411,17 @@ var decorateBuilderNumericSteppers = (root = document) => {
     input.addEventListener(
       "keydown",
       (event) => {
-        if (property.startsWith("padding-")) {
+        if (property.startsWith("padding-") || property.startsWith("margin-")) {
           const selectionStart2 = input.selectionStart ?? 0;
           const selectionEnd2 = input.selectionEnd ?? selectionStart2;
           const value2 = input.dataset.orionPaddingDraft || input.value || "";
           const isReplacingAll = selectionStart2 === 0 && selectionEnd2 === value2.length;
           const isNegativeEntry = value2.startsWith("-") || Boolean(input.dataset.orionPaddingDraft?.startsWith("-")) || event.key === "-";
+          if (input.dataset.orionPaddingDraft?.startsWith("-") && isReplacingAll && event.key !== "-" && event.key.length === 1 && /^[.\d]$/.test(event.key)) {
+            delete input.dataset.orionPaddingBase;
+            delete input.dataset.orionPaddingDraft;
+            return;
+          }
           if (isNegativeEntry && event.key.length === 1 && /^[-.\d]$/.test(event.key)) {
             event.preventDefault();
             event.stopImmediatePropagation();
@@ -1431,7 +1436,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
             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", {
+              new CustomEvent("orion-builder-v2-negative-spacing-input", {
                 detail: { baseValue: input.dataset.orionPaddingBase || "0", property, value: nextValue2 }
               })
             );
@@ -2560,18 +2565,20 @@ function GrapesPageEditor({
     selected.addStyle?.({ [property]: value });
     editorRef.current?.select?.(selected);
   };
-  const applyNegativePaddingInput = (property, value, baseValue) => {
+  const applyNegativeSpacingInput = (property, value, baseValue) => {
     const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
-    if (!selected || !property.startsWith("padding-") || !value.startsWith("-")) {
+    const isPadding = property.startsWith("padding-");
+    const isMargin = property.startsWith("margin-");
+    if (!selected || !isPadding && !isMargin || !value.startsWith("-")) {
       return;
     }
     const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
-    const base = cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0;
     const adjustment = Number.parseFloat(value);
     if (!Number.isFinite(adjustment)) {
       return;
     }
-    const next = Math.max(0, base + adjustment);
+    const base = isPadding ? cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0 : 0;
+    const next = isPadding ? Math.max(0, base + adjustment) : adjustment;
     const styleValue = `${Number.isInteger(next) ? next : Number(next.toFixed(2))}${unit}`;
     selectedComponentRef.current = selected;
     lastSelectedComponentRef.current = selected;
@@ -3713,12 +3720,12 @@ function GrapesPageEditor({
       closeBuilderHelpPopovers(wrapper);
       openBuilderHelpPopover(helpTrigger, wrapper, willOpen);
     };
-    const onNegativePaddingInput = (event) => {
+    const onNegativeSpacingInput = (event) => {
       const detail = event.detail || {};
       if (!detail.property || !detail.value) {
         return;
       }
-      applyNegativePaddingInput(detail.property, detail.value, detail.baseValue || "0");
+      applyNegativeSpacingInput(detail.property, detail.value, detail.baseValue || "0");
     };
     const observer = new MutationObserver(() => {
       decorateBuilderControls();
@@ -3733,7 +3740,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);
+    window.addEventListener("orion-builder-v2-negative-spacing-input", onNegativeSpacingInput);
     return () => {
       observer.disconnect();
       document.removeEventListener("change", refreshControls);
@@ -3742,7 +3749,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);
+      window.removeEventListener("orion-builder-v2-negative-spacing-input", onNegativeSpacingInput);
     };
   }, []);
   (0, import_react.useEffect)(() => {

package/dist/builder-v2/client.mjs

@@ -1275,7 +1275,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
     input.type = "text";
     input.inputMode = "decimal";
     field.querySelector("select")?.setAttribute("tabindex", "-1");
-    if (property.startsWith("padding-")) {
+    if (property.startsWith("padding-") || property.startsWith("margin-")) {
       input.addEventListener("input", () => {
         if (input.value.trim().startsWith("-")) {
           return;
@@ -1287,12 +1287,17 @@ var decorateBuilderNumericSteppers = (root = document) => {
     input.addEventListener(
       "keydown",
       (event) => {
-        if (property.startsWith("padding-")) {
+        if (property.startsWith("padding-") || property.startsWith("margin-")) {
           const selectionStart2 = input.selectionStart ?? 0;
           const selectionEnd2 = input.selectionEnd ?? selectionStart2;
           const value2 = input.dataset.orionPaddingDraft || input.value || "";
           const isReplacingAll = selectionStart2 === 0 && selectionEnd2 === value2.length;
           const isNegativeEntry = value2.startsWith("-") || Boolean(input.dataset.orionPaddingDraft?.startsWith("-")) || event.key === "-";
+          if (input.dataset.orionPaddingDraft?.startsWith("-") && isReplacingAll && event.key !== "-" && event.key.length === 1 && /^[.\d]$/.test(event.key)) {
+            delete input.dataset.orionPaddingBase;
+            delete input.dataset.orionPaddingDraft;
+            return;
+          }
           if (isNegativeEntry && event.key.length === 1 && /^[-.\d]$/.test(event.key)) {
             event.preventDefault();
             event.stopImmediatePropagation();
@@ -1307,7 +1312,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
             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", {
+              new CustomEvent("orion-builder-v2-negative-spacing-input", {
                 detail: { baseValue: input.dataset.orionPaddingBase || "0", property, value: nextValue2 }
               })
             );
@@ -2436,18 +2441,20 @@ function GrapesPageEditor({
     selected.addStyle?.({ [property]: value });
     editorRef.current?.select?.(selected);
   };
-  const applyNegativePaddingInput = (property, value, baseValue) => {
+  const applyNegativeSpacingInput = (property, value, baseValue) => {
     const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
-    if (!selected || !property.startsWith("padding-") || !value.startsWith("-")) {
+    const isPadding = property.startsWith("padding-");
+    const isMargin = property.startsWith("margin-");
+    if (!selected || !isPadding && !isMargin || !value.startsWith("-")) {
       return;
     }
     const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
-    const base = cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0;
     const adjustment = Number.parseFloat(value);
     if (!Number.isFinite(adjustment)) {
       return;
     }
-    const next = Math.max(0, base + adjustment);
+    const base = isPadding ? cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0 : 0;
+    const next = isPadding ? Math.max(0, base + adjustment) : adjustment;
     const styleValue = `${Number.isInteger(next) ? next : Number(next.toFixed(2))}${unit}`;
     selectedComponentRef.current = selected;
     lastSelectedComponentRef.current = selected;
@@ -3589,12 +3596,12 @@ function GrapesPageEditor({
       closeBuilderHelpPopovers(wrapper);
       openBuilderHelpPopover(helpTrigger, wrapper, willOpen);
     };
-    const onNegativePaddingInput = (event) => {
+    const onNegativeSpacingInput = (event) => {
       const detail = event.detail || {};
       if (!detail.property || !detail.value) {
         return;
       }
-      applyNegativePaddingInput(detail.property, detail.value, detail.baseValue || "0");
+      applyNegativeSpacingInput(detail.property, detail.value, detail.baseValue || "0");
     };
     const observer = new MutationObserver(() => {
       decorateBuilderControls();
@@ -3609,7 +3616,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);
+    window.addEventListener("orion-builder-v2-negative-spacing-input", onNegativeSpacingInput);
     return () => {
       observer.disconnect();
       document.removeEventListener("change", refreshControls);
@@ -3618,7 +3625,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);
+      window.removeEventListener("orion-builder-v2-negative-spacing-input", onNegativeSpacingInput);
     };
   }, []);
   useEffect(() => {

package/dist/index.mjs

@@ -10,12 +10,12 @@ import {
 } from "./chunk-JQAHXYAM.mjs";
 import {
   studio_pages_exports
-} from "./chunk-276KAPGM.mjs";
+} from "./chunk-7HME6R2V.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-276KAPGM.mjs";
+} from "../chunk-7HME6R2V.mjs";
 import {
   createDefaultStudioDocument,
   defaultBuilderThemeTokens,
   layoutToStudioDocument,
   studioDocumentToLayout
 } from "../chunk-7ZMXZRBP.mjs";
-import "../chunk-OQSEJXC4.mjs";
 import "../chunk-ADIIWIYL.mjs";
+import "../chunk-OQSEJXC4.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {
   createDefaultStudioDocument,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.6.0-beta.165",
+  "version": "0.6.0-beta.167",
   "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",

package/dist/{chunk-276KAPGM.mjs → chunk-7HME6R2V.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";