@orion-studios/payload-studio 0.5.0-beta.47 → 0.5.0-beta.48

package/dist/index.mjs

@@ -4,15 +4,15 @@ import {
 import {
   admin_app_exports
 } from "./chunk-XVH5SCBD.mjs";
-import {
-  blocks_exports
-} from "./chunk-4AOYZGIY.mjs";
 import {
   nextjs_exports
 } from "./chunk-SKZUOCR2.mjs";
 import {
   studio_exports
 } from "./chunk-N67KVM2S.mjs";
+import {
+  blocks_exports
+} from "./chunk-4AOYZGIY.mjs";
 import {
   studio_pages_exports
 } from "./chunk-OHAGPJBM.mjs";

package/dist/studio-pages/builder.css

@@ -307,6 +307,45 @@ h4 {
   margin-top: 1rem;
 }
 
+.testimonials-stage {
+  position: relative;
+  margin-top: 1rem;
+}
+
+.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;
   color: var(--orion-studio-ink);

package/dist/studio-pages/client.js

@@ -2013,35 +2013,7 @@ function BuilderPageEditor({ initialDoc, pageID }) {
     setActiveSidebarPanel("addSections");
   }, [layout.length]);
   (0, import_react.useEffect)(() => {
-    const timers = [];
-    layout.forEach((block, index) => {
-      if (normalizeText(block.blockType, "") !== "testimonials") {
-        return;
-      }
-      const key = typeof block.id === "string" && block.id ? String(block.id) : `testimonials-${index}`;
-      const items = Array.isArray(block.items) ? block.items : [];
-      const visibleCountRaw = Math.floor(parsePixelNumber(block.visibleCount, 3));
-      const visibleCount = Math.max(1, Math.min(6, visibleCountRaw));
-      const autoRotate = typeof block.autoRotate === "boolean" ? Boolean(block.autoRotate) : true;
-      const intervalSeconds = Math.max(
-        2,
-        Math.floor(parsePixelNumber(block.rotateIntervalSeconds, 7))
-      );
-      if (!autoRotate || items.length <= visibleCount) {
-        return;
-      }
-      const timer = window.setInterval(() => {
-        setTestimonialsOffsets((current) => {
-          const offset = typeof current[key] === "number" ? current[key] : 0;
-          const next = (offset + visibleCount) % items.length;
-          return offset === next ? current : { ...current, [key]: next };
-        });
-      }, intervalSeconds * 1e3);
-      timers.push(timer);
-    });
-    return () => {
-      timers.forEach((timer) => window.clearInterval(timer));
-    };
+    return;
   }, [layout]);
   (0, import_react.useEffect)(() => {
     if (historyBypassRef.current) {
@@ -2878,13 +2850,14 @@ function BuilderPageEditor({ initialDoc, pageID }) {
               const items = Array.isArray(block.items) ? block.items : [];
               const visibleCountRaw = Math.floor(parsePixelNumber(block.visibleCount, 3));
               const visibleCount = Math.max(1, Math.min(6, visibleCountRaw));
-              const autoRotate = typeof block.autoRotate === "boolean" ? Boolean(block.autoRotate) : true;
               const key = typeof block.id === "string" && block.id ? String(block.id) : `testimonials-${index}`;
               const offset = typeof testimonialsOffsets[key] === "number" ? testimonialsOffsets[key] : 0;
-              const windowedItems = !autoRotate || items.length <= visibleCount ? items.map((item, itemIndex) => ({ item, itemIndex })) : Array.from({ length: visibleCount }, (_, slotIndex) => {
+              const canNavigate = items.length > visibleCount;
+              const windowSize = Math.min(visibleCount, items.length);
+              const windowedItems = canNavigate ? Array.from({ length: windowSize }, (_, slotIndex) => {
                 const itemIndex = (offset + slotIndex) % items.length;
                 return { item: items[itemIndex], itemIndex };
-              });
+              }) : items.map((item, itemIndex) => ({ item, itemIndex }));
               return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 BlockFrame,
                 {
@@ -2908,60 +2881,100 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                           value: normalizeText(block.title)
                         }
                       ) }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "split testimonials-grid", children: windowedItems.map(({ item, itemIndex }) => {
-                        const isItemSelected = selectedIndex === index && selectedItemIndex === itemIndex;
-                        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                          "article",
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `testimonials-stage ${canNavigate ? "is-navigable" : ""}`, children: [
+                        canNavigate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "button",
                           {
-                            className: "panel",
-                            onMouseDownCapture: () => {
-                              setSelectedIndex(index);
-                              openSelectedItem(itemIndex);
+                            "aria-label": "Previous testimonials",
+                            className: "testimonial-nav testimonial-nav--prev",
+                            onClick: (event) => {
+                              event.preventDefault();
+                              event.stopPropagation();
+                              setTestimonialsOffsets((current) => {
+                                const currentOffset = typeof current[key] === "number" ? current[key] : 0;
+                                const shift = windowSize;
+                                const next = ((currentOffset - shift) % items.length + items.length) % items.length;
+                                return currentOffset === next ? current : { ...current, [key]: next };
+                              });
                             },
-                            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.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: [
+                            type: "button",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u2039" })
+                          }
+                        ) : null,
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "split testimonials-grid", children: windowedItems.map(({ item, itemIndex }) => {
+                          const isItemSelected = selectedIndex === index && selectedItemIndex === itemIndex;
+                          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                            "article",
+                            {
+                              className: "panel",
+                              onMouseDownCapture: () => {
+                                setSelectedIndex(index);
+                                openSelectedItem(itemIndex);
+                              },
+                              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",
-                                      onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "name", value),
-                                      placeholder: "Customer name",
-                                      value: normalizeText(item?.name)
+                                      multiline: true,
+                                      onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "quote", value),
+                                      placeholder: "Customer quote",
+                                      value: normalizeText(item?.quote)
                                     }
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "var(--ink-500)", fontSize: "0.88rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                    InlineText,
-                                    {
-                                      as: "span",
-                                      onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "location", value),
-                                      placeholder: "Location",
-                                      value: normalizeText(item?.location)
-                                    }
-                                  ) })
+                                  '"'
+                                ] }),
+                                /* @__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: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                      InlineText,
+                                      {
+                                        as: "span",
+                                        onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "name", value),
+                                        placeholder: "Customer name",
+                                        value: normalizeText(item?.name)
+                                      }
+                                    ),
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "var(--ink-500)", fontSize: "0.88rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                      InlineText,
+                                      {
+                                        as: "span",
+                                        onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "location", value),
+                                        placeholder: "Location",
+                                        value: normalizeText(item?.location)
+                                      }
+                                    ) })
+                                  ] })
                                 ] })
-                              ] })
-                            ]
-                          },
-                          `testimonial-${itemIndex}`
-                        );
-                      }) })
+                              ]
+                            },
+                            `testimonial-${itemIndex}`
+                          );
+                        }) }),
+                        canNavigate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "button",
+                          {
+                            "aria-label": "Next testimonials",
+                            className: "testimonial-nav testimonial-nav--next",
+                            onClick: (event) => {
+                              event.preventDefault();
+                              event.stopPropagation();
+                              setTestimonialsOffsets((current) => {
+                                const currentOffset = typeof current[key] === "number" ? current[key] : 0;
+                                const shift = windowSize;
+                                const next = (currentOffset + shift) % items.length;
+                                return currentOffset === next ? current : { ...current, [key]: next };
+                              });
+                            },
+                            type: "button",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u203A" })
+                          }
+                        ) : null
+                      ] })
                     ] })
                   )
                 },

package/dist/studio-pages/client.mjs

@@ -1985,35 +1985,7 @@ function BuilderPageEditor({ initialDoc, pageID }) {
     setActiveSidebarPanel("addSections");
   }, [layout.length]);
   useEffect(() => {
-    const timers = [];
-    layout.forEach((block, index) => {
-      if (normalizeText(block.blockType, "") !== "testimonials") {
-        return;
-      }
-      const key = typeof block.id === "string" && block.id ? String(block.id) : `testimonials-${index}`;
-      const items = Array.isArray(block.items) ? block.items : [];
-      const visibleCountRaw = Math.floor(parsePixelNumber(block.visibleCount, 3));
-      const visibleCount = Math.max(1, Math.min(6, visibleCountRaw));
-      const autoRotate = typeof block.autoRotate === "boolean" ? Boolean(block.autoRotate) : true;
-      const intervalSeconds = Math.max(
-        2,
-        Math.floor(parsePixelNumber(block.rotateIntervalSeconds, 7))
-      );
-      if (!autoRotate || items.length <= visibleCount) {
-        return;
-      }
-      const timer = window.setInterval(() => {
-        setTestimonialsOffsets((current) => {
-          const offset = typeof current[key] === "number" ? current[key] : 0;
-          const next = (offset + visibleCount) % items.length;
-          return offset === next ? current : { ...current, [key]: next };
-        });
-      }, intervalSeconds * 1e3);
-      timers.push(timer);
-    });
-    return () => {
-      timers.forEach((timer) => window.clearInterval(timer));
-    };
+    return;
   }, [layout]);
   useEffect(() => {
     if (historyBypassRef.current) {
@@ -2850,13 +2822,14 @@ function BuilderPageEditor({ initialDoc, pageID }) {
               const items = Array.isArray(block.items) ? block.items : [];
               const visibleCountRaw = Math.floor(parsePixelNumber(block.visibleCount, 3));
               const visibleCount = Math.max(1, Math.min(6, visibleCountRaw));
-              const autoRotate = typeof block.autoRotate === "boolean" ? Boolean(block.autoRotate) : true;
               const key = typeof block.id === "string" && block.id ? String(block.id) : `testimonials-${index}`;
               const offset = typeof testimonialsOffsets[key] === "number" ? testimonialsOffsets[key] : 0;
-              const windowedItems = !autoRotate || items.length <= visibleCount ? items.map((item, itemIndex) => ({ item, itemIndex })) : Array.from({ length: visibleCount }, (_, slotIndex) => {
+              const canNavigate = items.length > visibleCount;
+              const windowSize = Math.min(visibleCount, items.length);
+              const windowedItems = canNavigate ? Array.from({ length: windowSize }, (_, slotIndex) => {
                 const itemIndex = (offset + slotIndex) % items.length;
                 return { item: items[itemIndex], itemIndex };
-              });
+              }) : items.map((item, itemIndex) => ({ item, itemIndex }));
               return /* @__PURE__ */ jsx(
                 BlockFrame,
                 {
@@ -2880,60 +2853,100 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                           value: normalizeText(block.title)
                         }
                       ) }) }),
-                      /* @__PURE__ */ jsx("div", { className: "split testimonials-grid", children: windowedItems.map(({ item, itemIndex }) => {
-                        const isItemSelected = selectedIndex === index && selectedItemIndex === itemIndex;
-                        return /* @__PURE__ */ jsxs(
-                          "article",
+                      /* @__PURE__ */ jsxs("div", { className: `testimonials-stage ${canNavigate ? "is-navigable" : ""}`, children: [
+                        canNavigate ? /* @__PURE__ */ jsx(
+                          "button",
                           {
-                            className: "panel",
-                            onMouseDownCapture: () => {
-                              setSelectedIndex(index);
-                              openSelectedItem(itemIndex);
+                            "aria-label": "Previous testimonials",
+                            className: "testimonial-nav testimonial-nav--prev",
+                            onClick: (event) => {
+                              event.preventDefault();
+                              event.stopPropagation();
+                              setTestimonialsOffsets((current) => {
+                                const currentOffset = typeof current[key] === "number" ? current[key] : 0;
+                                const shift = windowSize;
+                                const next = ((currentOffset - shift) % items.length + items.length) % items.length;
+                                return currentOffset === next ? current : { ...current, [key]: next };
+                              });
                             },
-                            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__ */ 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: [
+                            type: "button",
+                            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2039" })
+                          }
+                        ) : null,
+                        /* @__PURE__ */ jsx("div", { className: "split testimonials-grid", children: windowedItems.map(({ item, itemIndex }) => {
+                          const isItemSelected = selectedIndex === index && selectedItemIndex === itemIndex;
+                          return /* @__PURE__ */ jsxs(
+                            "article",
+                            {
+                              className: "panel",
+                              onMouseDownCapture: () => {
+                                setSelectedIndex(index);
+                                openSelectedItem(itemIndex);
+                              },
+                              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",
-                                      onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "name", value),
-                                      placeholder: "Customer name",
-                                      value: normalizeText(item?.name)
+                                      multiline: true,
+                                      onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "quote", value),
+                                      placeholder: "Customer quote",
+                                      value: normalizeText(item?.quote)
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-500)", fontSize: "0.88rem" }, children: /* @__PURE__ */ jsx(
-                                    InlineText,
-                                    {
-                                      as: "span",
-                                      onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "location", value),
-                                      placeholder: "Location",
-                                      value: normalizeText(item?.location)
-                                    }
-                                  ) })
+                                  '"'
+                                ] }),
+                                /* @__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: [
+                                    /* @__PURE__ */ jsx(
+                                      InlineText,
+                                      {
+                                        as: "span",
+                                        onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "name", value),
+                                        placeholder: "Customer name",
+                                        value: normalizeText(item?.name)
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-500)", fontSize: "0.88rem" }, children: /* @__PURE__ */ jsx(
+                                      InlineText,
+                                      {
+                                        as: "span",
+                                        onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "location", value),
+                                        placeholder: "Location",
+                                        value: normalizeText(item?.location)
+                                      }
+                                    ) })
+                                  ] })
                                 ] })
-                              ] })
-                            ]
-                          },
-                          `testimonial-${itemIndex}`
-                        );
-                      }) })
+                              ]
+                            },
+                            `testimonial-${itemIndex}`
+                          );
+                        }) }),
+                        canNavigate ? /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            "aria-label": "Next testimonials",
+                            className: "testimonial-nav testimonial-nav--next",
+                            onClick: (event) => {
+                              event.preventDefault();
+                              event.stopPropagation();
+                              setTestimonialsOffsets((current) => {
+                                const currentOffset = typeof current[key] === "number" ? current[key] : 0;
+                                const shift = windowSize;
+                                const next = (currentOffset + shift) % items.length;
+                                return currentOffset === next ? current : { ...current, [key]: next };
+                              });
+                            },
+                            type: "button",
+                            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u203A" })
+                          }
+                        ) : null
+                      ] })
                     ] })
                   )
                 },

package/package.json

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