@orion-studios/payload-studio 0.5.0-beta.39 → 0.5.0-beta.40

package/dist/blocks/index.js

@@ -1184,11 +1184,41 @@ var TestimonialsBlock = {
       type: "text",
       required: true
     },
+    {
+      name: "visibleCount",
+      type: "number",
+      defaultValue: 3,
+      min: 1,
+      max: 6,
+      admin: {
+        description: "How many testimonials to show at once.",
+        step: 1
+      }
+    },
+    {
+      name: "autoRotate",
+      type: "checkbox",
+      defaultValue: true,
+      admin: {
+        description: "Automatically rotates through all testimonials."
+      }
+    },
+    {
+      name: "rotateIntervalSeconds",
+      type: "number",
+      defaultValue: 7,
+      min: 2,
+      max: 30,
+      admin: {
+        description: "How often to rotate (in seconds).",
+        step: 1
+      }
+    },
     {
       name: "items",
       type: "array",
       minRows: 1,
-      maxRows: 6,
+      maxRows: 30,
       fields: [
         {
           name: "quote",

package/dist/blocks/index.mjs

@@ -17,7 +17,7 @@ import {
   defaultPageLayoutBlocks,
   sectionPresets,
   templateStarterPresets
-} from "../chunk-V72WMS7V.mjs";
+} from "../chunk-I4NH636V.mjs";
 import "../chunk-SIL2J5MF.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {

package/dist/{chunk-7UWYJU4M.mjs → chunk-34J4T7X3.mjs}

@@ -151,8 +151,11 @@ var defaultNodeData = {
   },
   testimonials: {
     ...withSectionStyleDefaults({}),
+    autoRotate: true,
     items: [{ location: "City, ST", name: "Customer Name", quote: "Customer feedback goes here." }],
-    title: "What Customers Say"
+    rotateIntervalSeconds: 7,
+    title: "What Customers Say",
+    visibleCount: 3
   },
   stats: withSectionStyleDefaults({
     items: [

package/dist/{chunk-V72WMS7V.mjs → chunk-I4NH636V.mjs}

@@ -1020,11 +1020,41 @@ var TestimonialsBlock = {
       type: "text",
       required: true
     },
+    {
+      name: "visibleCount",
+      type: "number",
+      defaultValue: 3,
+      min: 1,
+      max: 6,
+      admin: {
+        description: "How many testimonials to show at once.",
+        step: 1
+      }
+    },
+    {
+      name: "autoRotate",
+      type: "checkbox",
+      defaultValue: true,
+      admin: {
+        description: "Automatically rotates through all testimonials."
+      }
+    },
+    {
+      name: "rotateIntervalSeconds",
+      type: "number",
+      defaultValue: 7,
+      min: 2,
+      max: 30,
+      admin: {
+        description: "How often to rotate (in seconds).",
+        step: 1
+      }
+    },
     {
       name: "items",
       type: "array",
       minRows: 1,
-      maxRows: 6,
+      maxRows: 30,
       fields: [
         {
           name: "quote",

package/dist/{chunk-WIAJNENP.mjs → chunk-RXXPFQWL.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-N67KVM2S.mjs";
 import {
   studioDocumentToLayout
-} from "./chunk-7UWYJU4M.mjs";
+} from "./chunk-34J4T7X3.mjs";
 import {
   __export
 } from "./chunk-6BWS3CLP.mjs";

package/dist/index.js

@@ -1725,11 +1725,41 @@ var TestimonialsBlock = {
       type: "text",
       required: true
     },
+    {
+      name: "visibleCount",
+      type: "number",
+      defaultValue: 3,
+      min: 1,
+      max: 6,
+      admin: {
+        description: "How many testimonials to show at once.",
+        step: 1
+      }
+    },
+    {
+      name: "autoRotate",
+      type: "checkbox",
+      defaultValue: true,
+      admin: {
+        description: "Automatically rotates through all testimonials."
+      }
+    },
+    {
+      name: "rotateIntervalSeconds",
+      type: "number",
+      defaultValue: 7,
+      min: 2,
+      max: 30,
+      admin: {
+        description: "How often to rotate (in seconds).",
+        step: 1
+      }
+    },
     {
       name: "items",
       type: "array",
       minRows: 1,
-      maxRows: 6,
+      maxRows: 30,
       fields: [
         {
           name: "quote",
@@ -2387,8 +2417,11 @@ var defaultNodeData = {
   },
   testimonials: {
     ...withSectionStyleDefaults({}),
+    autoRotate: true,
     items: [{ location: "City, ST", name: "Customer Name", quote: "Customer feedback goes here." }],
-    title: "What Customers Say"
+    rotateIntervalSeconds: 7,
+    title: "What Customers Say",
+    visibleCount: 3
   },
   stats: withSectionStyleDefaults({
     items: [

package/dist/index.mjs

@@ -6,16 +6,16 @@ import {
 } from "./chunk-XVH5SCBD.mjs";
 import {
   blocks_exports
-} from "./chunk-V72WMS7V.mjs";
+} from "./chunk-I4NH636V.mjs";
 import {
   nextjs_exports
-} from "./chunk-WIAJNENP.mjs";
+} from "./chunk-RXXPFQWL.mjs";
 import {
   studio_exports
 } from "./chunk-N67KVM2S.mjs";
 import {
   studio_pages_exports
-} from "./chunk-7UWYJU4M.mjs";
+} from "./chunk-34J4T7X3.mjs";
 import "./chunk-SIL2J5MF.mjs";
 import "./chunk-6BWS3CLP.mjs";
 export {

package/dist/nextjs/index.js

@@ -240,8 +240,11 @@ var defaultNodeData = {
   },
   testimonials: {
     ...withSectionStyleDefaults({}),
+    autoRotate: true,
     items: [{ location: "City, ST", name: "Customer Name", quote: "Customer feedback goes here." }],
-    title: "What Customers Say"
+    rotateIntervalSeconds: 7,
+    title: "What Customers Say",
+    visibleCount: 3
   },
   stats: withSectionStyleDefaults({
     items: [

package/dist/nextjs/index.mjs

@@ -4,9 +4,9 @@ import {
   createPayloadClient,
   createSiteQueries,
   resolveMedia
-} from "../chunk-WIAJNENP.mjs";
+} from "../chunk-RXXPFQWL.mjs";
 import "../chunk-N67KVM2S.mjs";
-import "../chunk-7UWYJU4M.mjs";
+import "../chunk-34J4T7X3.mjs";
 import "../chunk-SIL2J5MF.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {

package/dist/studio-pages/client.js

@@ -189,8 +189,11 @@ var defaultNodeData = {
   },
   testimonials: {
     ...withSectionStyleDefaults({}),
+    autoRotate: true,
     items: [{ location: "City, ST", name: "Customer Name", quote: "Customer feedback goes here." }],
-    title: "What Customers Say"
+    rotateIntervalSeconds: 7,
+    title: "What Customers Say",
+    visibleCount: 3
   },
   stats: withSectionStyleDefaults({
     items: [
@@ -1385,6 +1388,7 @@ function BuilderPageEditor({ initialDoc, pageID }) {
   const [selectedHeroMediaID, setSelectedHeroMediaID] = (0, import_react.useState)("");
   const [selectedItemIndex, setSelectedItemIndex] = (0, import_react.useState)(null);
   const [expandedItemIndex, setExpandedItemIndex] = (0, import_react.useState)(null);
+  const [testimonialsOffsets, setTestimonialsOffsets] = (0, import_react.useState)({});
   const [presetQuery, setPresetQuery] = (0, import_react.useState)("");
   const [pastSnapshots, setPastSnapshots] = (0, import_react.useState)([]);
   const [futureSnapshots, setFutureSnapshots] = (0, import_react.useState)([]);
@@ -2007,6 +2011,37 @@ function BuilderPageEditor({ initialDoc, pageID }) {
     setSidebarOpen(true);
     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));
+    };
+  }, [layout]);
   (0, import_react.useEffect)(() => {
     if (historyBypassRef.current) {
       historyBypassRef.current = false;
@@ -2796,6 +2831,15 @@ function BuilderPageEditor({ initialDoc, pageID }) {
             }
             if (type === "testimonials") {
               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 itemIndex = (offset + slotIndex) % items.length;
+                return { item: items[itemIndex], itemIndex };
+              });
               return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 BlockFrame,
                 {
@@ -2819,45 +2863,60 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                           value: normalizeText(block.title)
                         }
                       ) }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "split testimonials-grid", children: items.map((item, itemIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { className: "panel", 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: [
-                            /* @__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}`)) })
+                      /* @__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",
+                                    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: [
+                                  /* @__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}`
+                        );
+                      }) })
                     ] })
                   )
                 },
@@ -5664,19 +5723,157 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                                 children: "Add FAQ Item"
                               }
                             ) : null,
-                            selectedType === "testimonials" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                              "button",
-                              {
-                                onClick: () => appendItemToSelected("items", {
-                                  location: "City, ST",
-                                  name: "Customer Name",
-                                  quote: "Add testimonial text."
-                                }),
-                                style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
-                                type: "button",
-                                children: "Add Testimonial"
-                              }
-                            ) : null,
+                            selectedType === "testimonials" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                              (() => {
+                                const visibleCountValue = Math.max(
+                                  1,
+                                  Math.min(6, Math.floor(parsePixelNumber(selectedBlock.visibleCount, 3)))
+                                );
+                                const rotateIntervalValue = Math.max(
+                                  2,
+                                  Math.min(30, Math.floor(parsePixelNumber(selectedBlock.rotateIntervalSeconds, 7)))
+                                );
+                                const autoRotateValue = typeof selectedBlock.autoRotate === "boolean" ? selectedBlock.autoRotate : true;
+                                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
+                                    "Visible At Once",
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                      "input",
+                                      {
+                                        max: 6,
+                                        min: 1,
+                                        onChange: (event) => updateSelectedField("visibleCount", Number(event.target.value)),
+                                        style: sidebarInputStyle,
+                                        type: "number",
+                                        value: visibleCountValue
+                                      }
+                                    )
+                                  ] }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: { ...sidebarLabelStyle, alignItems: "center", gridTemplateColumns: "auto 1fr" }, children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                      "input",
+                                      {
+                                        checked: autoRotateValue,
+                                        onChange: (event) => updateSelectedField("autoRotate", event.target.checked),
+                                        type: "checkbox"
+                                      }
+                                    ),
+                                    "Auto Rotate"
+                                  ] }),
+                                  autoRotateValue ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
+                                    "Rotate Interval (seconds)",
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                      "input",
+                                      {
+                                        max: 30,
+                                        min: 2,
+                                        onChange: (event) => updateSelectedField("rotateIntervalSeconds", Number(event.target.value)),
+                                        style: sidebarInputStyle,
+                                        type: "number",
+                                        value: rotateIntervalValue
+                                      }
+                                    )
+                                  ] }) : null
+                                ] });
+                              })(),
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                "button",
+                                {
+                                  onClick: () => appendItemToSelected("items", {
+                                    location: "City, ST",
+                                    name: "Customer Name",
+                                    quote: "Add testimonial text."
+                                  }),
+                                  style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
+                                  type: "button",
+                                  children: "Add Testimonial"
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "grid", gap: 8 }, children: selectedItems.map((item, itemIndex) => {
+                                const isOpen = expandedItemIndex === itemIndex;
+                                const label = normalizeText(item.name, "") || `Testimonial ${itemIndex + 1}`;
+                                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                  "div",
+                                  {
+                                    style: {
+                                      border: "1px solid rgba(13, 74, 55, 0.16)",
+                                      borderRadius: 10,
+                                      display: "grid",
+                                      gap: 8,
+                                      padding: 8
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                        "button",
+                                        {
+                                          onClick: () => toggleSelectedItem(itemIndex),
+                                          style: {
+                                            alignItems: "center",
+                                            background: isOpen ? "rgba(18, 74, 55, 0.06)" : "transparent",
+                                            border: "none",
+                                            cursor: "pointer",
+                                            display: "flex",
+                                            fontSize: 12,
+                                            fontWeight: 800,
+                                            gap: 8,
+                                            justifyContent: "space-between",
+                                            padding: "6px 8px",
+                                            textAlign: "left",
+                                            width: "100%"
+                                          },
+                                          type: "button",
+                                          children: [
+                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: label }),
+                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "var(--ink-700)", fontSize: 11 }, children: isOpen ? "Hide" : "Show" })
+                                          ]
+                                        }
+                                      ),
+                                      isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "grid", gap: 6 }, children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                          "textarea",
+                                          {
+                                            onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "quote", event.target.value),
+                                            placeholder: "Customer quote",
+                                            style: { ...sidebarInputStyle, minHeight: 110, resize: "vertical" },
+                                            value: normalizeText(item.quote)
+                                          }
+                                        ),
+                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                          "input",
+                                          {
+                                            onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "name", event.target.value),
+                                            placeholder: "Customer name",
+                                            style: sidebarInputStyle,
+                                            type: "text",
+                                            value: normalizeText(item.name)
+                                          }
+                                        ),
+                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                          "input",
+                                          {
+                                            onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "location", event.target.value),
+                                            placeholder: "Location",
+                                            style: sidebarInputStyle,
+                                            type: "text",
+                                            value: normalizeText(item.location)
+                                          }
+                                        ),
+                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                          "button",
+                                          {
+                                            onClick: () => removeItemFromSelected("items", itemIndex),
+                                            style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
+                                            type: "button",
+                                            children: "Remove Testimonial"
+                                          }
+                                        )
+                                      ] }) : null
+                                    ]
+                                  },
+                                  `testimonial-item-control-${itemIndex}`
+                                );
+                              }) })
+                            ] }) : null,
                             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
                               "Upload Alt Text",
                               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/studio-pages/client.mjs

@@ -161,8 +161,11 @@ var defaultNodeData = {
   },
   testimonials: {
     ...withSectionStyleDefaults({}),
+    autoRotate: true,
     items: [{ location: "City, ST", name: "Customer Name", quote: "Customer feedback goes here." }],
-    title: "What Customers Say"
+    rotateIntervalSeconds: 7,
+    title: "What Customers Say",
+    visibleCount: 3
   },
   stats: withSectionStyleDefaults({
     items: [
@@ -1357,6 +1360,7 @@ function BuilderPageEditor({ initialDoc, pageID }) {
   const [selectedHeroMediaID, setSelectedHeroMediaID] = useState("");
   const [selectedItemIndex, setSelectedItemIndex] = useState(null);
   const [expandedItemIndex, setExpandedItemIndex] = useState(null);
+  const [testimonialsOffsets, setTestimonialsOffsets] = useState({});
   const [presetQuery, setPresetQuery] = useState("");
   const [pastSnapshots, setPastSnapshots] = useState([]);
   const [futureSnapshots, setFutureSnapshots] = useState([]);
@@ -1979,6 +1983,37 @@ function BuilderPageEditor({ initialDoc, pageID }) {
     setSidebarOpen(true);
     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));
+    };
+  }, [layout]);
   useEffect(() => {
     if (historyBypassRef.current) {
       historyBypassRef.current = false;
@@ -2768,6 +2803,15 @@ function BuilderPageEditor({ initialDoc, pageID }) {
             }
             if (type === "testimonials") {
               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 itemIndex = (offset + slotIndex) % items.length;
+                return { item: items[itemIndex], itemIndex };
+              });
               return /* @__PURE__ */ jsx(
                 BlockFrame,
                 {
@@ -2791,45 +2835,60 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                           value: normalizeText(block.title)
                         }
                       ) }) }),
-                      /* @__PURE__ */ jsx("div", { className: "split testimonials-grid", children: items.map((item, itemIndex) => /* @__PURE__ */ jsxs("article", { className: "panel", 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: [
-                            /* @__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}`)) })
+                      /* @__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",
+                                    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: [
+                                  /* @__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}`
+                        );
+                      }) })
                     ] })
                   )
                 },
@@ -5636,19 +5695,157 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                                 children: "Add FAQ Item"
                               }
                             ) : null,
-                            selectedType === "testimonials" ? /* @__PURE__ */ jsx(
-                              "button",
-                              {
-                                onClick: () => appendItemToSelected("items", {
-                                  location: "City, ST",
-                                  name: "Customer Name",
-                                  quote: "Add testimonial text."
-                                }),
-                                style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
-                                type: "button",
-                                children: "Add Testimonial"
-                              }
-                            ) : null,
+                            selectedType === "testimonials" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                              (() => {
+                                const visibleCountValue = Math.max(
+                                  1,
+                                  Math.min(6, Math.floor(parsePixelNumber(selectedBlock.visibleCount, 3)))
+                                );
+                                const rotateIntervalValue = Math.max(
+                                  2,
+                                  Math.min(30, Math.floor(parsePixelNumber(selectedBlock.rotateIntervalSeconds, 7)))
+                                );
+                                const autoRotateValue = typeof selectedBlock.autoRotate === "boolean" ? selectedBlock.autoRotate : true;
+                                return /* @__PURE__ */ jsxs(Fragment, { children: [
+                                  /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                    "Visible At Once",
+                                    /* @__PURE__ */ jsx(
+                                      "input",
+                                      {
+                                        max: 6,
+                                        min: 1,
+                                        onChange: (event) => updateSelectedField("visibleCount", Number(event.target.value)),
+                                        style: sidebarInputStyle,
+                                        type: "number",
+                                        value: visibleCountValue
+                                      }
+                                    )
+                                  ] }),
+                                  /* @__PURE__ */ jsxs("label", { style: { ...sidebarLabelStyle, alignItems: "center", gridTemplateColumns: "auto 1fr" }, children: [
+                                    /* @__PURE__ */ jsx(
+                                      "input",
+                                      {
+                                        checked: autoRotateValue,
+                                        onChange: (event) => updateSelectedField("autoRotate", event.target.checked),
+                                        type: "checkbox"
+                                      }
+                                    ),
+                                    "Auto Rotate"
+                                  ] }),
+                                  autoRotateValue ? /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                    "Rotate Interval (seconds)",
+                                    /* @__PURE__ */ jsx(
+                                      "input",
+                                      {
+                                        max: 30,
+                                        min: 2,
+                                        onChange: (event) => updateSelectedField("rotateIntervalSeconds", Number(event.target.value)),
+                                        style: sidebarInputStyle,
+                                        type: "number",
+                                        value: rotateIntervalValue
+                                      }
+                                    )
+                                  ] }) : null
+                                ] });
+                              })(),
+                              /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  onClick: () => appendItemToSelected("items", {
+                                    location: "City, ST",
+                                    name: "Customer Name",
+                                    quote: "Add testimonial text."
+                                  }),
+                                  style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
+                                  type: "button",
+                                  children: "Add Testimonial"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 8 }, children: selectedItems.map((item, itemIndex) => {
+                                const isOpen = expandedItemIndex === itemIndex;
+                                const label = normalizeText(item.name, "") || `Testimonial ${itemIndex + 1}`;
+                                return /* @__PURE__ */ jsxs(
+                                  "div",
+                                  {
+                                    style: {
+                                      border: "1px solid rgba(13, 74, 55, 0.16)",
+                                      borderRadius: 10,
+                                      display: "grid",
+                                      gap: 8,
+                                      padding: 8
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ jsxs(
+                                        "button",
+                                        {
+                                          onClick: () => toggleSelectedItem(itemIndex),
+                                          style: {
+                                            alignItems: "center",
+                                            background: isOpen ? "rgba(18, 74, 55, 0.06)" : "transparent",
+                                            border: "none",
+                                            cursor: "pointer",
+                                            display: "flex",
+                                            fontSize: 12,
+                                            fontWeight: 800,
+                                            gap: 8,
+                                            justifyContent: "space-between",
+                                            padding: "6px 8px",
+                                            textAlign: "left",
+                                            width: "100%"
+                                          },
+                                          type: "button",
+                                          children: [
+                                            /* @__PURE__ */ jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: label }),
+                                            /* @__PURE__ */ jsx("span", { style: { color: "var(--ink-700)", fontSize: 11 }, children: isOpen ? "Hide" : "Show" })
+                                          ]
+                                        }
+                                      ),
+                                      isOpen ? /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 6 }, children: [
+                                        /* @__PURE__ */ jsx(
+                                          "textarea",
+                                          {
+                                            onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "quote", event.target.value),
+                                            placeholder: "Customer quote",
+                                            style: { ...sidebarInputStyle, minHeight: 110, resize: "vertical" },
+                                            value: normalizeText(item.quote)
+                                          }
+                                        ),
+                                        /* @__PURE__ */ jsx(
+                                          "input",
+                                          {
+                                            onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "name", event.target.value),
+                                            placeholder: "Customer name",
+                                            style: sidebarInputStyle,
+                                            type: "text",
+                                            value: normalizeText(item.name)
+                                          }
+                                        ),
+                                        /* @__PURE__ */ jsx(
+                                          "input",
+                                          {
+                                            onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "location", event.target.value),
+                                            placeholder: "Location",
+                                            style: sidebarInputStyle,
+                                            type: "text",
+                                            value: normalizeText(item.location)
+                                          }
+                                        ),
+                                        /* @__PURE__ */ jsx(
+                                          "button",
+                                          {
+                                            onClick: () => removeItemFromSelected("items", itemIndex),
+                                            style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
+                                            type: "button",
+                                            children: "Remove Testimonial"
+                                          }
+                                        )
+                                      ] }) : null
+                                    ]
+                                  },
+                                  `testimonial-item-control-${itemIndex}`
+                                );
+                              }) })
+                            ] }) : null,
                             /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
                               "Upload Alt Text",
                               /* @__PURE__ */ jsx(

package/dist/studio-pages/index.js

@@ -186,8 +186,11 @@ var defaultNodeData = {
   },
   testimonials: {
     ...withSectionStyleDefaults({}),
+    autoRotate: true,
     items: [{ location: "City, ST", name: "Customer Name", quote: "Customer feedback goes here." }],
-    title: "What Customers Say"
+    rotateIntervalSeconds: 7,
+    title: "What Customers Say",
+    visibleCount: 3
   },
   stats: withSectionStyleDefaults({
     items: [

package/dist/studio-pages/index.mjs

@@ -6,7 +6,7 @@ import {
   pagePaletteGroups,
   pageStudioModuleManifest,
   studioDocumentToLayout
-} from "../chunk-7UWYJU4M.mjs";
+} from "../chunk-34J4T7X3.mjs";
 import "../chunk-SIL2J5MF.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {

package/package.json

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