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

package/dist/builder-v2/client.js

@@ -1511,6 +1511,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?.querySelector?.(".xo-builder-preview") || element || null;
+};
 var hasExplicitHorizontalAlign = (block) => {
   const settings = readNestedRecord(block, "settings");
   const typography = readNestedRecord(settings, "typography");
@@ -2264,6 +2295,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

@@ -1387,6 +1387,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?.querySelector?.(".xo-builder-preview") || element || null;
+};
 var hasExplicitHorizontalAlign = (block) => {
   const settings = readNestedRecord(block, "settings");
   const typography = readNestedRecord(settings, "typography");
@@ -2140,6 +2171,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.113",
   "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,