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

package/dist/builder-v2/client.js

@@ -1361,6 +1361,40 @@ var canvasSelectionCss = `
   [data-gjs-highlightable].gjs-hovered {
     outline-color: #c7643d !important;
   }
+
+  .xo-builder-preview-grid {
+    display: grid;
+    gap: 22px;
+    grid-template-columns: 1fr;
+  }
+
+  .xo-builder-preview-grid.is-catalog,
+  .xo-builder-preview-grid.is-contact,
+  .xo-builder-preview-grid.is-stacked-image-cards {
+    grid-template-columns: 1fr;
+  }
+
+  @media (min-width: 768px) {
+    .xo-builder-preview-grid,
+    .xo-builder-preview-grid.is-image-tiles,
+    .xo-builder-preview-grid.is-stacked-image-cards {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .xo-builder-preview-grid.is-catalog {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .xo-builder-preview-grid.is-contact {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .xo-builder-preview-grid.is-catalog {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
 `;
 var isQuickHorizontalAlign = (value) => value === "center" || value === "left" || value === "right";
 var isQuickVerticalAlign = (value) => value === "bottom" || value === "middle" || value === "top";
@@ -1477,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");
@@ -2230,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

@@ -1237,6 +1237,40 @@ var canvasSelectionCss = `
   [data-gjs-highlightable].gjs-hovered {
     outline-color: #c7643d !important;
   }
+
+  .xo-builder-preview-grid {
+    display: grid;
+    gap: 22px;
+    grid-template-columns: 1fr;
+  }
+
+  .xo-builder-preview-grid.is-catalog,
+  .xo-builder-preview-grid.is-contact,
+  .xo-builder-preview-grid.is-stacked-image-cards {
+    grid-template-columns: 1fr;
+  }
+
+  @media (min-width: 768px) {
+    .xo-builder-preview-grid,
+    .xo-builder-preview-grid.is-image-tiles,
+    .xo-builder-preview-grid.is-stacked-image-cards {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .xo-builder-preview-grid.is-catalog {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .xo-builder-preview-grid.is-contact {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .xo-builder-preview-grid.is-catalog {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
 `;
 var isQuickHorizontalAlign = (value) => value === "center" || value === "left" || value === "right";
 var isQuickVerticalAlign = (value) => value === "bottom" || value === "middle" || value === "top";
@@ -1353,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");
@@ -2106,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/package.json

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