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

package/dist/{chunk-NGLIA2OE.mjs → chunk-DTHBPJXU.mjs}

@@ -1,6 +1,3 @@
-import {
-  sectionStyleDefaults
-} from "./chunk-OQSEJXC4.mjs";
 import {
   createDefaultStudioDocument,
   defaultBuilderThemeTokens,
@@ -14,6 +11,10 @@ import {
   createEmptyStudioDocument,
   validateStudioDocument
 } from "./chunk-ADIIWIYL.mjs";
+import {
+  defaultPageLayoutBlocks,
+  sectionStyleDefaults
+} 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,

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

@@ -231,23 +231,33 @@ function configureAdmin(config) {
   if (cssSources.length === 0) {
     cssPath = sourceCssPath;
   } else {
-    let css = cssSources.map((filePath) => fs.readFileSync(filePath, "utf-8")).join("\n\n");
-    css = css.replace(
-      "--orion-cms-brand-primary-fallback: #3b82f6;",
-      `--orion-cms-brand-primary-fallback: ${brandPrimary};`
-    );
-    css = css.replace(
-      "--orion-cms-brand-secondary-fallback: #8b5cf6;",
-      `--orion-cms-brand-secondary-fallback: ${brandSecondary};`
-    );
-    const outputBasePath = config.basePath || process.cwd();
-    const genDir = path.resolve(outputBasePath, ".generated");
-    if (!fs.existsSync(genDir)) {
-      fs.mkdirSync(genDir, { recursive: true });
+    try {
+      let css = cssSources.map((filePath) => fs.readFileSync(filePath, "utf-8")).join("\n\n");
+      css = css.replace(
+        "--orion-cms-brand-primary-fallback: #3b82f6;",
+        `--orion-cms-brand-primary-fallback: ${brandPrimary};`
+      );
+      css = css.replace(
+        "--orion-cms-brand-secondary-fallback: #8b5cf6;",
+        `--orion-cms-brand-secondary-fallback: ${brandSecondary};`
+      );
+      const outputBasePath = config.basePath || process.cwd();
+      const genDir = path.resolve(outputBasePath, ".generated");
+      const genPath = path.resolve(genDir, "admin.css");
+      let existing = null;
+      try {
+        existing = fs.readFileSync(genPath, "utf-8");
+      } catch {
+        existing = null;
+      }
+      if (existing !== css) {
+        fs.mkdirSync(genDir, { recursive: true });
+        fs.writeFileSync(genPath, css);
+      }
+      cssPath = genPath;
+    } catch {
+      cssPath = sourceCssPath;
     }
-    const genPath = path.resolve(genDir, "admin.css");
-    fs.writeFileSync(genPath, css);
-    cssPath = genPath;
   }
   const clientPath = "@orion-studios/payload-studio/admin/client";
   const studioNavClientProps = {
@@ -700,16 +710,47 @@ function configureAdmin(config) {
       });
     },
     wrapGlobals(globals2) {
-      const labelMap = {
+      const defaultLabelMap = {
         header: { group: "Site Design", label: "Header & Navigation" },
         footer: { group: "Site Design", label: "Footer" },
         "site-settings": { group: "Site Design", label: "Website Settings" },
         "social-media": { group: "Site Design", label: "Social Media" },
         "contact-form": { group: "Lead Forms", label: "Contact Form" }
       };
+      const configuredBySlug = new Map(
+        (config.studio?.globals || []).map((link) => [link.slug, link])
+      );
+      const attachBreadcrumbToGlobal = (global) => {
+        if (!studioEnabled) {
+          return global;
+        }
+        const existingControls = global.admin?.components?.elements?.beforeDocumentControls;
+        return {
+          ...global,
+          admin: {
+            ...global.admin,
+            components: {
+              ...global.admin?.components,
+              elements: {
+                ...global.admin?.components?.elements,
+                beforeDocumentControls: appendComponent(
+                  existingControls,
+                  studioBackBreadcrumbComponent,
+                  "StudioBackBreadcrumb"
+                )
+              }
+            }
+          }
+        };
+      };
       return globals2.map((global) => {
-        const mapping = labelMap[global.slug];
-        if (!mapping) return global;
+        const configured = configuredBySlug.get(global.slug);
+        const defaults = defaultLabelMap[global.slug];
+        const mapping = configured || defaults ? {
+          group: configured?.group || defaults?.group,
+          label: configured?.label || defaults?.label || global.slug
+        } : void 0;
+        if (!mapping) return attachBreadcrumbToGlobal(global);
         const shouldAttachSiteSettingsEditView = studioEnabled && global.slug === "site-settings";
         const shouldAttachSocialMediaEditView = studioEnabled && global.slug === "social-media";
         const shouldAttachContactFormRedirect = studioEnabled && global.slug === "contact-form";
@@ -818,7 +859,7 @@ function configureAdmin(config) {
           ...global,
           admin: {
             ...global.admin,
-            group: mapping.group,
+            ...mapping.group ? { group: mapping.group } : {},
             components: {
               ...global.admin?.components,
               elements: {