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

package/dist/builder-v2/index.mjs

@@ -314,11 +314,31 @@ var sanitizeBuilderHtml = (value) => {
     parseStyleAttributes: false
   });
 };
+var cleanLegacyNegativePaddingRule = (rule) => {
+  const backgroundMatch = rule.match(/--orion-negative-padding-background\s*:\s*([^;{}]+)/i);
+  const hasLegacyNegativePadding = Boolean(backgroundMatch) || /--orion-negative-padding-(?:top|right|bottom|left)\s*:/i.test(rule) || /\.?orion-builder-v2-negative-padding\b/i.test(rule) || /\.?is-orion-negative-padding-(?:top|right|bottom|left)\b/i.test(rule);
+  if (!hasLegacyNegativePadding) {
+    return rule;
+  }
+  const backgroundColor = backgroundMatch?.[1]?.trim();
+  const cleaned = rule.replace(/--orion-negative-padding-[^:;{}]+:[^;{}]+;?/gi, "").replace(/margin-(?:top|bottom)\s*:\s*-2(?:px)?\s*;?/gi, "").replace(/(^|[\s.])orion-builder-v2-negative-padding(?=[\s.#:{,]|$)/gi, "$1").replace(/(^|[\s.])is-orion-negative-padding-(?:top|right|bottom|left)(?=[\s.#:{,]|$)/gi, "$1");
+  if (!backgroundColor) {
+    return cleaned;
+  }
+  if (/background-color\s*:\s*(?:transparent|rgba\(\s*255\s*,\s*255\s*,\s*255\s*,\s*0\s*\))\s*;?/i.test(cleaned)) {
+    return cleaned.replace(
+      /background-color\s*:\s*(?:transparent|rgba\(\s*255\s*,\s*255\s*,\s*255\s*,\s*0\s*\))\s*;?/i,
+      `background-color:${backgroundColor};`
+    );
+  }
+  return cleaned.replace(/}$/, `background-color:${backgroundColor};}`);
+};
+var cleanLegacyNegativePaddingCss = (css) => css.replace(/[^{}]+\{[^{}]*\}/g, (rule) => cleanLegacyNegativePaddingRule(rule));
 var sanitizeBuilderCss = (value) => {
   if (typeof value !== "string" || value.trim().length === 0) {
     return "";
   }
-  return value.replace(/@import\s+[^;]+;/gi, "").replace(/expression\s*\(/gi, "").replace(/javascript\s*:/gi, "");
+  return cleanLegacyNegativePaddingCss(value).replace(/@import\s+[^;]+;/gi, "").replace(/expression\s*\(/gi, "").replace(/javascript\s*:/gi, "").replace(/--orion-negative-padding-[^:;{}]+:[^;{}]+;?/gi, "").replace(/--orion-negative-padding-background:[^;{}]+;?/gi, "").replace(/(^|[\\s.])orion-builder-v2-negative-padding(?=[\\s.#:{,]|$)/gi, "$1").replace(/(^|[\\s.])is-orion-negative-padding-(?:top|right|bottom|left)(?=[\\s.#:{,]|$)/gi, "$1");
 };
 var scopeSelector = (selector, scope) => selector.split(",").map((part) => {
   const trimmed = part.trim();
@@ -659,6 +679,13 @@ var buildBuilderV2PageTree = (pages) => {
 // src/builder-v2/runtime/BuilderPageRuntime.tsx
 import { createElement, Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+var legacyNegativePaddingClasses = /* @__PURE__ */ new Set([
+  "orion-builder-v2-negative-padding",
+  "is-orion-negative-padding-top",
+  "is-orion-negative-padding-right",
+  "is-orion-negative-padding-bottom",
+  "is-orion-negative-padding-left"
+]);
 var resolveRuntimeComponent = (adapter, type) => {
   const definition = adapter?.components?.[type];
   if (!definition) {
@@ -669,6 +696,7 @@ var resolveRuntimeComponent = (adapter, type) => {
   }
   return definition.render;
 };
+var cleanRuntimeClassName = (value) => value?.split(/\s+/).map((className) => className.trim()).filter((className) => className && !legacyNegativePaddingClasses.has(className)).join(" ") || void 0;
 var styleStringToReactStyle = (value) => {
   if (!value) {
     return void 0;
@@ -683,6 +711,9 @@ var styleStringToReactStyle = (value) => {
     if (!property || !propertyValue) {
       return result;
     }
+    if (property.startsWith("--orion-negative-padding-")) {
+      return result;
+    }
     const reactProperty = property.startsWith("--") ? property : property.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
     result[reactProperty] = propertyValue;
     return result;
@@ -723,7 +754,7 @@ function BuilderPageRuntime({ adapter, className, page }) {
         return createElement(
           "div",
           {
-            className: wrapperAttributes.className,
+            className: cleanRuntimeClassName(wrapperAttributes.className),
             id: wrapperAttributes.id,
             key: `component-${chunk.instance.id}-${index}`,
             style: styleStringToReactStyle(wrapperAttributes.style)

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

@@ -12,8 +12,9 @@ import {
   validateStudioDocument
 } from "./chunk-ADIIWIYL.mjs";
 import {
+  defaultPageLayoutBlocks,
   sectionStyleDefaults
-} from "./chunk-OQSEJXC4.mjs";
+} from "./chunk-KMYMSR7W.mjs";
 import {
   __export
 } from "./chunk-6BWS3CLP.mjs";
@@ -21,9 +22,13 @@ import {
 // src/studio-pages/index.ts
 var studio_pages_exports = {};
 __export(studio_pages_exports, {
+  DEFAULT_LEGACY_HERO_BACKGROUND_COLORS: () => DEFAULT_LEGACY_HERO_BACKGROUND_COLORS,
   createDefaultStudioDocument: () => createDefaultStudioDocument,
+  createStudioPageFields: () => createStudioPageFields,
   createStudioPageService: () => createStudioPageService,
+  createStudioPagesCollection: () => createStudioPagesCollection,
   defaultBuilderThemeTokens: () => defaultBuilderThemeTokens,
+  defaultRelationshipHydrationMap: () => defaultRelationshipHydrationMap,
   getStudioDocumentFromPage: () => getStudioDocumentFromPage,
   layoutToStudioDocument: () => layoutToStudioDocument,
   pageInspectorPanels: () => pageInspectorPanels,
@@ -461,6 +466,13 @@ var inspectorDefinitionByBlockType = {
 };
 
 // src/studio-pages/pageService.ts
+var defaultRelationshipHydrationMap = {
+  beforeAfter: { arrays: { items: ["media", "beforeMedia", "afterMedia"] } },
+  featureGrid: { arrays: { items: ["media", "beforeMedia", "afterMedia"] } },
+  hero: { fields: ["media"] },
+  logoWall: { arrays: { items: ["media", "beforeMedia", "afterMedia"] } },
+  media: { fields: ["image"] }
+};
 var isRecord2 = (value) => Boolean(value) && typeof value === "object" && !Array.isArray(value);
 var toRecordArray = (value) => Array.isArray(value) ? value.filter((item) => isRecord2(item)) : [];
 var getRelationID = (value) => {
@@ -488,7 +500,7 @@ var hydrateRelationship = (valueFromStudio, valueFromLayout) => {
   }
   return valueFromLayout;
 };
-var hydrateDocumentWithLayoutRelations = (document, layout) => {
+var hydrateDocumentWithLayoutRelations = (document, layout, hydrationMap = defaultRelationshipHydrationMap) => {
   const nextNodes = document.nodes.map((node, index) => {
     const layoutBlock = layout[index];
     if (!isRecord2(layoutBlock)) {
@@ -497,17 +509,18 @@ var hydrateDocumentWithLayoutRelations = (document, layout) => {
     if (typeof layoutBlock.blockType !== "string" || layoutBlock.blockType !== node.type) {
       return node;
     }
-    const nextData = { ...node.data };
-    if (node.type === "hero") {
-      nextData.media = hydrateRelationship(nextData.media, layoutBlock.media);
+    const rule = hydrationMap[node.type];
+    if (!rule) {
+      return node;
     }
-    if (node.type === "media") {
-      nextData.image = hydrateRelationship(nextData.image, layoutBlock.image);
+    const nextData = { ...node.data };
+    for (const fieldName of rule.fields || []) {
+      nextData[fieldName] = hydrateRelationship(nextData[fieldName], layoutBlock[fieldName]);
     }
-    if (node.type === "featureGrid" || node.type === "logoWall" || node.type === "beforeAfter") {
-      const studioItems = Array.isArray(nextData.items) ? nextData.items : [];
-      const layoutItems = Array.isArray(layoutBlock.items) ? layoutBlock.items : [];
-      nextData.items = studioItems.map((rawStudioItem, itemIndex) => {
+    for (const [arrayField, itemFields] of Object.entries(rule.arrays || {})) {
+      const studioItems = Array.isArray(nextData[arrayField]) ? nextData[arrayField] : [];
+      const layoutItems = Array.isArray(layoutBlock[arrayField]) ? layoutBlock[arrayField] : [];
+      nextData[arrayField] = studioItems.map((rawStudioItem, itemIndex) => {
         if (!isRecord2(rawStudioItem)) {
           return rawStudioItem;
         }
@@ -516,9 +529,9 @@ var hydrateDocumentWithLayoutRelations = (document, layout) => {
           return rawStudioItem;
         }
         const nextItem = { ...rawStudioItem };
-        nextItem.media = hydrateRelationship(nextItem.media, layoutItem.media);
-        nextItem.beforeMedia = hydrateRelationship(nextItem.beforeMedia, layoutItem.beforeMedia);
-        nextItem.afterMedia = hydrateRelationship(nextItem.afterMedia, layoutItem.afterMedia);
+        for (const itemField of itemFields) {
+          nextItem[itemField] = hydrateRelationship(nextItem[itemField], layoutItem[itemField]);
+        }
         return nextItem;
       });
     }
@@ -537,7 +550,12 @@ var normalizeDocument = (document) => ({
   schemaVersion: 1,
   updatedAt: (/* @__PURE__ */ new Date()).toISOString()
 });
-var normalizeLegacyHeroDefaults = (document) => {
+var DEFAULT_LEGACY_HERO_BACKGROUND_COLORS = ["#124a37"];
+var normalizeLegacyHeroDefaults = (document, legacyColors = DEFAULT_LEGACY_HERO_BACKGROUND_COLORS) => {
+  if (legacyColors.length === 0) {
+    return document;
+  }
+  const normalizedLegacyColors = legacyColors.map((color) => color.trim().toLowerCase());
   const nodes = document.nodes.map((node) => {
     if (node.type !== "hero" || !isRecord2(node.data)) {
       return node;
@@ -547,7 +565,7 @@ var normalizeLegacyHeroDefaults = (document) => {
     const sectionBackgroundMode = typeof nextData.sectionBackgroundMode === "string" ? nextData.sectionBackgroundMode : "none";
     const hasBackgroundImageURL = typeof nextData.backgroundImageURL === "string" && nextData.backgroundImageURL.trim().length > 0;
     const mediaRelation = getRelationID(nextData.media);
-    if (heroBackgroundColor === "#124a37" && sectionBackgroundMode === "none" && !hasBackgroundImageURL && mediaRelation === null) {
+    if (normalizedLegacyColors.includes(heroBackgroundColor) && sectionBackgroundMode === "none" && !hasBackgroundImageURL && mediaRelation === null) {
       nextData.backgroundColor = "";
     }
     return {
@@ -566,13 +584,13 @@ var assertCanPublish = (issues) => {
     throw new Error(`Cannot publish page: ${publishErrors[0].message}`);
   }
 };
-var getStudioDocumentFromPage = (doc) => {
+var getStudioDocumentFromPage = (doc, relationshipHydration = defaultRelationshipHydrationMap) => {
   const title = typeof doc.title === "string" ? doc.title : void 0;
   const layout = asLayoutArray(doc.layout);
   try {
     const studioDocument = assertStudioDocumentV1(doc.studioDocument);
     if (layout.length > 0) {
-      return hydrateDocumentWithLayoutRelations(studioDocument, layout);
+      return hydrateDocumentWithLayoutRelations(studioDocument, layout, relationshipHydration);
     }
     return studioDocument;
   } catch {
@@ -584,8 +602,10 @@ var getStudioDocumentFromPage = (doc) => {
 };
 var createStudioPageService = ({
   collectionSlug = "pages",
+  legacyHeroBackgroundColors = DEFAULT_LEGACY_HERO_BACKGROUND_COLORS,
   modules,
   payload,
+  relationshipHydration = defaultRelationshipHydrationMap,
   user
 }) => ({
   getPageForStudio: async (pageID) => {
@@ -597,7 +617,7 @@ var createStudioPageService = ({
       overrideAccess: false,
       user
     });
-    const studioDocument = getStudioDocumentFromPage(page);
+    const studioDocument = getStudioDocumentFromPage(page, relationshipHydration);
     return {
       id: String(page.id),
       slug: typeof page.slug === "string" ? page.slug : "",
@@ -607,7 +627,10 @@ var createStudioPageService = ({
   },
   validateStudioDocument: (document) => validateStudioDocument(document, modules),
   saveDraft: async (pageID, document, _metadata) => {
-    const normalizedDocument = normalizeLegacyHeroDefaults(normalizeDocument(document));
+    const normalizedDocument = normalizeLegacyHeroDefaults(
+      normalizeDocument(document),
+      legacyHeroBackgroundColors
+    );
     const compileResult = compileStudioDocument(normalizedDocument, modules);
     await payload.update({
       collection: collectionSlug,
@@ -628,7 +651,10 @@ var createStudioPageService = ({
     };
   },
   publish: async (pageID, document, _metadata) => {
-    const normalizedDocument = normalizeLegacyHeroDefaults(normalizeDocument(document));
+    const normalizedDocument = normalizeLegacyHeroDefaults(
+      normalizeDocument(document),
+      legacyHeroBackgroundColors
+    );
     const compileResult = compileStudioDocument(normalizedDocument, modules);
     assertCanPublish(compileResult.issues);
     await payload.update({
@@ -657,6 +683,146 @@ var toEditorInitialDoc = (payloadPage) => ({
   title: payloadPage.title
 });
 
+// src/studio-pages/pageFields.ts
+var formatSlugValue = (value) => {
+  if (typeof value !== "string") return void 0;
+  return value.trim().toLowerCase().replace(/[^a-z0-9/]+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+};
+function createStudioPageFields(options = {}) {
+  const {
+    blocks = defaultPageLayoutBlocks,
+    mediaCollectionSlug = "media",
+    additionalFields = []
+  } = options;
+  return [
+    {
+      name: "title",
+      type: "text",
+      required: true
+    },
+    {
+      name: "slug",
+      type: "text",
+      admin: {
+        description: "URL identifier for this page. `home` is served at `/`.",
+        position: "sidebar"
+      },
+      hooks: {
+        beforeValidate: [({ value }) => formatSlugValue(value) ?? value]
+      },
+      index: true,
+      required: true,
+      unique: true
+    },
+    {
+      name: "path",
+      type: "text",
+      admin: {
+        description: "Full public path. Derived from the slug when left empty.",
+        position: "sidebar"
+      },
+      hooks: {
+        beforeValidate: [
+          ({ value, data }) => {
+            if (typeof value === "string" && value.trim().length > 0) {
+              return value.trim();
+            }
+            const slug = formatSlugValue(data?.slug);
+            if (!slug) return value;
+            return slug === "home" ? "/" : `/${slug}`;
+          }
+        ]
+      },
+      index: true,
+      unique: true
+    },
+    {
+      name: "studioDocument",
+      type: "json",
+      admin: {
+        description: "Canonical Studio editor state. Managed by the page builder.",
+        hidden: true
+      }
+    },
+    {
+      name: "studioValidationIssues",
+      type: "json",
+      admin: {
+        description: "Validation issues from the last Studio compile. Managed by the page builder.",
+        hidden: true
+      }
+    },
+    {
+      name: "layout",
+      type: "blocks",
+      admin: {
+        description: "Compiled output only \u2014 edit pages through the Studio builder."
+      },
+      blocks
+    },
+    {
+      name: "seo",
+      type: "group",
+      fields: [
+        { name: "metaTitle", type: "text" },
+        { name: "metaDescription", type: "textarea" },
+        { name: "canonicalUrl", type: "text" },
+        {
+          name: "ogImage",
+          type: "upload",
+          relationTo: mediaCollectionSlug
+        }
+      ]
+    },
+    {
+      name: "noIndex",
+      type: "checkbox",
+      admin: { position: "sidebar" },
+      defaultValue: false
+    },
+    {
+      name: "noFollow",
+      type: "checkbox",
+      admin: { position: "sidebar" },
+      defaultValue: false
+    },
+    ...additionalFields
+  ];
+}
+function createStudioPagesCollection(options = {}) {
+  const { slug = "pages", access, overrides, ...fieldOptions } = options;
+  const base = {
+    slug,
+    access: access || {
+      create: ({ req }) => Boolean(req.user),
+      delete: ({ req }) => Boolean(req.user),
+      read: ({ req }) => {
+        if (req.user) return true;
+        return { _status: { equals: "published" } };
+      },
+      update: ({ req }) => Boolean(req.user)
+    },
+    admin: {
+      defaultColumns: ["title", "slug", "_status", "updatedAt"],
+      useAsTitle: "title"
+    },
+    fields: createStudioPageFields(fieldOptions),
+    versions: {
+      drafts: {
+        autosave: false
+      },
+      maxPerDoc: 50
+    }
+  };
+  if (!overrides) return base;
+  return {
+    ...base,
+    ...overrides,
+    admin: { ...base.admin, ...overrides.admin },
+    fields: overrides.fields || base.fields
+  };
+}
+
 // src/studio-pages/migrations.ts
 var isRecord3 = (value) => Boolean(value) && typeof value === "object" && !Array.isArray(value);
 var assertPageStudioDocumentV1 = (value) => {
@@ -1012,9 +1178,13 @@ var pageStudioModuleManifest = {
 
 export {
   resolveBuilderThemeTokens,
+  defaultRelationshipHydrationMap,
+  DEFAULT_LEGACY_HERO_BACKGROUND_COLORS,
   getStudioDocumentFromPage,
   createStudioPageService,
   toEditorInitialDoc,
+  createStudioPageFields,
+  createStudioPagesCollection,
   pageNodeTypes,
   pagePaletteGroups,
   pageInspectorPanels,

package/dist/{chunk-JQAHXYAM.mjs → chunk-KMYMSR7W.mjs}

@@ -1,6 +1,3 @@
-import {
-  sectionStyleFields
-} from "./chunk-OQSEJXC4.mjs";
 import {
   __export
 } from "./chunk-6BWS3CLP.mjs";
@@ -34,6 +31,168 @@ var builderBlockLabelComponent = {
   path: "@orion-studios/payload-studio/blocks"
 };
 
+// src/blocks/blocks/sectionStyleFields.ts
+var sectionStyleDefaults = {
+  contentBackgroundColor: "#ffffff",
+  contentBackgroundMode: "none",
+  contentGradientAngle: "135",
+  contentGradientFrom: "#ffffff",
+  contentGradientPreset: "none",
+  contentGradientTo: "#f4f6f8",
+  contentWidth: "inherit",
+  sectionPaddingX: "inherit",
+  sectionBackgroundColor: "#ffffff",
+  sectionBackgroundMode: "none",
+  sectionGradientAngle: "135",
+  sectionGradientFrom: "#334b63",
+  sectionGradientPreset: "slate",
+  sectionGradientTo: "#496582",
+  sectionPaddingY: "md",
+  sectionWidth: "content"
+};
+var hideFromCMS = (field) => ({
+  ...field,
+  admin: {
+    ...field.admin || {},
+    hidden: true
+  }
+});
+var sectionStyleFields = () => {
+  const fields = [
+    {
+      name: "sectionWidth",
+      type: "select",
+      defaultValue: sectionStyleDefaults.sectionWidth,
+      options: [
+        { label: "Content", value: "content" },
+        { label: "Wide", value: "wide" },
+        { label: "Full", value: "full" }
+      ]
+    },
+    {
+      name: "contentWidth",
+      type: "select",
+      defaultValue: sectionStyleDefaults.contentWidth,
+      options: [
+        { label: "Inherit", value: "inherit" },
+        { label: "Narrow", value: "narrow" },
+        { label: "Content", value: "content" },
+        { label: "Wide", value: "wide" },
+        { label: "Full", value: "full" }
+      ]
+    },
+    {
+      name: "sectionPaddingY",
+      type: "select",
+      defaultValue: sectionStyleDefaults.sectionPaddingY,
+      options: [
+        { label: "None", value: "none" },
+        { label: "Small", value: "sm" },
+        { label: "Medium", value: "md" },
+        { label: "Large", value: "lg" }
+      ]
+    },
+    {
+      name: "sectionPaddingX",
+      type: "select",
+      defaultValue: sectionStyleDefaults.sectionPaddingX,
+      options: [
+        { label: "Inherit", value: "inherit" },
+        { label: "None", value: "none" },
+        { label: "Small", value: "sm" },
+        { label: "Medium", value: "md" },
+        { label: "Large", value: "lg" }
+      ]
+    },
+    {
+      name: "sectionBackgroundMode",
+      type: "select",
+      defaultValue: sectionStyleDefaults.sectionBackgroundMode,
+      options: [
+        { label: "None", value: "none" },
+        { label: "Color", value: "color" },
+        { label: "Gradient", value: "gradient" }
+      ]
+    },
+    {
+      name: "sectionBackgroundColor",
+      type: "text",
+      defaultValue: sectionStyleDefaults.sectionBackgroundColor
+    },
+    {
+      name: "sectionGradientPreset",
+      type: "select",
+      defaultValue: sectionStyleDefaults.sectionGradientPreset,
+      options: [
+        { label: "None", value: "none" },
+        { label: "Brand", value: "brand" },
+        { label: "Forest", value: "forest" },
+        { label: "Moss", value: "moss" },
+        { label: "Cream", value: "cream" },
+        { label: "Slate", value: "slate" }
+      ]
+    },
+    {
+      name: "sectionGradientFrom",
+      type: "text",
+      defaultValue: sectionStyleDefaults.sectionGradientFrom
+    },
+    {
+      name: "sectionGradientTo",
+      type: "text",
+      defaultValue: sectionStyleDefaults.sectionGradientTo
+    },
+    {
+      name: "sectionGradientAngle",
+      type: "text",
+      defaultValue: sectionStyleDefaults.sectionGradientAngle
+    },
+    {
+      name: "contentBackgroundMode",
+      type: "select",
+      defaultValue: sectionStyleDefaults.contentBackgroundMode,
+      options: [
+        { label: "None", value: "none" },
+        { label: "Color", value: "color" },
+        { label: "Gradient", value: "gradient" }
+      ]
+    },
+    {
+      name: "contentBackgroundColor",
+      type: "text",
+      defaultValue: sectionStyleDefaults.contentBackgroundColor
+    },
+    {
+      name: "contentGradientPreset",
+      type: "select",
+      defaultValue: sectionStyleDefaults.contentGradientPreset,
+      options: [
+        { label: "None", value: "none" },
+        { label: "Cloud", value: "cloud" },
+        { label: "Sand", value: "sand" },
+        { label: "Mint", value: "mint" },
+        { label: "Night", value: "night" }
+      ]
+    },
+    {
+      name: "contentGradientFrom",
+      type: "text",
+      defaultValue: sectionStyleDefaults.contentGradientFrom
+    },
+    {
+      name: "contentGradientTo",
+      type: "text",
+      defaultValue: sectionStyleDefaults.contentGradientTo
+    },
+    {
+      name: "contentGradientAngle",
+      type: "text",
+      defaultValue: sectionStyleDefaults.contentGradientAngle
+    }
+  ];
+  return fields.map(hideFromCMS);
+};
+
 // src/blocks/blocks/BeforeAfter.ts
 var BeforeAfterBlock = {
   slug: "beforeAfter",
@@ -1808,6 +1967,7 @@ var defaultPageLayoutBlocks = [
 
 export {
   builderBlockLabelComponent,
+  sectionStyleDefaults,
   BeforeAfterBlock,
   BookingEmbedBlock,
   CtaBlock,