@orion-studios/payload-studio 0.6.0-beta.182 → 0.6.0-beta.184

package/dist/admin/index.mjs

@@ -7,14 +7,14 @@ import {
   socialMediaConnectionsField,
   themePreferenceField,
   withTooltips
-} from "../chunk-JC3UV74N.mjs";
-import "../chunk-W2UOCJDX.mjs";
+} from "../chunk-KHK6RTGC.mjs";
 import {
   SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM,
   SOCIAL_MEDIA_ICON_OPTIONS,
   SOCIAL_MEDIA_PLATFORMS,
   SOCIAL_MEDIA_PLATFORM_LABELS
 } from "../chunk-ZTXJG4K5.mjs";
+import "../chunk-W2UOCJDX.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {
   SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM,

package/dist/builder-v2/client.js

@@ -720,6 +720,16 @@ var spacingLonghands = [
   "padding-right"
 ];
 var hasSpacingStyle = (style, property) => Boolean(style[property] || style[property.replace(/-([a-z])/g, (_, char) => char.toUpperCase())]);
+var isZeroCssLength = (value) => {
+  const normalized = String(value || "").trim().toLowerCase();
+  return normalized === "0" || /^0(?:\.0+)?(?:px|pt|rem|em|%)?$/.test(normalized);
+};
+var hasZeroVerticalPadding = (style) => {
+  if (isZeroCssLength(style.padding)) {
+    return true;
+  }
+  return isZeroCssLength(style["padding-top"] || style.paddingTop) && isZeroCssLength(style["padding-bottom"] || style.paddingBottom);
+};
 var hoistPreviewSpacingToModel = (view) => {
   const element = view.el;
   const preview = element?.querySelector?.(".xo-builder-preview");
@@ -753,6 +763,9 @@ var hoistPreviewSpacingToModel = (view) => {
   preview.style.paddingRight = "0";
   preview.style.paddingBottom = "0";
   preview.style.paddingLeft = "0";
+  if (hasZeroVerticalPadding(style)) {
+    preview.style.minHeight = "0";
+  }
 };
 var previewForDefinition = (definition, props) => definition.editorPreview?.(props) || `<div class="orion-builder-v2-dynamic-placeholder"><strong>${definition.label}</strong></div>`;
 var blockPreviewForDefinition = (type) => {
@@ -1160,7 +1173,8 @@ var registerProjectDynamicComponents = (editor, adapter) => {
           const props = propsFromAttributes(attributes);
           withoutUndoTracking(editor, () => {
             const backgroundColor = defaultBackgroundForComponent(type, props);
-            if (backgroundColor && !normalizeCssColor(this.model.getStyle?.()?.["background-color"])) {
+            const currentBackgroundColor = normalizeCssColor(this.model.getStyle?.()?.["background-color"]);
+            if (backgroundColor && currentBackgroundColor !== backgroundColor) {
               this.model.addStyle?.({ "background-color": backgroundColor });
               this.model.addAttributes?.({ "data-orion-background-color": backgroundColor });
             }
@@ -2030,6 +2044,11 @@ var stripLegacyNegativePadding = (component) => {
   }
   removeGeneratedSelectionMargins(component);
 };
+var storedOrionBlockBackgroundColor = (component) => {
+  const attrs = component?.getAttributes?.() || {};
+  const block = parseOrionBlockAttribute(attrs["data-orion-block"]);
+  return firstString(attrs["data-orion-background-color"], block.backgroundColor);
+};
 var spacingTargetForComponent = (component) => {
   const element = component?.getEl?.();
   return element || null;
@@ -2872,6 +2891,18 @@ function GrapesPageEditor({
         }
         stripLegacyNegativePadding(component);
         const style = component.getStyle?.() || {};
+        const storedBackgroundColor = firstString(attrs["data-orion-background-color"], block.backgroundColor);
+        if (storedBackgroundColor && getStyleColorValue(style, "background-color") !== storedBackgroundColor) {
+          component.addStyle?.({ "background-color": storedBackgroundColor });
+          component.addAttributes?.({
+            "data-orion-background-color": storedBackgroundColor,
+            "data-orion-block": serializeOrionBlockAttribute({
+              ...block,
+              backgroundColor: storedBackgroundColor
+            })
+          });
+          return;
+        }
         const backgroundColor = getStyleColorValue(style, "background-color");
         if (!backgroundColor || normalizeCssColorValue(block.backgroundColor) === backgroundColor && normalizeCssColorValue(attrs["data-orion-background-color"]) === backgroundColor) {
           return;
@@ -2888,6 +2919,21 @@ function GrapesPageEditor({
       syncingOrionBlockStylesRef.current = false;
     }
   };
+  const hydrateAllOrionBlockBackgroundStyles = () => {
+    const editor = editorRef.current;
+    const wrapper = editor?.DomComponents?.getWrapper?.() || null;
+    const blocks = wrapper?.find?.("[data-orion-block]") || [];
+    blocks.forEach((component) => {
+      stripLegacyNegativePadding(component);
+      const backgroundColor = storedOrionBlockBackgroundColor(component);
+      if (!backgroundColor) {
+        return;
+      }
+      if (getStyleColorValue(component.getStyle?.() || {}, "background-color") !== backgroundColor) {
+        component.addStyle?.({ "background-color": backgroundColor });
+      }
+    });
+  };
   const hydrateSelectedTypographyStyleFromOrionBlock = (component) => {
     if (!component) {
       return;
@@ -3443,6 +3489,8 @@ function GrapesPageEditor({
         registerProjectDynamicComponents(editor, adapter);
         historyReadyRef.current = false;
         editor.loadProjectData(projectData);
+        hydrateAllOrionBlockBackgroundStyles();
+        window.requestAnimationFrame(() => hydrateAllOrionBlockBackgroundStyles());
         void loadPayloadMediaAssets(editor);
         window.setTimeout(() => {
           customUndoStackRef.current = [];

package/dist/builder-v2/client.mjs

@@ -596,6 +596,16 @@ var spacingLonghands = [
   "padding-right"
 ];
 var hasSpacingStyle = (style, property) => Boolean(style[property] || style[property.replace(/-([a-z])/g, (_, char) => char.toUpperCase())]);
+var isZeroCssLength = (value) => {
+  const normalized = String(value || "").trim().toLowerCase();
+  return normalized === "0" || /^0(?:\.0+)?(?:px|pt|rem|em|%)?$/.test(normalized);
+};
+var hasZeroVerticalPadding = (style) => {
+  if (isZeroCssLength(style.padding)) {
+    return true;
+  }
+  return isZeroCssLength(style["padding-top"] || style.paddingTop) && isZeroCssLength(style["padding-bottom"] || style.paddingBottom);
+};
 var hoistPreviewSpacingToModel = (view) => {
   const element = view.el;
   const preview = element?.querySelector?.(".xo-builder-preview");
@@ -629,6 +639,9 @@ var hoistPreviewSpacingToModel = (view) => {
   preview.style.paddingRight = "0";
   preview.style.paddingBottom = "0";
   preview.style.paddingLeft = "0";
+  if (hasZeroVerticalPadding(style)) {
+    preview.style.minHeight = "0";
+  }
 };
 var previewForDefinition = (definition, props) => definition.editorPreview?.(props) || `<div class="orion-builder-v2-dynamic-placeholder"><strong>${definition.label}</strong></div>`;
 var blockPreviewForDefinition = (type) => {
@@ -1036,7 +1049,8 @@ var registerProjectDynamicComponents = (editor, adapter) => {
           const props = propsFromAttributes(attributes);
           withoutUndoTracking(editor, () => {
             const backgroundColor = defaultBackgroundForComponent(type, props);
-            if (backgroundColor && !normalizeCssColor(this.model.getStyle?.()?.["background-color"])) {
+            const currentBackgroundColor = normalizeCssColor(this.model.getStyle?.()?.["background-color"]);
+            if (backgroundColor && currentBackgroundColor !== backgroundColor) {
               this.model.addStyle?.({ "background-color": backgroundColor });
               this.model.addAttributes?.({ "data-orion-background-color": backgroundColor });
             }
@@ -1906,6 +1920,11 @@ var stripLegacyNegativePadding = (component) => {
   }
   removeGeneratedSelectionMargins(component);
 };
+var storedOrionBlockBackgroundColor = (component) => {
+  const attrs = component?.getAttributes?.() || {};
+  const block = parseOrionBlockAttribute(attrs["data-orion-block"]);
+  return firstString(attrs["data-orion-background-color"], block.backgroundColor);
+};
 var spacingTargetForComponent = (component) => {
   const element = component?.getEl?.();
   return element || null;
@@ -2748,6 +2767,18 @@ function GrapesPageEditor({
         }
         stripLegacyNegativePadding(component);
         const style = component.getStyle?.() || {};
+        const storedBackgroundColor = firstString(attrs["data-orion-background-color"], block.backgroundColor);
+        if (storedBackgroundColor && getStyleColorValue(style, "background-color") !== storedBackgroundColor) {
+          component.addStyle?.({ "background-color": storedBackgroundColor });
+          component.addAttributes?.({
+            "data-orion-background-color": storedBackgroundColor,
+            "data-orion-block": serializeOrionBlockAttribute({
+              ...block,
+              backgroundColor: storedBackgroundColor
+            })
+          });
+          return;
+        }
         const backgroundColor = getStyleColorValue(style, "background-color");
         if (!backgroundColor || normalizeCssColorValue(block.backgroundColor) === backgroundColor && normalizeCssColorValue(attrs["data-orion-background-color"]) === backgroundColor) {
           return;
@@ -2764,6 +2795,21 @@ function GrapesPageEditor({
       syncingOrionBlockStylesRef.current = false;
     }
   };
+  const hydrateAllOrionBlockBackgroundStyles = () => {
+    const editor = editorRef.current;
+    const wrapper = editor?.DomComponents?.getWrapper?.() || null;
+    const blocks = wrapper?.find?.("[data-orion-block]") || [];
+    blocks.forEach((component) => {
+      stripLegacyNegativePadding(component);
+      const backgroundColor = storedOrionBlockBackgroundColor(component);
+      if (!backgroundColor) {
+        return;
+      }
+      if (getStyleColorValue(component.getStyle?.() || {}, "background-color") !== backgroundColor) {
+        component.addStyle?.({ "background-color": backgroundColor });
+      }
+    });
+  };
   const hydrateSelectedTypographyStyleFromOrionBlock = (component) => {
     if (!component) {
       return;
@@ -3319,6 +3365,8 @@ function GrapesPageEditor({
         registerProjectDynamicComponents(editor, adapter);
         historyReadyRef.current = false;
         editor.loadProjectData(projectData);
+        hydrateAllOrionBlockBackgroundStyles();
+        window.requestAnimationFrame(() => hydrateAllOrionBlockBackgroundStyles());
         void loadPayloadMediaAssets(editor);
         window.setTimeout(() => {
           customUndoStackRef.current = [];

package/dist/builder-v2/styles.css

@@ -1357,11 +1357,23 @@
 }
 
 .orion-builder-v2-editor .gjs-sm-sector {
+  background: #fffdf9;
   border: 1px solid var(--builder-v2-border);
   border-radius: 12px;
   overflow: visible;
 }
 
+.orion-builder-v2-editor .gjs-sm-sector .gjs-sm-sector-title {
+  border: 0;
+  border-radius: 11px;
+}
+
+.orion-builder-v2-editor .gjs-sm-sector.gjs-sm-open .gjs-sm-sector-title,
+.orion-builder-v2-editor .gjs-sm-sector.gjs-open .gjs-sm-sector-title {
+  border-bottom: 1px solid var(--builder-v2-border);
+  border-radius: 11px 11px 0 0;
+}
+
 .orion-builder-v2-editor .gjs-sm-properties {
   display: grid;
   gap: 8px;

package/dist/index.mjs

@@ -1,25 +1,25 @@
 import {
   admin_exports
-} from "./chunk-JC3UV74N.mjs";
-import {
-  blocks_exports
-} from "./chunk-JQAHXYAM.mjs";
-import {
-  admin_app_exports
-} from "./chunk-RKTIFEUY.mjs";
-import "./chunk-W2UOCJDX.mjs";
+} from "./chunk-KHK6RTGC.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-NGLIA2OE.mjs";
-import "./chunk-OQSEJXC4.mjs";
+} from "./chunk-7HME6R2V.mjs";
 import "./chunk-7ZMXZRBP.mjs";
 import {
   studio_exports
 } from "./chunk-ADIIWIYL.mjs";
+import "./chunk-OQSEJXC4.mjs";
+import {
+  admin_app_exports
+} from "./chunk-RKTIFEUY.mjs";
+import "./chunk-W2UOCJDX.mjs";
 import "./chunk-6BWS3CLP.mjs";
 export {
   admin_exports as admin,

package/dist/studio-pages/index.mjs

@@ -7,8 +7,7 @@ import {
   pageStudioModuleManifest,
   resolveBuilderThemeTokens,
   toEditorInitialDoc
-} from "../chunk-NGLIA2OE.mjs";
-import "../chunk-OQSEJXC4.mjs";
+} from "../chunk-7HME6R2V.mjs";
 import {
   createDefaultStudioDocument,
   defaultBuilderThemeTokens,
@@ -16,6 +15,7 @@ import {
   studioDocumentToLayout
 } from "../chunk-7ZMXZRBP.mjs";
 import "../chunk-ADIIWIYL.mjs";
+import "../chunk-OQSEJXC4.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {
   createDefaultStudioDocument,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.6.0-beta.182",
+  "version": "0.6.0-beta.184",
   "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",

package/dist/{chunk-NGLIA2OE.mjs → chunk-7HME6R2V.mjs}

@@ -1,6 +1,3 @@
-import {
-  sectionStyleDefaults
-} from "./chunk-OQSEJXC4.mjs";
 import {
   createDefaultStudioDocument,
   defaultBuilderThemeTokens,
@@ -14,6 +11,9 @@ import {
   createEmptyStudioDocument,
   validateStudioDocument
 } from "./chunk-ADIIWIYL.mjs";
+import {
+  sectionStyleDefaults
+} from "./chunk-OQSEJXC4.mjs";
 import {
   __export
 } from "./chunk-6BWS3CLP.mjs";

package/dist/{chunk-JC3UV74N.mjs → chunk-KHK6RTGC.mjs}

@@ -1,12 +1,12 @@
-import {
-  adminNavIcons
-} from "./chunk-W2UOCJDX.mjs";
 import {
   SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM,
   SOCIAL_MEDIA_ICON_OPTIONS,
   SOCIAL_MEDIA_PLATFORMS,
   SOCIAL_MEDIA_PLATFORM_LABELS
 } from "./chunk-ZTXJG4K5.mjs";
+import {
+  adminNavIcons
+} from "./chunk-W2UOCJDX.mjs";
 import {
   __export,
   __require