@orion-studios/payload-studio 0.5.0-beta.65 → 0.5.0-beta.67

package/dist/admin-app/client.js

@@ -694,6 +694,41 @@ var import_navigation = require("next/navigation");
 
 // 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;
@@ -714,26 +749,31 @@ async function optimizeImageForUpload(file) {
       return file;
     }
     context.drawImage(image, 0, 0, canvas.width, canvas.height);
-    const outputMime = file.type === "image/webp" ? "image/webp" : "image/jpeg";
+    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 quality of qualityPasses) {
-      const blob = await new Promise((resolve) => {
-        canvas.toBlob((value) => resolve(value), outputMime, quality);
-      });
-      if (!blob) {
-        continue;
-      }
-      const optimizedName = file.name.replace(/\.[^/.]+$/, outputMime === "image/webp" ? ".webp" : ".jpg");
-      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;
+    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) {

package/dist/admin-app/client.mjs

@@ -2,7 +2,7 @@
 import {
   MAX_DIRECT_UPLOAD_BYTES,
   optimizeImageForUpload
-} from "../chunk-I3HYCS77.mjs";
+} from "../chunk-ROTPP5CU.mjs";
 
 // src/admin-app/components/AdminShellClient.tsx
 import { useEffect, useState } from "react";

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
+};

package/dist/index.mjs

@@ -4,9 +4,6 @@ import {
 import {
   admin_app_exports
 } from "./chunk-XVH5SCBD.mjs";
-import {
-  blocks_exports
-} from "./chunk-4AOYZGIY.mjs";
 import {
   nextjs_exports
 } from "./chunk-SBJHEKTV.mjs";
@@ -16,6 +13,9 @@ import {
 import {
   studio_pages_exports
 } from "./chunk-OHAGPJBM.mjs";
+import {
+  blocks_exports
+} from "./chunk-4AOYZGIY.mjs";
 import "./chunk-SIL2J5MF.mjs";
 import "./chunk-6BWS3CLP.mjs";
 export {

package/dist/studio-pages/builder.css

@@ -389,9 +389,33 @@ h4 {
 
 .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.25rem;
+  opacity: 0.8;
+}
+
+.testimonial-quote {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+
+@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;
@@ -560,6 +584,16 @@ h4 {
     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));
   }

package/dist/studio-pages/client.js

@@ -265,6 +265,41 @@ var layoutToStudioDocument = (layout, title, metadata) => {
 
 // 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;
@@ -285,26 +320,31 @@ async function optimizeImageForUpload(file) {
       return file;
     }
     context.drawImage(image, 0, 0, canvas.width, canvas.height);
-    const outputMime = file.type === "image/webp" ? "image/webp" : "image/jpeg";
+    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 quality of qualityPasses) {
-      const blob = await new Promise((resolve) => {
-        canvas.toBlob((value) => resolve(value), outputMime, quality);
-      });
-      if (!blob) {
-        continue;
-      }
-      const optimizedName = file.name.replace(/\.[^/.]+$/, outputMime === "image/webp" ? ".webp" : ".jpg");
-      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;
+    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) {
@@ -3130,20 +3170,17 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                               },
                               style: isItemSelected ? { outline: "2px solid rgba(15, 125, 82, 0.55)", outlineOffset: 3 } : void 0,
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "quote", children: [
-                                  '"',
-                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                    InlineText,
-                                    {
-                                      as: "span",
-                                      multiline: true,
-                                      onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "quote", value),
-                                      placeholder: "Customer quote",
-                                      value: normalizeText(item?.quote)
-                                    }
-                                  ),
-                                  '"'
-                                ] }),
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "testimonial-quote-mark", "aria-hidden": "true", children: "\u201C" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "quote testimonial-quote", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  InlineText,
+                                  {
+                                    as: "span",
+                                    multiline: true,
+                                    onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "quote", value),
+                                    placeholder: "Customer quote",
+                                    value: normalizeText(item?.quote)
+                                  }
+                                ) }),
                                 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "quote-author", children: [
                                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "quote-avatar", children: normalizeText(item?.name, "C").split(" ").slice(0, 2).map((part) => part[0]).join("").toUpperCase() }),
                                   /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
@@ -3203,20 +3240,17 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                             },
                             style: isItemSelected ? { outline: "2px solid rgba(15, 125, 82, 0.55)", outlineOffset: 3 } : void 0,
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "quote", children: [
-                                '"',
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                  InlineText,
-                                  {
-                                    as: "span",
-                                    multiline: true,
-                                    onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "quote", value),
-                                    placeholder: "Customer quote",
-                                    value: normalizeText(item?.quote)
-                                  }
-                                ),
-                                '"'
-                              ] }),
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "testimonial-quote-mark", "aria-hidden": "true", children: "\u201C" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "quote testimonial-quote", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                InlineText,
+                                {
+                                  as: "span",
+                                  multiline: true,
+                                  onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "quote", value),
+                                  placeholder: "Customer quote",
+                                  value: normalizeText(item?.quote)
+                                }
+                              ) }),
                               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "quote-author", children: [
                                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "quote-avatar", children: normalizeText(item?.name, "C").split(" ").slice(0, 2).map((part) => part[0]).join("").toUpperCase() }),
                                 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [

package/dist/studio-pages/client.mjs

@@ -3,7 +3,7 @@
 import {
   MAX_DIRECT_UPLOAD_BYTES,
   optimizeImageForUpload
-} from "../chunk-I3HYCS77.mjs";
+} from "../chunk-ROTPP5CU.mjs";
 
 // src/studio-pages/builder/BuilderPageEditor.tsx
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -3053,20 +3053,17 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                               },
                               style: isItemSelected ? { outline: "2px solid rgba(15, 125, 82, 0.55)", outlineOffset: 3 } : void 0,
                               children: [
-                                /* @__PURE__ */ jsxs("p", { className: "quote", children: [
-                                  '"',
-                                  /* @__PURE__ */ jsx(
-                                    InlineText,
-                                    {
-                                      as: "span",
-                                      multiline: true,
-                                      onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "quote", value),
-                                      placeholder: "Customer quote",
-                                      value: normalizeText(item?.quote)
-                                    }
-                                  ),
-                                  '"'
-                                ] }),
+                                /* @__PURE__ */ jsx("span", { className: "testimonial-quote-mark", "aria-hidden": "true", children: "\u201C" }),
+                                /* @__PURE__ */ jsx("p", { className: "quote testimonial-quote", children: /* @__PURE__ */ jsx(
+                                  InlineText,
+                                  {
+                                    as: "span",
+                                    multiline: true,
+                                    onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "quote", value),
+                                    placeholder: "Customer quote",
+                                    value: normalizeText(item?.quote)
+                                  }
+                                ) }),
                                 /* @__PURE__ */ jsxs("div", { className: "quote-author", children: [
                                   /* @__PURE__ */ jsx("div", { className: "quote-avatar", children: normalizeText(item?.name, "C").split(" ").slice(0, 2).map((part) => part[0]).join("").toUpperCase() }),
                                   /* @__PURE__ */ jsxs("div", { children: [
@@ -3126,20 +3123,17 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                             },
                             style: isItemSelected ? { outline: "2px solid rgba(15, 125, 82, 0.55)", outlineOffset: 3 } : void 0,
                             children: [
-                              /* @__PURE__ */ jsxs("p", { className: "quote", children: [
-                                '"',
-                                /* @__PURE__ */ jsx(
-                                  InlineText,
-                                  {
-                                    as: "span",
-                                    multiline: true,
-                                    onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "quote", value),
-                                    placeholder: "Customer quote",
-                                    value: normalizeText(item?.quote)
-                                  }
-                                ),
-                                '"'
-                              ] }),
+                              /* @__PURE__ */ jsx("span", { className: "testimonial-quote-mark", "aria-hidden": "true", children: "\u201C" }),
+                              /* @__PURE__ */ jsx("p", { className: "quote testimonial-quote", children: /* @__PURE__ */ jsx(
+                                InlineText,
+                                {
+                                  as: "span",
+                                  multiline: true,
+                                  onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "quote", value),
+                                  placeholder: "Customer quote",
+                                  value: normalizeText(item?.quote)
+                                }
+                              ) }),
                               /* @__PURE__ */ jsxs("div", { className: "quote-author", children: [
                                 /* @__PURE__ */ jsx("div", { className: "quote-avatar", children: normalizeText(item?.name, "C").split(" ").slice(0, 2).map((part) => part[0]).join("").toUpperCase() }),
                                 /* @__PURE__ */ jsxs("div", { children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.5.0-beta.65",
+  "version": "0.5.0-beta.67",
   "description": "Unified Payload CMS toolkit for Orion Studios",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",

package/dist/chunk-I3HYCS77.mjs

@@ -1,59 +0,0 @@
-'use client';
-
-// src/shared/clientImageUploadOptimization.ts
-var MAX_DIRECT_UPLOAD_BYTES = 4e6;
-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 outputMime = file.type === "image/webp" ? "image/webp" : "image/jpeg";
-    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 quality of qualityPasses) {
-      const blob = await new Promise((resolve) => {
-        canvas.toBlob((value) => resolve(value), outputMime, quality);
-      });
-      if (!blob) {
-        continue;
-      }
-      const optimizedName = file.name.replace(/\.[^/.]+$/, outputMime === "image/webp" ? ".webp" : ".jpg");
-      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
-};