reaminig 5-t-9

site-builder/src/pages/preview/PreviewCanvas.tsx

@@ -8,6 +8,7 @@ import {
   type StatItem,
 } from '@shared';
 import { useSiteDefinitionStore } from '../../state/siteDefinitionStore';
+import { useBuilderStore } from '../../state/builderStore';
 import type { PageBlock, PageBlueprint, SiteStructure } from '../../types/siteBuilder';
 
 type StructuredContent = Record<string, unknown> & {
@@ -20,6 +21,8 @@ type StructuredContent = Record<string, unknown> & {
 
 export function PreviewCanvas() {
   const { structure, pages, selectedSlug, selectPage } = useSiteDefinitionStore();
+  const { selectedPageIds, togglePageSelection, selectAllPages, clearPageSelection, activeBlueprint } =
+    useBuilderStore();
 
   const page = useMemo(() => {
     if (structure?.pages?.length) {
@@ -66,9 +69,68 @@ export function PreviewCanvas() {
     </div>
   );
 
+  // Only show page selection if we have actual PageBlueprint objects with IDs
+  const hasPageBlueprints = pages.length > 0 && pages.every((p) => p.id > 0);
+
+  const allSelected = hasPageBlueprints && pages.length > 0 && selectedPageIds.length === pages.length;
+  const someSelected = hasPageBlueprints && selectedPageIds.length > 0 && selectedPageIds.length < pages.length;
+
   return (
     <div className="preview-canvas">
       <div className="preview-nav">
+        {hasPageBlueprints && activeBlueprint && (
+          <div className="preview-page-selection" style={{ marginBottom: '12px', padding: '8px', background: '#f5f5f5', borderRadius: '4px' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
+              <input
+                type="checkbox"
+                checked={allSelected}
+                ref={(input) => {
+                  if (input) input.indeterminate = someSelected;
+                }}
+                onChange={(e) => {
+                  if (e.target.checked) {
+                    selectAllPages();
+                  } else {
+                    clearPageSelection();
+                  }
+                }}
+                style={{ cursor: 'pointer' }}
+              />
+              <label style={{ cursor: 'pointer', fontSize: '14px', fontWeight: '500' }}>
+                Select pages for bulk generation ({selectedPageIds.length} selected)
+              </label>
+            </div>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+              {pages.map((p) => {
+                const isSelected = selectedPageIds.includes(p.id);
+                return (
+                  <label
+                    key={p.id}
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '4px',
+                      cursor: 'pointer',
+                      fontSize: '12px',
+                      padding: '4px 8px',
+                      background: isSelected ? '#e3f2fd' : 'white',
+                      border: `1px solid ${isSelected ? '#2196f3' : '#ddd'}`,
+                      borderRadius: '4px',
+                    }}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={isSelected}
+                      onChange={() => togglePageSelection(p.id)}
+                      style={{ cursor: 'pointer' }}
+                    />
+                    <span>{p.title || p.slug.replace('-', ' ')}</span>
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        )}
         {navItems?.map((slug) => (
           <button
             key={slug}