@orion-studios/payload-studio 0.6.0-beta.161 → 0.6.0-beta.163

package/dist/builder-v2/client.js

@@ -1434,7 +1434,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
             input.setSelectionRange(nextCursor2, nextCursor2);
             window.dispatchEvent(
               new CustomEvent("orion-builder-v2-negative-padding-input", {
-                detail: { baseValue: input.dataset.orionPaddingBase || "0", property, value: nextValue2 }
+                detail: { property, value: nextValue2 }
               })
             );
             return;
@@ -1936,14 +1936,13 @@ var readStylePanelColor = (property) => {
   return swatchColor;
 };
 var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
-var cssPixelValue = (value) => {
-  const match = value.trim().match(/^(-?\d*\.?\d+)(px)?$/i);
-  if (!match) {
-    return null;
-  }
-  const parsed = Number.parseFloat(match[1]);
-  return Number.isFinite(parsed) ? parsed : null;
-};
+var negativePaddingVariableForProperty = (property) => property === "padding-top" ? "--orion-builder-negative-padding-top" : property === "padding-right" ? "--orion-builder-negative-padding-right" : property === "padding-bottom" ? "--orion-builder-negative-padding-bottom" : property === "padding-left" ? "--orion-builder-negative-padding-left" : "";
+var negativePaddingVariables = [
+  "--orion-builder-negative-padding-top",
+  "--orion-builder-negative-padding-right",
+  "--orion-builder-negative-padding-bottom",
+  "--orion-builder-negative-padding-left"
+];
 var propertyNameFromStyleControl = (element) => {
   const property = element?.closest(".gjs-sm-property");
   const className = Array.from(property?.classList || []).find((name) => name.startsWith("gjs-sm-property__"));
@@ -2559,22 +2558,41 @@ 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;
+    if (property.startsWith("padding-") && !value.startsWith("-")) {
+      clearNegativePaddingForProperty(selected, property);
+    }
     selected.addStyle?.({ [property]: value });
     editorRef.current?.select?.(selected);
   };
-  const applyNegativePaddingInput = (property, value, baseValue) => {
+  const clearNegativePaddingForProperty = (component, property) => {
+    const variable = negativePaddingVariableForProperty(property);
+    if (!variable) {
+      return;
+    }
+    component.removeStyle?.(variable);
+    const style = component.getStyle?.() || {};
+    const hasNegativePadding = negativePaddingVariables.some((candidate) => candidate !== variable && Boolean(style[candidate]));
+    if (!hasNegativePadding) {
+      component.removeClass?.("orion-builder-v2-has-negative-padding");
+    }
+  };
+  const applyNegativePaddingInput = (property, value) => {
     const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
-    if (!selected || !property.startsWith("padding-") || !value.startsWith("-")) {
+    const variable = negativePaddingVariableForProperty(property);
+    if (!selected || !variable || !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);
-    const next = Math.max(0, base + (Number.isFinite(adjustment) ? adjustment : 0));
-    const styleValue = `${Number.isInteger(next) ? next : Number(next.toFixed(2))}${unit}`;
+    const amount = Math.abs(Number.parseFloat(value));
+    if (!Number.isFinite(amount) || amount <= 0) {
+      clearNegativePaddingForProperty(selected, property);
+      return;
+    }
+    const styleValue = `${Number.isInteger(amount) ? amount : Number(amount.toFixed(2))}${unit}`;
     selectedComponentRef.current = selected;
     lastSelectedComponentRef.current = selected;
-    selected.addStyle?.({ [property]: styleValue });
+    selected.addClass?.("orion-builder-v2-has-negative-padding");
+    selected.addStyle?.({ [variable]: styleValue });
     editorRef.current?.select?.(selected);
   };
   const updateSelectedOrionBlock = (updates) => {
@@ -3636,6 +3654,19 @@ function GrapesPageEditor({
   (0, import_react.useEffect)(() => {
     saveRef.current = save;
   }, [saving]);
+  (0, import_react.useEffect)(() => {
+    const onBeforeUnload = (event) => {
+      if (!isDirty) {
+        return;
+      }
+      event.preventDefault();
+      event.returnValue = "";
+    };
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", onBeforeUnload);
+    };
+  }, [isDirty]);
   (0, import_react.useEffect)(() => {
     decorateBuilderControls();
     const refreshControls = () => refreshSelectedState(selectedComponentRef.current);
@@ -3704,7 +3735,7 @@ function GrapesPageEditor({
       if (!detail.property || !detail.value) {
         return;
       }
-      applyNegativePaddingInput(detail.property, detail.value, detail.baseValue || "0");
+      applyNegativePaddingInput(detail.property, detail.value);
     };
     const observer = new MutationObserver(() => {
       decorateBuilderControls();

package/dist/builder-v2/client.mjs

@@ -1310,7 +1310,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
             input.setSelectionRange(nextCursor2, nextCursor2);
             window.dispatchEvent(
               new CustomEvent("orion-builder-v2-negative-padding-input", {
-                detail: { baseValue: input.dataset.orionPaddingBase || "0", property, value: nextValue2 }
+                detail: { property, value: nextValue2 }
               })
             );
             return;
@@ -1812,14 +1812,13 @@ var readStylePanelColor = (property) => {
   return swatchColor;
 };
 var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
-var cssPixelValue = (value) => {
-  const match = value.trim().match(/^(-?\d*\.?\d+)(px)?$/i);
-  if (!match) {
-    return null;
-  }
-  const parsed = Number.parseFloat(match[1]);
-  return Number.isFinite(parsed) ? parsed : null;
-};
+var negativePaddingVariableForProperty = (property) => property === "padding-top" ? "--orion-builder-negative-padding-top" : property === "padding-right" ? "--orion-builder-negative-padding-right" : property === "padding-bottom" ? "--orion-builder-negative-padding-bottom" : property === "padding-left" ? "--orion-builder-negative-padding-left" : "";
+var negativePaddingVariables = [
+  "--orion-builder-negative-padding-top",
+  "--orion-builder-negative-padding-right",
+  "--orion-builder-negative-padding-bottom",
+  "--orion-builder-negative-padding-left"
+];
 var propertyNameFromStyleControl = (element) => {
   const property = element?.closest(".gjs-sm-property");
   const className = Array.from(property?.classList || []).find((name) => name.startsWith("gjs-sm-property__"));
@@ -2435,22 +2434,41 @@ 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;
+    if (property.startsWith("padding-") && !value.startsWith("-")) {
+      clearNegativePaddingForProperty(selected, property);
+    }
     selected.addStyle?.({ [property]: value });
     editorRef.current?.select?.(selected);
   };
-  const applyNegativePaddingInput = (property, value, baseValue) => {
+  const clearNegativePaddingForProperty = (component, property) => {
+    const variable = negativePaddingVariableForProperty(property);
+    if (!variable) {
+      return;
+    }
+    component.removeStyle?.(variable);
+    const style = component.getStyle?.() || {};
+    const hasNegativePadding = negativePaddingVariables.some((candidate) => candidate !== variable && Boolean(style[candidate]));
+    if (!hasNegativePadding) {
+      component.removeClass?.("orion-builder-v2-has-negative-padding");
+    }
+  };
+  const applyNegativePaddingInput = (property, value) => {
     const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
-    if (!selected || !property.startsWith("padding-") || !value.startsWith("-")) {
+    const variable = negativePaddingVariableForProperty(property);
+    if (!selected || !variable || !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);
-    const next = Math.max(0, base + (Number.isFinite(adjustment) ? adjustment : 0));
-    const styleValue = `${Number.isInteger(next) ? next : Number(next.toFixed(2))}${unit}`;
+    const amount = Math.abs(Number.parseFloat(value));
+    if (!Number.isFinite(amount) || amount <= 0) {
+      clearNegativePaddingForProperty(selected, property);
+      return;
+    }
+    const styleValue = `${Number.isInteger(amount) ? amount : Number(amount.toFixed(2))}${unit}`;
     selectedComponentRef.current = selected;
     lastSelectedComponentRef.current = selected;
-    selected.addStyle?.({ [property]: styleValue });
+    selected.addClass?.("orion-builder-v2-has-negative-padding");
+    selected.addStyle?.({ [variable]: styleValue });
     editorRef.current?.select?.(selected);
   };
   const updateSelectedOrionBlock = (updates) => {
@@ -3512,6 +3530,19 @@ function GrapesPageEditor({
   useEffect(() => {
     saveRef.current = save;
   }, [saving]);
+  useEffect(() => {
+    const onBeforeUnload = (event) => {
+      if (!isDirty) {
+        return;
+      }
+      event.preventDefault();
+      event.returnValue = "";
+    };
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", onBeforeUnload);
+    };
+  }, [isDirty]);
   useEffect(() => {
     decorateBuilderControls();
     const refreshControls = () => refreshSelectedState(selectedComponentRef.current);
@@ -3580,7 +3611,7 @@ function GrapesPageEditor({
       if (!detail.property || !detail.value) {
         return;
       }
-      applyNegativePaddingInput(detail.property, detail.value, detail.baseValue || "0");
+      applyNegativePaddingInput(detail.property, detail.value);
     };
     const observer = new MutationObserver(() => {
       decorateBuilderControls();

package/dist/builder-v2/styles.css

@@ -2385,6 +2385,14 @@
   letter-spacing: 0;
 }
 
+.orion-builder-v2-has-negative-padding > .xo-builder-preview,
+.orion-builder-v2-runtime .orion-builder-v2-has-negative-padding > * {
+  margin-top: calc(var(--orion-builder-negative-padding-top, 0px) * -1) !important;
+  margin-right: calc(var(--orion-builder-negative-padding-right, 0px) * -1) !important;
+  margin-bottom: calc(var(--orion-builder-negative-padding-bottom, 0px) * -1) !important;
+  margin-left: calc(var(--orion-builder-negative-padding-left, 0px) * -1) !important;
+}
+
 .xo-builder-preview *,
 .xo-builder-preview *::before,
 .xo-builder-preview *::after {

package/dist/index.mjs

@@ -1,18 +1,18 @@
 import {
   admin_exports
 } from "./chunk-KHK6RTGC.mjs";
+import {
+  blocks_exports
+} from "./chunk-JQAHXYAM.mjs";
 import {
   nextjs_exports
 } from "./chunk-ZADL33R6.mjs";
 import "./chunk-ZTXJG4K5.mjs";
-import {
-  blocks_exports
-} from "./chunk-JQAHXYAM.mjs";
 import {
   studio_pages_exports
-} from "./chunk-276KAPGM.mjs";
-import "./chunk-7ZMXZRBP.mjs";
+} from "./chunk-NGLIA2OE.mjs";
 import "./chunk-OQSEJXC4.mjs";
+import "./chunk-7ZMXZRBP.mjs";
 import {
   studio_exports
 } from "./chunk-ADIIWIYL.mjs";

package/dist/studio-pages/index.mjs

@@ -7,14 +7,14 @@ import {
   pageStudioModuleManifest,
   resolveBuilderThemeTokens,
   toEditorInitialDoc
-} from "../chunk-276KAPGM.mjs";
+} from "../chunk-NGLIA2OE.mjs";
+import "../chunk-OQSEJXC4.mjs";
 import {
   createDefaultStudioDocument,
   defaultBuilderThemeTokens,
   layoutToStudioDocument,
   studioDocumentToLayout
 } from "../chunk-7ZMXZRBP.mjs";
-import "../chunk-OQSEJXC4.mjs";
 import "../chunk-ADIIWIYL.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.6.0-beta.161",
+  "version": "0.6.0-beta.163",
   "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-NGLIA2OE.mjs}

@@ -1,3 +1,6 @@
+import {
+  sectionStyleDefaults
+} from "./chunk-OQSEJXC4.mjs";
 import {
   createDefaultStudioDocument,
   defaultBuilderThemeTokens,
@@ -5,9 +8,6 @@ import {
   migrateBlockToSettingsV2,
   studioDocumentToLayout
 } from "./chunk-7ZMXZRBP.mjs";
-import {
-  sectionStyleDefaults
-} from "./chunk-OQSEJXC4.mjs";
 import {
   assertStudioDocumentV1,
   compileStudioDocument,