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

package/dist/builder-v2/client.js

@@ -1429,7 +1429,11 @@ var decorateBuilderNumericSteppers = (root = document) => {
             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" }));
+            window.dispatchEvent(
+              new CustomEvent("orion-builder-v2-negative-padding-input", {
+                detail: { property, value: nextValue2 }
+              })
+            );
             return;
           }
           if (value2.startsWith("-") && (event.key === "Backspace" || event.key === "Delete")) {
@@ -2551,6 +2555,19 @@ function GrapesPageEditor({
     );
     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) => {
     const component = selectedComponentRef.current;
     if (!component) {
@@ -3616,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;
@@ -3670,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();
     });
@@ -3683,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);
@@ -3691,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

@@ -1305,7 +1305,11 @@ var decorateBuilderNumericSteppers = (root = document) => {
             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" }));
+            window.dispatchEvent(
+              new CustomEvent("orion-builder-v2-negative-padding-input", {
+                detail: { property, value: nextValue2 }
+              })
+            );
             return;
           }
           if (value2.startsWith("-") && (event.key === "Backspace" || event.key === "Delete")) {
@@ -2427,6 +2431,19 @@ function GrapesPageEditor({
     );
     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) => {
     const component = selectedComponentRef.current;
     if (!component) {
@@ -3492,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;
@@ -3546,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();
     });
@@ -3559,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);
@@ -3567,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

@@ -8,10 +8,6 @@ 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";
@@ -20,6 +16,10 @@ 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.158",
+  "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",