@orion-studios/payload-studio 0.6.0-beta.112 → 0.6.0-beta.114

package/dist/builder-v2/client.js

@@ -695,6 +695,51 @@ var syncModelBackgroundToBlock = (model) => {
     })
   });
 };
+var spacingLonghands = [
+  "margin-top",
+  "margin-bottom",
+  "margin-left",
+  "margin-right",
+  "padding-top",
+  "padding-bottom",
+  "padding-left",
+  "padding-right"
+];
+var hasSpacingStyle = (style, property) => Boolean(style[property] || style[property.replace(/-([a-z])/g, (_, char) => char.toUpperCase())]);
+var hoistPreviewSpacingToModel = (view) => {
+  const element = view.el;
+  const preview = element?.querySelector?.(".xo-builder-preview");
+  if (!preview) {
+    return;
+  }
+  const model = view.model;
+  const style = model.getStyle?.() || {};
+  const computed = window.getComputedStyle(preview);
+  const nextStyle = {};
+  spacingLonghands.forEach((property) => {
+    const isPadding = property.startsWith("padding-");
+    if (hasSpacingStyle(style, property) || hasSpacingStyle(style, isPadding ? "padding" : "margin")) {
+      return;
+    }
+    const value = computed.getPropertyValue(property).trim();
+    if (value && (isPadding || value !== "0px")) {
+      nextStyle[property] = value;
+    }
+  });
+  if (Object.keys(nextStyle).length > 0) {
+    model.addStyle?.(nextStyle);
+  }
+  preview.style.margin = "0";
+  preview.style.marginTop = "0";
+  preview.style.marginRight = "0";
+  preview.style.marginBottom = "0";
+  preview.style.marginLeft = "0";
+  preview.style.padding = "0";
+  preview.style.paddingTop = "0";
+  preview.style.paddingRight = "0";
+  preview.style.paddingBottom = "0";
+  preview.style.paddingLeft = "0";
+};
 var previewForDefinition = (definition, props) => definition.editorPreview?.(props) || `<div class="orion-builder-v2-dynamic-placeholder"><strong>${definition.label}</strong></div>`;
 var blockPreviewForDefinition = (type) => {
   const normalizedType = type.replace(/[^a-z0-9-]/gi, "-");
@@ -1032,6 +1077,7 @@ var registerProjectDynamicComponents = (editor, adapter) => {
             this.model.addAttributes?.({ "data-orion-background-color": backgroundColor });
           }
           this.model.components(previewForDefinition(definition, props));
+          hoistPreviewSpacingToModel(this);
           lockPreviewChildren(this.model);
           queueMicrotask(() => bindEditablePreview(this, editor));
         }
@@ -1511,6 +1557,37 @@ var readStylePanelColor = (property) => {
   return swatchColor;
 };
 var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
+var writeStylePanelLength = (property, value) => {
+  const control = readStylePanelValue(property);
+  const input = control?.querySelector("input");
+  if (!input) {
+    return;
+  }
+  const match = value.trim().match(/^(-?\d*\.?\d+)([a-z%]*)$/i);
+  if (!match) {
+    return;
+  }
+  const [, amount, unit = "px"] = match;
+  const unitSelect = control?.querySelector("select");
+  input.value = amount;
+  if (unitSelect) {
+    unitSelect.value = unit || "px";
+  }
+};
+var spacingProperties = [
+  "margin-top",
+  "margin-bottom",
+  "margin-left",
+  "margin-right",
+  "padding-top",
+  "padding-bottom",
+  "padding-left",
+  "padding-right"
+];
+var spacingTargetForComponent = (component) => {
+  const element = component?.getEl?.();
+  return element || null;
+};
 var hasExplicitHorizontalAlign = (block) => {
   const settings = readNestedRecord(block, "settings");
   const typography = readNestedRecord(settings, "typography");
@@ -2264,6 +2341,16 @@ function GrapesPageEditor({
     hydrateSelectedTypographyStyleFromOrionBlock(component);
     rememberComponentSnapshot(component);
     refreshSelectedState(component);
+    window.requestAnimationFrame(() => {
+      const element = spacingTargetForComponent(component);
+      if (!element) {
+        return;
+      }
+      const computed = window.getComputedStyle(element);
+      spacingProperties.forEach((property) => {
+        writeStylePanelLength(property, computed.getPropertyValue(property));
+      });
+    });
   };
   const applyQuickLayout = (layout) => {
     const nextStyle = quickLayoutStyles[layout];

package/dist/builder-v2/client.mjs

@@ -571,6 +571,51 @@ var syncModelBackgroundToBlock = (model) => {
     })
   });
 };
+var spacingLonghands = [
+  "margin-top",
+  "margin-bottom",
+  "margin-left",
+  "margin-right",
+  "padding-top",
+  "padding-bottom",
+  "padding-left",
+  "padding-right"
+];
+var hasSpacingStyle = (style, property) => Boolean(style[property] || style[property.replace(/-([a-z])/g, (_, char) => char.toUpperCase())]);
+var hoistPreviewSpacingToModel = (view) => {
+  const element = view.el;
+  const preview = element?.querySelector?.(".xo-builder-preview");
+  if (!preview) {
+    return;
+  }
+  const model = view.model;
+  const style = model.getStyle?.() || {};
+  const computed = window.getComputedStyle(preview);
+  const nextStyle = {};
+  spacingLonghands.forEach((property) => {
+    const isPadding = property.startsWith("padding-");
+    if (hasSpacingStyle(style, property) || hasSpacingStyle(style, isPadding ? "padding" : "margin")) {
+      return;
+    }
+    const value = computed.getPropertyValue(property).trim();
+    if (value && (isPadding || value !== "0px")) {
+      nextStyle[property] = value;
+    }
+  });
+  if (Object.keys(nextStyle).length > 0) {
+    model.addStyle?.(nextStyle);
+  }
+  preview.style.margin = "0";
+  preview.style.marginTop = "0";
+  preview.style.marginRight = "0";
+  preview.style.marginBottom = "0";
+  preview.style.marginLeft = "0";
+  preview.style.padding = "0";
+  preview.style.paddingTop = "0";
+  preview.style.paddingRight = "0";
+  preview.style.paddingBottom = "0";
+  preview.style.paddingLeft = "0";
+};
 var previewForDefinition = (definition, props) => definition.editorPreview?.(props) || `<div class="orion-builder-v2-dynamic-placeholder"><strong>${definition.label}</strong></div>`;
 var blockPreviewForDefinition = (type) => {
   const normalizedType = type.replace(/[^a-z0-9-]/gi, "-");
@@ -908,6 +953,7 @@ var registerProjectDynamicComponents = (editor, adapter) => {
             this.model.addAttributes?.({ "data-orion-background-color": backgroundColor });
           }
           this.model.components(previewForDefinition(definition, props));
+          hoistPreviewSpacingToModel(this);
           lockPreviewChildren(this.model);
           queueMicrotask(() => bindEditablePreview(this, editor));
         }
@@ -1387,6 +1433,37 @@ var readStylePanelColor = (property) => {
   return swatchColor;
 };
 var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
+var writeStylePanelLength = (property, value) => {
+  const control = readStylePanelValue(property);
+  const input = control?.querySelector("input");
+  if (!input) {
+    return;
+  }
+  const match = value.trim().match(/^(-?\d*\.?\d+)([a-z%]*)$/i);
+  if (!match) {
+    return;
+  }
+  const [, amount, unit = "px"] = match;
+  const unitSelect = control?.querySelector("select");
+  input.value = amount;
+  if (unitSelect) {
+    unitSelect.value = unit || "px";
+  }
+};
+var spacingProperties = [
+  "margin-top",
+  "margin-bottom",
+  "margin-left",
+  "margin-right",
+  "padding-top",
+  "padding-bottom",
+  "padding-left",
+  "padding-right"
+];
+var spacingTargetForComponent = (component) => {
+  const element = component?.getEl?.();
+  return element || null;
+};
 var hasExplicitHorizontalAlign = (block) => {
   const settings = readNestedRecord(block, "settings");
   const typography = readNestedRecord(settings, "typography");
@@ -2140,6 +2217,16 @@ function GrapesPageEditor({
     hydrateSelectedTypographyStyleFromOrionBlock(component);
     rememberComponentSnapshot(component);
     refreshSelectedState(component);
+    window.requestAnimationFrame(() => {
+      const element = spacingTargetForComponent(component);
+      if (!element) {
+        return;
+      }
+      const computed = window.getComputedStyle(element);
+      spacingProperties.forEach((property) => {
+        writeStylePanelLength(property, computed.getPropertyValue(property));
+      });
+    });
   };
   const applyQuickLayout = (layout) => {
     const nextStyle = quickLayoutStyles[layout];

package/dist/index.mjs

@@ -5,18 +5,18 @@ import {
   admin_app_exports
 } from "./chunk-RKTIFEUY.mjs";
 import "./chunk-W2UOCJDX.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.112",
+  "version": "0.6.0-beta.114",
   "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,