fix(builder): Testimonials single-layout static-parity export (D2a)

The editor rendered layout="single" as an interactive carousel (prev/next
buttons, dot indicators, currentIndex state) but toHtml exported a static
stacked list of ALL testimonials -- a structural mismatch. This codebase's
static export has no published-JS interactivity for this component, so
static-parity is the lower-risk fix: the editor's single view now renders
just the first testimonial (no carousel chrome), and toHtml exports
exactly that one card. Grid layout is unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

craft/src/components/sections/Testimonials.toHtml.test.ts

@@ -0,0 +1,39 @@
+import { describe, test, expect } from 'vitest';
+import { Testimonials } from './Testimonials';
+
+const toHtml = (Testimonials as any).toHtml;
+
+const testimonials = [
+  { quote: 'Quote one', name: 'Name One', title: 'Title One', rating: 5 },
+  { quote: 'Quote two', name: 'Name Two', title: 'Title Two', rating: 4 },
+  { quote: 'Quote three', name: 'Name Three', title: 'Title Three', rating: 3 },
+];
+
+describe('Testimonials.toHtml single-layout export parity', () => {
+  // The editor's "single" layout shows exactly one testimonial (a single
+  // card, no stacked list). Static-parity fix: toHtml exports exactly one
+  // card too (the first testimonial), matching what the editor displays by
+  // default -- not a stacked list of all testimonials, and not a JS carousel
+  // (this codebase's static export has no published-JS interactivity for
+  // this component).
+  test('single layout: exports exactly one testimonial card, not all of them', () => {
+    const { html } = toHtml({ testimonials, layout: 'single' }, '');
+    expect(html).toContain('Name One');
+    expect(html).not.toContain('Name Two');
+    expect(html).not.toContain('Name Three');
+    expect(html).toContain('Quote one');
+  });
+
+  test('single layout: no carousel controls (prev/next/dots) in static export', () => {
+    const { html } = toHtml({ testimonials, layout: 'single' }, '');
+    expect(html).not.toContain('fa-chevron-left');
+    expect(html).not.toContain('fa-chevron-right');
+  });
+
+  test('grid layout: still exports all testimonials (unchanged behavior)', () => {
+    const { html } = toHtml({ testimonials, layout: 'grid' }, '');
+    expect(html).toContain('Name One');
+    expect(html).toContain('Name Two');
+    expect(html).toContain('Name Three');
+  });
+});

craft/src/components/sections/Testimonials.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useState } from 'react';
+import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
 import { escapeHtml, escapeAttr } from '../../utils/escape';
@@ -63,8 +63,6 @@ export const Testimonials: UserComponent<TestimonialsProps> = ({
     selected: node.events.selected,
   }));
 
-  const [currentIndex, setCurrentIndex] = useState(0);
-
   const cardStyle: CSSProperties = {
     backgroundColor: cardBg,
     borderRadius: '12px',
@@ -103,44 +101,11 @@ export const Testimonials: UserComponent<TestimonialsProps> = ({
             {items.map((t, i) => renderCard(t, i))}
           </div>
         ) : (
+          // Static single testimonial (parity with the static toHtml export --
+          // no carousel controls, since the published site has no JS for this
+          // component). Always shows the first testimonial.
           <div style={{ maxWidth: '600px', margin: '0 auto', position: 'relative' }}>
-            {renderCard(items[currentIndex] || items[0], currentIndex)}
-            {items.length > 1 && (
-              <div style={{ display: 'flex', justifyContent: 'center', gap: '12px', marginTop: '20px' }}>
-                <button
-                  onClick={() => setCurrentIndex((prev) => (prev - 1 + items.length) % items.length)}
-                  style={{
-                    width: 36, height: 36, borderRadius: '50%', border: '1px solid #d1d5db',
-                    background: '#ffffff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    fontSize: 14, color: '#374151',
-                  }}
-                >
-                  <i className="fa fa-chevron-left" />
-                </button>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-                  {items.map((_, i) => (
-                    <div
-                      key={i}
-                      onClick={() => setCurrentIndex(i)}
-                      style={{
-                        width: 8, height: 8, borderRadius: '50%', cursor: 'pointer',
-                        backgroundColor: i === currentIndex ? '#3b82f6' : '#d1d5db',
-                      }}
-                    />
-                  ))}
-                </div>
-                <button
-                  onClick={() => setCurrentIndex((prev) => (prev + 1) % items.length)}
-                  style={{
-                    width: 36, height: 36, borderRadius: '50%', border: '1px solid #d1d5db',
-                    background: '#ffffff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    fontSize: 14, color: '#374151',
-                  }}
-                >
-                  <i className="fa fa-chevron-right" />
-                </button>
-              </div>
-            )}
+            {renderCard(items[0], 0)}
           </div>
         )}
       </div>
@@ -191,26 +156,28 @@ Testimonials.craft = {
 
   const cardCss = `background-color:${cardBg};border-radius:12px;padding:32px 24px;text-align:center;border:1px solid #e2e8f0`;
 
-  const cards = items.map((t) => {
-    return `<div style="${cardCss}">
+  const cardHtml = (t: Testimonial): string => `<div style="${cardCss}">
       ${starsHtml(t.rating, starColor)}
       <p style="font-size:15px;color:#374151;line-height:1.7;margin-bottom:16px;font-style:italic;font-family:Inter,sans-serif">&ldquo;${escapeHtml(t.quote)}&rdquo;</p>
       <div style="font-weight:600;font-size:14px;color:#18181b;font-family:Inter,sans-serif">${escapeHtml(t.name)}</div>
       <div style="font-size:13px;color:#64748b;font-family:Inter,sans-serif">${escapeHtml(t.title)}</div>
     </div>`;
-  }).join('\n    ');
 
   if (layout === 'single') {
-    // For single layout, export as grid with 1 column (simpler static export)
+    // Static parity with the editor's single-layout render: exactly ONE
+    // testimonial card (the first), no carousel controls -- the published
+    // export has no JS for this component.
     return {
       html: `<section${idAttr}${sectionStyle ? ` style="${sectionStyle}"` : ''}>
-  <div style="max-width:600px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:24px">
-    ${cards}
+  <div style="max-width:600px;margin:0 auto">
+    ${cardHtml(items[0])}
   </div>
 </section>`,
     };
   }
 
+  const cards = items.map(cardHtml).join('\n    ');
+
   return {
     html: `<section${idAttr}${sectionStyle ? ` style="${sectionStyle}"` : ''}>
   <div style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(${columns},1fr);gap:24px">