@orion-studios/payload-studio 0.5.0-beta.7 → 0.5.0-beta.70

package/dist/blocks/index.mjs

@@ -17,8 +17,8 @@ import {
   defaultPageLayoutBlocks,
   sectionPresets,
   templateStarterPresets
-} from "../chunk-PC5622T7.mjs";
-import "../chunk-ETRRXURT.mjs";
+} from "../chunk-XK3K5GRP.mjs";
+import "../chunk-SIL2J5MF.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {
   BeforeAfterBlock,

package/dist/{chunk-ZLLNO5FM.mjs → chunk-CKX5Y2HU.mjs}

@@ -1,3 +1,9 @@
+import {
+  assertStudioDocumentV1
+} from "./chunk-HXGAG6I7.mjs";
+import {
+  studioDocumentToLayout
+} from "./chunk-VDGSMD6H.mjs";
 import {
   __export
 } from "./chunk-6BWS3CLP.mjs";
@@ -27,6 +33,24 @@ function createPayloadClient(config) {
 
 // src/nextjs/queries/pages.ts
 import { unstable_cache } from "next/cache";
+var PAGE_QUERY_CACHE_VERSION = "v4-published-only-public";
+function withStudioDocumentLayout(page) {
+  if (!page) {
+    return null;
+  }
+  try {
+    const studioDocument = assertStudioDocumentV1(page.studioDocument);
+    const compiledLayout = studioDocumentToLayout(studioDocument);
+    if (Array.isArray(compiledLayout) && compiledLayout.length > 0) {
+      return {
+        ...page,
+        layout: compiledLayout
+      };
+    }
+  } catch {
+  }
+  return page;
+}
 function normalizePath(segments) {
   if (!segments || segments.length === 0) {
     return "/";
@@ -35,35 +59,42 @@ function normalizePath(segments) {
   return cleaned.length > 0 ? `/${cleaned}` : "/";
 }
 async function queryPageByPath(payload, path, draft) {
+  const pathWhere = {
+    path: {
+      equals: path
+    }
+  };
+  const publishedWhere = {
+    _status: {
+      equals: "published"
+    }
+  };
   const result = await payload.find({
     collection: "pages",
     depth: 2,
     draft,
     limit: 1,
     overrideAccess: false,
-    where: {
-      path: {
-        equals: path
-      }
-    }
+    where: draft ? pathWhere : { and: [pathWhere, publishedWhere] }
   });
   if (result.docs.length > 0) {
-    return result.docs[0] || null;
+    return withStudioDocumentLayout(result.docs[0] || null);
   }
   if (path === "/") {
+    const homeWhere = {
+      slug: {
+        equals: "home"
+      }
+    };
     const homeResult = await payload.find({
       collection: "pages",
       depth: 2,
       draft,
       limit: 1,
       overrideAccess: false,
-      where: {
-        slug: {
-          equals: "home"
-        }
-      }
+      where: draft ? homeWhere : { and: [homeWhere, publishedWhere] }
     });
-    return homeResult.docs[0] || null;
+    return withStudioDocumentLayout(homeResult.docs[0] || null);
   }
   return null;
 }
@@ -73,7 +104,7 @@ function createPageQueries(getPayloadClient, contentTag = "website-content") {
       const payload = await getPayloadClient();
       return queryPageByPath(payload, path, false);
     },
-    ["page-by-path"],
+    ["page-by-path", PAGE_QUERY_CACHE_VERSION],
     { tags: [contentTag] }
   );
   async function getPageBySegments(segments, draft = false) {

package/dist/{chunk-J7W5EE3B.mjs → chunk-HCEPGEAI.mjs}

@@ -7,6 +7,7 @@ import {
 var admin_exports = {};
 __export(admin_exports, {
   configureAdmin: () => configureAdmin,
+  createHeaderNavItemsField: () => createHeaderNavItemsField,
   createThemePreferenceField: () => createThemePreferenceField,
   themePreferenceField: () => themePreferenceField,
   withTooltips: () => withTooltips
@@ -61,14 +62,25 @@ function configureAdmin(config) {
     defaultTheme = "brand-light",
     logoUrl
   } = config;
-  const studioEnabled = Boolean(config.studio?.enabled);
+  const studioEnabled = config.studio?.enabled ?? true;
   const pagesCollectionSlug = config.studio?.pages?.collectionSlug || "pages";
   const mediaCollectionSlug = config.studio?.media?.collectionSlug || "media";
-  const globals = config.studio?.globals || [
+  const contactFormStudioPath = "/studio-contact-form";
+  const configuredGlobals = config.studio?.globals || [
     { slug: "site-settings", label: "Website Settings" },
     { slug: "header", label: "Header & Navigation" },
-    { slug: "footer", label: "Footer" }
+    { slug: "footer", label: "Footer" },
+    { slug: "contact-form", label: "Contact Form" }
   ];
+  const globals = configuredGlobals.map((global) => {
+    if (global.slug !== "contact-form" || global.href) {
+      return global;
+    }
+    return {
+      ...global,
+      href: contactFormStudioPath
+    };
+  });
   let cssPath;
   const pkgDist = getPkgDistDir();
   const sourceCssPath = path.resolve(pkgDist, "admin.css");
@@ -98,7 +110,8 @@ function configureAdmin(config) {
             clientProps: {
               brandName,
               logoUrl,
-              globalsBasePath: "/admin/studio-globals",
+              globalsBasePath: "/studio-globals",
+              globalsExtraMatchPrefixes: [contactFormStudioPath],
               mediaCollectionSlug,
               pagesCollectionSlug
             }
@@ -130,7 +143,8 @@ function configureAdmin(config) {
               clientProps: {
                 brandName,
                 logoUrl,
-                globalsBasePath: "/admin/studio-globals",
+                globalsBasePath: "/studio-globals",
+                globalsExtraMatchPrefixes: [contactFormStudioPath],
                 mediaCollectionSlug,
                 pagesCollectionSlug
               }
@@ -144,7 +158,18 @@ function configureAdmin(config) {
                 path: clientPath,
                 clientProps: {
                   globals,
-                  globalsBasePath: "/admin/studio-globals"
+                  globalsBasePath: "/studio-globals"
+                }
+              }
+            },
+            studioContactForm: {
+              path: "/studio-contact-form",
+              Component: {
+                exportName: "AdminStudioContactFormView",
+                path: clientPath,
+                clientProps: {
+                  globalSlug: "contact-form",
+                  globalsBasePath: "/studio-globals"
                 }
               }
             }
@@ -191,16 +216,47 @@ function configureAdmin(config) {
       const labelMap = {
         header: { group: "Site Design", label: "Header & Navigation" },
         footer: { group: "Site Design", label: "Footer" },
-        "site-settings": { group: "Site Design", label: "Website Settings" }
+        "site-settings": { group: "Site Design", label: "Website Settings" },
+        "contact-form": { group: "Lead Forms", label: "Contact Form" }
       };
       return globals2.map((global) => {
         const mapping = labelMap[global.slug];
         if (!mapping) return global;
+        const shouldAttachContactFormRedirect = studioEnabled && global.slug === "contact-form";
+        const existingViews = global.admin?.components?.views;
+        const existingEditViews = existingViews?.edit;
+        const hasCustomContactFormEditView = Boolean(
+          existingEditViews?.root || existingEditViews?.default && typeof existingEditViews.default === "object" && existingEditViews.default.Component
+        );
+        const contactFormEditViews = shouldAttachContactFormRedirect && !hasCustomContactFormEditView ? {
+          ...existingEditViews,
+          default: {
+            ...typeof existingEditViews?.default === "object" ? existingEditViews.default : {},
+            Component: {
+              exportName: "StudioContactFormRedirect",
+              path: clientPath,
+              clientProps: {
+                studioContactFormPath: contactFormStudioPath
+              }
+            }
+          }
+        } : existingEditViews;
         return {
           ...global,
           admin: {
             ...global.admin,
-            group: mapping.group
+            group: mapping.group,
+            components: {
+              ...global.admin?.components,
+              ...shouldAttachContactFormRedirect ? {
+                views: {
+                  ...existingViews,
+                  ...contactFormEditViews ? {
+                    edit: contactFormEditViews
+                  } : {}
+                }
+              } : {}
+            }
           },
           label: mapping.label
         };
@@ -269,10 +325,46 @@ function addTooltipToField(field, tooltips) {
   return field;
 }
 
+// src/admin/fields/headerNav.ts
+var createHeaderNavItemsField = () => ({
+  name: "navItems",
+  type: "array",
+  labels: { singular: "Navigation Link", plural: "Navigation Links" },
+  admin: {
+    description: "The links displayed in your website's main navigation menu."
+  },
+  fields: [
+    {
+      name: "label",
+      type: "text",
+      required: true,
+      admin: {
+        description: "The text shown for this navigation link."
+      }
+    },
+    {
+      name: "href",
+      type: "text",
+      required: true,
+      admin: {
+        description: 'The URL this link points to (e.g., "/about" or "https://example.com").'
+      }
+    },
+    {
+      name: "parentHref",
+      type: "text",
+      admin: {
+        description: "Optional parent link URL. If set to another nav item href, this item appears in that dropdown."
+      }
+    }
+  ]
+});
+
 export {
   createThemePreferenceField,
   themePreferenceField,
   configureAdmin,
   withTooltips,
+  createHeaderNavItemsField,
   admin_exports
 };

package/dist/chunk-HXGAG6I7.mjs

@@ -0,0 +1,325 @@
+import {
+  __export
+} from "./chunk-6BWS3CLP.mjs";
+
+// src/studio/index.ts
+var studio_exports = {};
+__export(studio_exports, {
+  assertStudioDocumentV1: () => assertStudioDocumentV1,
+  compileStudioDocument: () => compileStudioDocument,
+  createEmptyStudioDocument: () => createEmptyStudioDocument,
+  createImageUploadOptimizationHook: () => createImageUploadOptimizationHook,
+  createStudioRegistry: () => createStudioRegistry,
+  migrateStudioDocument: () => migrateStudioDocument,
+  validateStudioDocument: () => validateStudioDocument,
+  withImageUploadOptimization: () => withImageUploadOptimization
+});
+
+// src/studio/imageUploadOptimization.ts
+import { readFile, unlink } from "fs/promises";
+var DEFAULT_SUPPORTED_MIME_TYPES = [
+  "image/jpeg",
+  "image/jpg",
+  "image/png",
+  "image/webp",
+  "image/avif",
+  "image/tiff"
+];
+var DEFAULT_OPTIONS = {
+  avifQuality: 50,
+  enforceSmallerForLossy: true,
+  jpegQuality: 78,
+  minBytes: 48 * 1024,
+  minQualityFloor: 42,
+  onlyIfSmaller: true,
+  pngCompressionLevel: 9,
+  skipAnimated: true,
+  tiffQuality: 75,
+  webpQuality: 78
+};
+var clamp = (value, min, max) => Math.max(min, Math.min(max, Math.round(value)));
+var isUploadMutationOperation = (operation) => operation === "create" || operation === "update" || operation === "updateByID";
+var isLossyMimeType = (mimetype) => mimetype === "image/jpeg" || mimetype === "image/jpg" || mimetype === "image/webp" || mimetype === "image/avif" || mimetype === "image/tiff";
+var readIncomingBuffer = async (file) => {
+  if (file.tempFilePath) {
+    return readFile(file.tempFilePath);
+  }
+  return file.data;
+};
+var writeOptimizedBuffer = async (file, buffer) => {
+  if (file.tempFilePath) {
+    await unlink(file.tempFilePath).catch(() => void 0);
+  }
+  return {
+    ...file,
+    data: buffer,
+    size: buffer.length,
+    tempFilePath: void 0
+  };
+};
+var createImageUploadOptimizationHook = (options = {}) => {
+  const supportedMimeTypes = new Set(options.supportedMimeTypes || DEFAULT_SUPPORTED_MIME_TYPES);
+  const settings = { ...DEFAULT_OPTIONS, ...options };
+  return async ({ operation, req }) => {
+    if (!isUploadMutationOperation(operation)) {
+      return;
+    }
+    const file = req.file;
+    if (!file) {
+      return;
+    }
+    if (!supportedMimeTypes.has(file.mimetype)) {
+      return;
+    }
+    if (typeof file.size === "number" && file.size < settings.minBytes) {
+      return;
+    }
+    const sharpFactory = req.payload?.config?.sharp;
+    if (typeof sharpFactory !== "function") {
+      return;
+    }
+    const originalBuffer = await readIncomingBuffer(file);
+    if (!Buffer.isBuffer(originalBuffer) || originalBuffer.length === 0) {
+      return;
+    }
+    const animatedInput = file.mimetype === "image/avif" || file.mimetype === "image/webp";
+    const metadataProbe = await sharpFactory(
+      originalBuffer,
+      animatedInput ? {
+        animated: true
+      } : void 0
+    ).metadata();
+    if (settings.skipAnimated && typeof metadataProbe.pages === "number" && metadataProbe.pages > 1) {
+      return;
+    }
+    const buildPipeline = (qualityOverride) => {
+      let pipeline = sharpFactory(
+        originalBuffer,
+        animatedInput ? {
+          animated: true
+        } : void 0
+      );
+      switch (file.mimetype) {
+        case "image/jpeg":
+        case "image/jpg":
+          pipeline = pipeline.jpeg({
+            mozjpeg: true,
+            progressive: true,
+            quality: clamp(qualityOverride ?? settings.jpegQuality, 20, 100)
+          });
+          break;
+        case "image/png":
+          pipeline = pipeline.png({
+            compressionLevel: clamp(settings.pngCompressionLevel, 0, 9),
+            palette: false
+          });
+          break;
+        case "image/webp":
+          pipeline = pipeline.webp({
+            quality: clamp(qualityOverride ?? settings.webpQuality, 20, 100)
+          });
+          break;
+        case "image/avif":
+          pipeline = pipeline.avif({
+            quality: clamp(qualityOverride ?? settings.avifQuality, 20, 100)
+          });
+          break;
+        case "image/tiff":
+          pipeline = pipeline.tiff({
+            quality: clamp(qualityOverride ?? settings.tiffQuality, 20, 100)
+          });
+          break;
+        default:
+          return null;
+      }
+      return pipeline;
+    };
+    const initialPipeline = buildPipeline();
+    if (!initialPipeline) {
+      return;
+    }
+    let optimizedBuffer = await initialPipeline.toBuffer();
+    const shouldSweepQuality = settings.enforceSmallerForLossy && isLossyMimeType(file.mimetype);
+    if (shouldSweepQuality) {
+      const initialQuality = file.mimetype === "image/jpeg" || file.mimetype === "image/jpg" ? settings.jpegQuality : file.mimetype === "image/webp" ? settings.webpQuality : file.mimetype === "image/avif" ? settings.avifQuality : settings.tiffQuality;
+      let bestBuffer = optimizedBuffer;
+      let quality = clamp(initialQuality - 5, settings.minQualityFloor, 100);
+      while (quality >= settings.minQualityFloor) {
+        const retryPipeline = buildPipeline(quality);
+        if (!retryPipeline) {
+          break;
+        }
+        const retryBuffer = await retryPipeline.toBuffer();
+        if (retryBuffer.length < bestBuffer.length) {
+          bestBuffer = retryBuffer;
+        }
+        quality -= 5;
+      }
+      optimizedBuffer = bestBuffer;
+    }
+    if (settings.onlyIfSmaller && optimizedBuffer.length >= originalBuffer.length) {
+      return;
+    }
+    req.file = await writeOptimizedBuffer(file, optimizedBuffer);
+  };
+};
+var withImageUploadOptimization = (collection, options = {}) => {
+  if (!collection.upload) {
+    return collection;
+  }
+  const existingHooks = collection.hooks || {};
+  const beforeOperation = existingHooks.beforeOperation || [];
+  return {
+    ...collection,
+    hooks: {
+      ...existingHooks,
+      beforeOperation: [createImageUploadOptimizationHook(options), ...beforeOperation]
+    }
+  };
+};
+
+// src/studio/index.ts
+var isRecord = (value) => Boolean(value) && typeof value === "object" && !Array.isArray(value);
+var makeIssue = (message, path, code = "studio.invalid") => ({
+  code,
+  message,
+  path,
+  severity: "error"
+});
+var createEmptyStudioDocument = (title) => ({
+  metadata: {},
+  schemaVersion: 1,
+  title,
+  nodes: [],
+  updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+});
+function assertStudioDocumentV1(input) {
+  if (!isRecord(input)) {
+    throw new Error("Studio document must be an object");
+  }
+  if (input.schemaVersion !== 1) {
+    throw new Error("Unsupported studio schemaVersion");
+  }
+  if (!Array.isArray(input.nodes)) {
+    throw new Error("Studio document nodes must be an array");
+  }
+  const nodes = input.nodes.map((node, index) => {
+    if (!isRecord(node)) {
+      throw new Error(`Node at index ${index} must be an object`);
+    }
+    if (typeof node.id !== "string" || node.id.length === 0) {
+      throw new Error(`Node at index ${index} has invalid id`);
+    }
+    if (typeof node.type !== "string" || node.type.length === 0) {
+      throw new Error(`Node at index ${index} has invalid type`);
+    }
+    if (!isRecord(node.data)) {
+      throw new Error(`Node at index ${index} has invalid data`);
+    }
+    return {
+      id: node.id,
+      type: node.type,
+      data: node.data
+    };
+  });
+  return {
+    metadata: isRecord(input.metadata) ? input.metadata : void 0,
+    schemaVersion: 1,
+    title: typeof input.title === "string" ? input.title : void 0,
+    nodes,
+    updatedAt: typeof input.updatedAt === "string" ? input.updatedAt : void 0
+  };
+}
+function createStudioRegistry(modules) {
+  const moduleByID = new Map(modules.map((mod) => [mod.id, mod]));
+  const nodeTypes = modules.flatMap((mod) => mod.nodeTypes);
+  const nodeTypeByName = new Map(nodeTypes.map((definition) => [definition.type, definition]));
+  return {
+    getModuleByID: (id) => moduleByID.get(id),
+    getNodeTypeByName: (type) => nodeTypeByName.get(type),
+    listInspectorPanels: () => modules.flatMap((mod) => mod.inspectorPanels),
+    listModules: () => [...modules],
+    listPaletteGroups: () => modules.flatMap((mod) => mod.paletteGroups),
+    listNodeTypes: () => [...nodeTypes]
+  };
+}
+function validateStudioDocument(document, modules) {
+  const issues = [];
+  if (document.schemaVersion !== 1) {
+    issues.push(makeIssue("Unsupported schema version", "schemaVersion", "studio.schemaVersion"));
+  }
+  if (!Array.isArray(document.nodes)) {
+    issues.push(makeIssue("Nodes must be an array", "nodes", "studio.nodes"));
+    return issues;
+  }
+  const registry = createStudioRegistry(modules);
+  const nodeIDs = /* @__PURE__ */ new Set();
+  document.nodes.forEach((node, index) => {
+    if (!node.id) {
+      issues.push(makeIssue("Node id is required", `nodes.${index}.id`, "studio.node.id"));
+    }
+    if (nodeIDs.has(node.id)) {
+      issues.push(makeIssue("Node id must be unique", `nodes.${index}.id`, "studio.node.id.duplicate"));
+    }
+    nodeIDs.add(node.id);
+    if (!registry.getNodeTypeByName(node.type)) {
+      issues.push(makeIssue("Unsupported node type", `nodes.${index}.type`, "studio.node.type"));
+    }
+  });
+  for (const module of modules) {
+    for (const validate of module.validators) {
+      issues.push(...validate(document));
+    }
+  }
+  return issues;
+}
+function compileStudioDocument(document, modules) {
+  const issues = validateStudioDocument(document, modules);
+  const compilerEntries = modules.filter((mod) => typeof mod.compiler?.compileNode === "function").map((mod) => mod.compiler?.compileNode);
+  const layout = document.nodes.map((node) => {
+    for (const compileNode of compilerEntries) {
+      if (!compileNode) {
+        continue;
+      }
+      const compiled = compileNode(node);
+      if (compiled) {
+        return compiled;
+      }
+    }
+    return {
+      id: node.id,
+      blockType: node.type,
+      ...node.data
+    };
+  });
+  return {
+    issues,
+    layout
+  };
+}
+function migrateStudioDocument(value, migrations) {
+  const sorted = [...migrations].sort((a, b) => a.fromVersion - b.fromVersion);
+  if (isRecord(value) && value.schemaVersion === 1) {
+    return assertStudioDocumentV1(value);
+  }
+  let current = value;
+  for (const migration of sorted) {
+    if (!isRecord(current) || current.schemaVersion !== migration.fromVersion) {
+      continue;
+    }
+    current = migration.migrate(current);
+  }
+  return assertStudioDocumentV1(current);
+}
+
+export {
+  createImageUploadOptimizationHook,
+  withImageUploadOptimization,
+  createEmptyStudioDocument,
+  assertStudioDocumentV1,
+  createStudioRegistry,
+  validateStudioDocument,
+  compileStudioDocument,
+  migrateStudioDocument,
+  studio_exports
+};

package/dist/chunk-ROTPP5CU.mjs

@@ -0,0 +1,99 @@
+'use client';
+
+// src/shared/clientImageUploadOptimization.ts
+var MAX_DIRECT_UPLOAD_BYTES = 4e6;
+var extensionForMimeType = (mimeType) => {
+  switch (mimeType) {
+    case "image/webp":
+      return ".webp";
+    case "image/png":
+      return ".png";
+    default:
+      return ".jpg";
+  }
+};
+var detectCanvasTransparency = (context, width, height) => {
+  try {
+    const { data } = context.getImageData(0, 0, width, height);
+    for (let index = 3; index < data.length; index += 4) {
+      if (data[index] < 255) {
+        return true;
+      }
+    }
+  } catch {
+  }
+  return false;
+};
+var resolveOutputMimeTypes = (sourceMime, hasTransparency) => {
+  const candidates = [];
+  if (hasTransparency) {
+    candidates.push("image/webp", "image/png");
+  } else if (sourceMime === "image/webp") {
+    candidates.push("image/webp", "image/jpeg");
+  } else if (sourceMime === "image/png") {
+    candidates.push("image/webp", "image/jpeg", "image/png");
+  } else {
+    candidates.push("image/jpeg", "image/webp");
+  }
+  return [...new Set(candidates)];
+};
+async function optimizeImageForUpload(file) {
+  if (!file.type.startsWith("image/")) {
+    return file;
+  }
+  const objectURL = URL.createObjectURL(file);
+  try {
+    const image = await new Promise((resolve, reject) => {
+      const nextImage = new Image();
+      nextImage.onload = () => resolve(nextImage);
+      nextImage.onerror = () => reject(new Error("Could not read image for upload optimization."));
+      nextImage.src = objectURL;
+    });
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.max(1, image.width);
+    canvas.height = Math.max(1, image.height);
+    const context = canvas.getContext("2d");
+    if (!context) {
+      return file;
+    }
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    const sourceMime = file.type.toLowerCase();
+    const hasTransparency = detectCanvasTransparency(context, canvas.width, canvas.height);
+    const outputMimes = resolveOutputMimeTypes(sourceMime, hasTransparency);
+    const qualityPasses = [0.82, 0.74, 0.66, 0.58, 0.5, 0.42, 0.36, 0.3, 0.26];
+    let bestFile = null;
+    for (const outputMime of outputMimes) {
+      const passes = outputMime === "image/png" ? [void 0] : qualityPasses;
+      for (const quality of passes) {
+        const blob = await new Promise((resolve) => {
+          canvas.toBlob((value) => resolve(value), outputMime, quality);
+        });
+        if (!blob) {
+          continue;
+        }
+        const optimizedName = file.name.replace(/\.[^/.]+$/, extensionForMimeType(outputMime));
+        const optimized = new File([blob], optimizedName, {
+          lastModified: Date.now(),
+          type: outputMime
+        });
+        if (!bestFile || optimized.size < bestFile.size) {
+          bestFile = optimized;
+        }
+        if (optimized.size <= MAX_DIRECT_UPLOAD_BYTES) {
+          break;
+        }
+      }
+    }
+    if (!bestFile) {
+      return file;
+    }
+    return bestFile.size < file.size ? bestFile : file;
+  } finally {
+    URL.revokeObjectURL(objectURL);
+  }
+}
+
+export {
+  MAX_DIRECT_UPLOAD_BYTES,
+  optimizeImageForUpload
+};