@estation/create-cms-site 3.5.0 → 3.6.0

package/dist/index.js

@@ -585,10 +585,10 @@ When the website is inside an iframe, clicking any \`[data-cms-field]\` element
 \`\`\`
 
 Field type rules for live preview:
-- \`text\` → use on any element (\`<h1>\`, \`<p>\`, \`<span>\`), updated via \`textContent\`
-- \`richtext\` → use \`dangerouslySetInnerHTML\`, updated via \`innerHTML\`
-- \`image\` → must be on an \`<img>\` element, updated via \`.src\`
-- \`list\` → wrap items in a container element, updated by replacing inner HTML
+- \`text\` → use on any element (\`<h1>\`, \`<p>\`, \`<span>\`), updated via \`textContent\` — real-time
+- \`richtext\` → use \`dangerouslySetInnerHTML\`, updated via \`innerHTML\` — real-time
+- \`image\` → must be on an \`<img>\` element, updated via \`.src\` — real-time
+- \`list\` → **NO real-time preview**. List fields are too complex for postMessage updates. Changes appear after save + iframe reload. Do NOT try to send list field updates via postMessage — it will dump raw JSON into the page.
 
 ### Troubleshooting live preview
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estation/create-cms-site",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "MCP server to scaffold Next.js sites powered by eSTATION CMS",
   "type": "module",
   "bin": {

package/template/src/components/sections/FAQSection.tsx

@@ -14,7 +14,6 @@ export function FAQSection({ block, locale }: SectionProps) {
     }
   }
 
-  // Fallback: treat each content key as a question/answer pair
   if (faqs.length === 0) {
     for (const [key, field] of Object.entries(c)) {
       if (key === "title" || key === "description") continue;
@@ -32,13 +31,13 @@ export function FAQSection({ block, locale }: SectionProps) {
             {title}
           </h2>
         )}
-        <div data-cms-field="items" className="space-y-6">
+        <div className="space-y-6">
           {faqs.map((faq, i) => (
             <details key={i} className="border border-gray-200 rounded-lg">
-              <summary className="px-6 py-4 cursor-pointer font-medium hover:bg-gray-50">
+              <summary data-cms-field={`items.${i}.question`} className="px-6 py-4 cursor-pointer font-medium hover:bg-gray-50">
                 {faq.question}
               </summary>
-              <div className="px-6 pb-4 text-gray-600">{faq.answer}</div>
+              <div data-cms-field={`items.${i}.answer`} className="px-6 pb-4 text-gray-600">{faq.answer}</div>
             </details>
           ))}
         </div>

package/template/src/components/sections/FeaturesSection.tsx

@@ -28,11 +28,11 @@ export function FeaturesSection({ block, locale }: SectionProps) {
             {description}
           </p>
         )}
-        <div data-cms-field="items" className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
           {features.map((feat, i) => (
             <div key={i} className="p-6 rounded-lg border border-gray-200">
-              <h3 className="text-xl font-semibold mb-2">{feat.title}</h3>
-              <p className="text-gray-600">{feat.description}</p>
+              <h3 data-cms-field={`items.${i}.title`} className="text-xl font-semibold mb-2">{feat.title}</h3>
+              <p data-cms-field={`items.${i}.description`} className="text-gray-600">{feat.description}</p>
             </div>
           ))}
         </div>

package/template/src/components/sections/TestimonialsSection.tsx

@@ -15,7 +15,6 @@ export function TestimonialsSection({ block, locale }: SectionProps) {
     }
   }
 
-  // Fallback: extract numbered testimonials from flat fields
   if (testimonials.length === 0) {
     let i = 1;
     while (str(c[`testimonial-${i}-title`]) || str(c[`testimonial-${i}-description`])) {
@@ -35,13 +34,13 @@ export function TestimonialsSection({ block, locale }: SectionProps) {
             {title}
           </h2>
         )}
-        <div data-cms-field="items" className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
           {testimonials.map((t, i) => (
             <blockquote key={i} className="p-6 bg-white rounded-lg border border-gray-200">
-              <p className="text-gray-600 italic mb-4">&ldquo;{t.quote}&rdquo;</p>
-              <footer className="font-medium">
-                {t.name}
-                {t.role && <span className="text-gray-500 text-sm block">{t.role}</span>}
+              <p data-cms-field={`items.${i}.quote`} className="text-gray-600 italic mb-4">&ldquo;{t.quote}&rdquo;</p>
+              <footer>
+                <span data-cms-field={`items.${i}.name`} className="font-medium">{t.name}</span>
+                {t.role && <span data-cms-field={`items.${i}.role`} className="text-gray-500 text-sm block">{t.role}</span>}
               </footer>
             </blockquote>
           ))}