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

package/dist/nextjs/index.mjs

@@ -4,7 +4,10 @@ import {
   createPayloadClient,
   createSiteQueries,
   resolveMedia
-} from "../chunk-ZLLNO5FM.mjs";
+} from "../chunk-CKX5Y2HU.mjs";
+import "../chunk-HXGAG6I7.mjs";
+import "../chunk-VDGSMD6H.mjs";
+import "../chunk-SIL2J5MF.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {
   WEBSITE_CONTENT_TAG,

package/dist/studio/index.d.mts

@@ -1 +1,2 @@
-export { c as StudioCompileResult, S as StudioDocumentV1, d as StudioInspectorField, e as StudioInspectorPanel, f as StudioMigration, b as StudioModuleManifest, g as StudioNode, h as StudioNodeData, a as StudioNodeTypeDefinition, j as StudioPageService, k as StudioPaletteGroup, l as StudioPaletteItem, m as StudioPermission, n as StudioRegistry, o as StudioValidationIssue, p as assertStudioDocumentV1, q as compileStudioDocument, r as createEmptyStudioDocument, s as createStudioRegistry, t as migrateStudioDocument, v as validateStudioDocument } from '../index-CmR6NInu.mjs';
+export { I as ImageUploadOptimizationOptions, c as StudioCompileResult, S as StudioDocumentV1, d as StudioInspectorField, e as StudioInspectorPanel, f as StudioMigration, b as StudioModuleManifest, g as StudioNode, h as StudioNodeData, a as StudioNodeTypeDefinition, j as StudioPageService, k as StudioPaletteGroup, l as StudioPaletteItem, m as StudioPermission, n as StudioRegistry, o as StudioValidationIssue, p as SupportedImageMimeType, q as assertStudioDocumentV1, r as compileStudioDocument, s as createEmptyStudioDocument, t as createImageUploadOptimizationHook, u as createStudioRegistry, v as migrateStudioDocument, w as validateStudioDocument, x as withImageUploadOptimization } from '../index-BIwu3qIH.mjs';
+import 'payload';

package/dist/studio/index.d.ts

@@ -1 +1,2 @@
-export { c as StudioCompileResult, S as StudioDocumentV1, d as StudioInspectorField, e as StudioInspectorPanel, f as StudioMigration, b as StudioModuleManifest, g as StudioNode, h as StudioNodeData, a as StudioNodeTypeDefinition, j as StudioPageService, k as StudioPaletteGroup, l as StudioPaletteItem, m as StudioPermission, n as StudioRegistry, o as StudioValidationIssue, p as assertStudioDocumentV1, q as compileStudioDocument, r as createEmptyStudioDocument, s as createStudioRegistry, t as migrateStudioDocument, v as validateStudioDocument } from '../index-CmR6NInu.js';
+export { I as ImageUploadOptimizationOptions, c as StudioCompileResult, S as StudioDocumentV1, d as StudioInspectorField, e as StudioInspectorPanel, f as StudioMigration, b as StudioModuleManifest, g as StudioNode, h as StudioNodeData, a as StudioNodeTypeDefinition, j as StudioPageService, k as StudioPaletteGroup, l as StudioPaletteItem, m as StudioPermission, n as StudioRegistry, o as StudioValidationIssue, p as SupportedImageMimeType, q as assertStudioDocumentV1, r as compileStudioDocument, s as createEmptyStudioDocument, t as createImageUploadOptimizationHook, u as createStudioRegistry, v as migrateStudioDocument, w as validateStudioDocument, x as withImageUploadOptimization } from '../index-BIwu3qIH.js';
+import 'payload';

package/dist/studio/index.js

@@ -23,11 +23,178 @@ __export(studio_exports, {
   assertStudioDocumentV1: () => assertStudioDocumentV1,
   compileStudioDocument: () => compileStudioDocument,
   createEmptyStudioDocument: () => createEmptyStudioDocument,
+  createImageUploadOptimizationHook: () => createImageUploadOptimizationHook,
   createStudioRegistry: () => createStudioRegistry,
   migrateStudioDocument: () => migrateStudioDocument,
-  validateStudioDocument: () => validateStudioDocument
+  validateStudioDocument: () => validateStudioDocument,
+  withImageUploadOptimization: () => withImageUploadOptimization
 });
 module.exports = __toCommonJS(studio_exports);
+
+// src/studio/imageUploadOptimization.ts
+var import_promises = require("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 (0, import_promises.readFile)(file.tempFilePath);
+  }
+  return file.data;
+};
+var writeOptimizedBuffer = async (file, buffer) => {
+  if (file.tempFilePath) {
+    await (0, import_promises.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,
@@ -165,7 +332,9 @@ function migrateStudioDocument(value, migrations) {
   assertStudioDocumentV1,
   compileStudioDocument,
   createEmptyStudioDocument,
+  createImageUploadOptimizationHook,
   createStudioRegistry,
   migrateStudioDocument,
-  validateStudioDocument
+  validateStudioDocument,
+  withImageUploadOptimization
 });

package/dist/studio/index.mjs

@@ -2,16 +2,20 @@ import {
   assertStudioDocumentV1,
   compileStudioDocument,
   createEmptyStudioDocument,
+  createImageUploadOptimizationHook,
   createStudioRegistry,
   migrateStudioDocument,
-  validateStudioDocument
-} from "../chunk-N67KVM2S.mjs";
+  validateStudioDocument,
+  withImageUploadOptimization
+} from "../chunk-HXGAG6I7.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {
   assertStudioDocumentV1,
   compileStudioDocument,
   createEmptyStudioDocument,
+  createImageUploadOptimizationHook,
   createStudioRegistry,
   migrateStudioDocument,
-  validateStudioDocument
+  validateStudioDocument,
+  withImageUploadOptimization
 };

package/dist/studio-pages/builder.css

@@ -38,6 +38,22 @@ h4 {
   padding-inline: var(--orion-shell-inline);
 }
 
+.orion-builder-shell.padx-none {
+  --orion-shell-inline: 0px;
+}
+
+.orion-builder-shell.padx-sm {
+  --orion-shell-inline: 0.6rem;
+}
+
+.orion-builder-shell.padx-md {
+  --orion-shell-inline: 1.2rem;
+}
+
+.orion-builder-shell.padx-lg {
+  --orion-shell-inline: 2rem;
+}
+
 .orion-builder-shell.pad-sm {
   --orion-shell-padding-y: 1.4rem;
 }
@@ -88,12 +104,12 @@ h4 {
   padding: 0;
 }
 
-.orion-builder-shell.hero {
+.orion-builder-shell .hero {
   margin: 0;
   background: transparent;
 }
 
-.orion-builder-shell.hero .hero-media {
+.orion-builder-shell .hero-media {
   background: transparent;
 }
 
@@ -154,11 +170,51 @@ h4 {
 
 .hero-grid {
   display: grid;
+  border-radius: inherit;
+  overflow: hidden;
 }
 
 .hero-media {
   min-height: 360px;
   background: transparent;
+  border-radius: inherit;
+}
+
+.orion-builder-upload-slot {
+  position: relative;
+}
+
+.orion-builder-upload-overlay {
+  align-items: center;
+  background: rgba(9, 28, 21, 0.58);
+  border-radius: inherit;
+  color: #ffffff;
+  display: inline-flex;
+  font-size: 0.8rem;
+  font-weight: 700;
+  gap: 0.5rem;
+  inset: 0;
+  justify-content: center;
+  letter-spacing: 0.01em;
+  pointer-events: none;
+  position: absolute;
+  z-index: 4;
+}
+
+.orion-builder-upload-spinner {
+  animation: orion-builder-upload-spin 0.9s linear infinite;
+  border: 2px solid rgba(255, 255, 255, 0.35);
+  border-radius: 999px;
+  border-top-color: #ffffff;
+  display: inline-block;
+  height: 18px;
+  width: 18px;
+}
+
+@keyframes orion-builder-upload-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .hero-content {
@@ -209,7 +265,8 @@ h4 {
 .feature-grid {
   display: grid;
   gap: 0.9rem;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  /* Mobile-first: stack. Projects can override in their own globals.css. */
+  grid-template-columns: 1fr;
   margin-top: 1rem;
 }
 
@@ -261,7 +318,8 @@ h4 {
 .card-grid.services {
   display: grid;
   gap: 0.9rem;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  /* Mobile-first: stack. */
+  grid-template-columns: 1fr;
   margin-top: 1rem;
 }
 
@@ -281,15 +339,106 @@ h4 {
 .split.testimonials-grid {
   display: grid;
   gap: 0.9rem;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  /* Mobile-first: stack. */
+  grid-template-columns: 1fr;
   margin-top: 1rem;
 }
 
+.testimonials-stage {
+  position: relative;
+  margin-top: 1rem;
+}
+
+.testimonials-stage.is-navigable {
+  padding-inline: 2.8rem;
+}
+
+.testimonials-stage .split.testimonials-grid {
+  margin-top: 0;
+}
+
+.testimonial-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 42px;
+  height: 42px;
+  border-radius: 999px;
+  border: 1px solid rgba(19, 33, 28, 0.14);
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 18px 34px rgba(15, 125, 82, 0.12);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.testimonial-nav span {
+  color: var(--orion-studio-accent);
+  font-size: 1.55rem;
+  line-height: 1;
+}
+
+.testimonial-nav--prev {
+  left: 0.35rem;
+}
+
+.testimonial-nav--next {
+  right: 0.35rem;
+}
+
 .quote {
   font-size: 0.98rem;
+  line-height: 1.55;
   color: var(--orion-studio-ink);
 }
 
+.testimonial-quote-mark {
+  display: block;
+  font-size: 2.2rem;
+  line-height: 0.8;
+  color: #e7b55a;
+  margin-bottom: 0;
+  opacity: 0.8;
+}
+
+.testimonial-quote-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.65rem;
+  margin-bottom: 0.2rem;
+}
+
+.testimonial-quote {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+
+.testimonial-stars {
+  color: #e7b55a;
+  display: inline-flex;
+  font-size: 0.92rem;
+  gap: 0.04rem;
+  letter-spacing: 0.02em;
+  line-height: 1;
+  margin-top: 0.2rem;
+  white-space: nowrap;
+}
+
+.testimonial-stars-muted {
+  color: rgba(13, 74, 55, 0.25);
+}
+
+@supports not (-webkit-line-clamp: 1) {
+  .testimonial-quote {
+    display: block;
+    max-height: calc((3 * 1.55em) - 0.5px);
+  }
+}
+
 .quote-author {
   margin-top: 0.75rem;
   display: flex;
@@ -352,6 +501,7 @@ h4 {
   border: 1px solid rgba(19, 33, 28, 0.12);
   border-radius: 18px;
   overflow: hidden;
+  position: relative;
 }
 
 .media-figure img {
@@ -372,7 +522,8 @@ h4 {
 .orion-stats-grid {
   display: grid;
   gap: 0.9rem;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  /* Mobile-first: stack. */
+  grid-template-columns: 1fr;
   margin-top: 1rem;
 }
 
@@ -407,7 +558,8 @@ h4 {
 .orion-logo-wall {
   display: grid;
   gap: 0.8rem;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  /* Mobile-first: stack. */
+  grid-template-columns: 1fr;
   margin-top: 1rem;
 }
 
@@ -437,10 +589,47 @@ h4 {
 .orion-before-after-grid {
   display: grid;
   gap: 1rem;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  /* Mobile-first: stack. */
+  grid-template-columns: 1fr;
   margin-top: 1rem;
 }
 
+@media (min-width: 720px) {
+  .feature-grid {
+    grid-template-columns: var(--feature-grid-template-columns, repeat(auto-fit, minmax(200px, 1fr)));
+  }
+
+  .card-grid.services {
+    grid-template-columns: var(--services-grid-template-columns, repeat(auto-fit, minmax(240px, 1fr)));
+  }
+
+  .split.testimonials-grid {
+    grid-template-columns: var(--testimonials-grid-columns, repeat(auto-fit, minmax(260px, 1fr)));
+  }
+
+  .testimonial-quote {
+    -webkit-line-clamp: 2;
+  }
+
+  @supports not (-webkit-line-clamp: 1) {
+    .testimonial-quote {
+      max-height: calc((2 * 1.55em) - 0.5px);
+    }
+  }
+
+  .orion-stats-grid {
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  }
+
+  .orion-logo-wall {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  }
+
+  .orion-before-after-grid {
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  }
+}
+
 .orion-before-after-card {
   background: #fff;
   border: 1px solid rgba(13, 74, 55, 0.12);
@@ -497,3 +686,164 @@ h4 {
   gap: 0.34rem;
   padding: 0.1rem 0.95rem 0.95rem;
 }
+
+.orion-builder-settings-root {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.orion-builder-settings-summary-row {
+  align-items: center;
+  background: rgba(18, 74, 55, 0.04);
+  border: 1px solid rgba(13, 74, 55, 0.12);
+  border-radius: 12px;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+  padding: 0.55rem 0.65rem;
+  position: sticky;
+  top: 0;
+  z-index: 3;
+}
+
+.orion-builder-settings-summary-title {
+  color: var(--orion-studio-ink);
+  font-size: 0.78rem;
+  font-weight: 800;
+  letter-spacing: 0.01em;
+}
+
+.orion-builder-settings-summary-actions {
+  display: inline-flex;
+  gap: 0.45rem;
+}
+
+.orion-builder-settings-mode-btn {
+  background: #fff;
+  border: 1px solid rgba(13, 74, 55, 0.2);
+  border-radius: 999px;
+  color: var(--orion-studio-muted);
+  cursor: pointer;
+  font-size: 0.73rem;
+  font-weight: 700;
+  padding: 0.28rem 0.6rem;
+}
+
+.orion-builder-settings-mode-btn.is-active {
+  background: #124a37;
+  border-color: #124a37;
+  color: #fff;
+}
+
+.orion-builder-settings-group {
+  background: #fff;
+  border: 1px solid rgba(13, 74, 55, 0.14);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.orion-builder-settings-group-header {
+  align-items: center;
+  background: linear-gradient(180deg, rgba(18, 74, 55, 0.06), rgba(18, 74, 55, 0));
+  border: none;
+  color: var(--orion-studio-ink);
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  padding: 0.55rem 0.65rem;
+  text-align: left;
+  width: 100%;
+}
+
+.orion-builder-settings-group-title-wrap {
+  display: grid;
+  gap: 0.12rem;
+}
+
+.orion-builder-settings-group-title {
+  font-size: 0.79rem;
+  font-weight: 800;
+}
+
+.orion-builder-settings-group-subtitle {
+  color: var(--orion-studio-muted);
+  font-size: 0.68rem;
+  font-weight: 600;
+}
+
+.orion-builder-settings-group-caret {
+  color: var(--orion-studio-muted);
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.orion-builder-settings-group-body {
+  border-top: 1px solid rgba(13, 74, 55, 0.08);
+  display: grid;
+  gap: 0.6rem;
+  padding: 0.65rem;
+}
+
+.orion-builder-settings-field-list {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.orion-builder-settings-label {
+  color: var(--orion-studio-muted);
+  display: grid;
+  font-size: 0.74rem;
+  font-weight: 700;
+  gap: 0.33rem;
+}
+
+.orion-builder-settings-label.is-checkbox {
+  align-items: center;
+  display: grid;
+  gap: 0.45rem;
+  grid-template-columns: auto 1fr;
+}
+
+.orion-builder-settings-input {
+  background: #fff;
+  border: 1px solid rgba(13, 74, 55, 0.2);
+  border-radius: 10px;
+  color: var(--orion-studio-ink);
+  font-size: 0.79rem;
+  padding: 0.42rem 0.54rem;
+  width: 100%;
+}
+
+.orion-builder-settings-input.is-textarea {
+  min-height: 84px;
+  resize: vertical;
+}
+
+.orion-builder-settings-input.is-color {
+  height: 35px;
+  padding: 0.2rem;
+}
+
+.orion-builder-settings-input-split {
+  align-items: center;
+  display: grid;
+  gap: 0.45rem;
+  grid-template-columns: 1fr 78px;
+}
+
+.orion-builder-settings-empty {
+  border: 1px dashed rgba(13, 74, 55, 0.2);
+  border-radius: 12px;
+  color: var(--orion-studio-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.65rem;
+}
+
+.orion-builder-content h1,
+.orion-builder-content h2,
+.orion-builder-content h3,
+.orion-builder-content h4 {
+  color: var(--orion-builder-heading-color, inherit);
+  text-align: var(--orion-builder-heading-align, inherit);
+}