@actuate-media/cms-admin 0.9.0 → 0.11.0

package/dist/views/page-builder/SEOPanel.js

@@ -29,11 +29,11 @@ function getScoreLabel(score) {
 function StatusIcon({ status }) {
     switch (status) {
         case 'good':
-            return _jsx(CheckCircle2, { size: 14, className: "text-green-500 shrink-0" });
+            return _jsx(CheckCircle2, { size: 14, className: "shrink-0 text-green-500" });
         case 'warning':
-            return _jsx(AlertCircle, { size: 14, className: "text-amber-500 shrink-0" });
+            return _jsx(AlertCircle, { size: 14, className: "shrink-0 text-amber-500" });
         case 'error':
-            return _jsx(XCircle, { size: 14, className: "text-red-500 shrink-0" });
+            return _jsx(XCircle, { size: 14, className: "shrink-0 text-red-500" });
     }
 }
 function ScoreRing({ score }) {
@@ -49,13 +49,13 @@ function ScoreSummary({ checks }) {
     const passed = checks.filter((c) => c.status === 'good').length;
     const warnings = checks.filter((c) => c.status === 'warning').length;
     const errors = checks.filter((c) => c.status === 'error').length;
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(CheckCircle2, { size: 12, className: "text-green-500" }), _jsxs("span", { className: "text-xs text-muted-foreground", children: [passed, " passed"] })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(AlertCircle, { size: 12, className: "text-amber-500" }), _jsxs("span", { className: "text-xs text-muted-foreground", children: [warnings, " warnings"] })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(XCircle, { size: 12, className: "text-red-500" }), _jsxs("span", { className: "text-xs text-muted-foreground", children: [errors, " issues"] })] })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(CheckCircle2, { size: 12, className: "text-green-500" }), _jsxs("span", { className: "text-muted-foreground text-xs", children: [passed, " passed"] })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(AlertCircle, { size: 12, className: "text-amber-500" }), _jsxs("span", { className: "text-muted-foreground text-xs", children: [warnings, " warnings"] })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(XCircle, { size: 12, className: "text-red-500" }), _jsxs("span", { className: "text-muted-foreground text-xs", children: [errors, " issues"] })] })] }));
 }
 function CollapsibleSection({ title, icon: Icon, expanded, onToggle, children, }) {
-    return (_jsxs("div", { className: "border-b border-border last:border-b-0", children: [_jsxs("button", { type: "button", className: "w-full text-left px-4 py-3 flex items-center justify-between hover:bg-muted/50 transition-colors", onClick: onToggle, "aria-expanded": expanded, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { size: 14, className: "text-muted-foreground" }), _jsx("span", { className: "text-xs font-medium text-foreground", children: title })] }), expanded ? (_jsx(ChevronUp, { size: 14, className: "text-muted-foreground" })) : (_jsx(ChevronDown, { size: 14, className: "text-muted-foreground" }))] }), expanded && _jsx("div", { className: "px-4 pb-4", children: children })] }));
+    return (_jsxs("div", { className: "border-border border-b last:border-b-0", children: [_jsxs("button", { type: "button", className: "hover:bg-muted/50 flex w-full items-center justify-between px-4 py-3 text-left transition-colors", onClick: onToggle, "aria-expanded": expanded, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { size: 14, className: "text-muted-foreground" }), _jsx("span", { className: "text-foreground text-xs font-medium", children: title })] }), expanded ? (_jsx(ChevronUp, { size: 14, className: "text-muted-foreground" })) : (_jsx(ChevronDown, { size: 14, className: "text-muted-foreground" }))] }), expanded && _jsx("div", { className: "px-4 pb-4", children: children })] }));
 }
 function SEOChecksList({ checks }) {
-    return (_jsx("div", { className: "flex flex-col gap-2", children: checks.map((check) => (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(StatusIcon, { status: check.status }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-xs font-medium text-foreground", children: check.label }), _jsx("span", { className: "text-xs text-muted-foreground", children: check.detail })] })] }, check.id))) }));
+    return (_jsx("div", { className: "flex flex-col gap-2", children: checks.map((check) => (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(StatusIcon, { status: check.status }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-foreground text-xs font-medium", children: check.label }), _jsx("span", { className: "text-muted-foreground text-xs", children: check.detail })] })] }, check.id))) }));
 }
 function ReadabilityGrid({ readability }) {
     const fleschLabel = readability.fleschScore >= 60
@@ -63,26 +63,26 @@ function ReadabilityGrid({ readability }) {
         : readability.fleschScore >= 30
             ? 'Moderate'
             : 'Difficult';
-    return (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "bg-muted/50 rounded-md p-3 flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(BarChart3, { size: 12, className: "text-muted-foreground" }), _jsx("span", { className: "text-xs text-muted-foreground", children: "Flesch Score" })] }), _jsx("span", { className: `text-sm font-medium ${getScoreColor(readability.fleschScore)}`, children: readability.fleschScore }), _jsx("span", { className: "text-xs text-muted-foreground", children: fleschLabel })] }), _jsxs("div", { className: "bg-muted/50 rounded-md p-3 flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Type, { size: 12, className: "text-muted-foreground" }), _jsx("span", { className: "text-xs text-muted-foreground", children: "Word Count" })] }), _jsx("span", { className: "text-sm font-medium text-foreground", children: readability.wordCount }), _jsx("span", { className: "text-xs text-muted-foreground", children: readability.wordCount >= 300 ? 'Good length' : 'Short' })] }), _jsxs("div", { className: "bg-muted/50 rounded-md p-3 flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(FileText, { size: 12, className: "text-muted-foreground" }), _jsx("span", { className: "text-xs text-muted-foreground", children: "Avg Sentence" })] }), _jsxs("span", { className: "text-sm font-medium text-foreground", children: [readability.avgSentenceLength, " words"] }), _jsx("span", { className: "text-xs text-muted-foreground", children: readability.avgSentenceLength <= 20 ? 'Good' : 'Long' })] }), _jsxs("div", { className: "bg-muted/50 rounded-md p-3 flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Clock, { size: 12, className: "text-muted-foreground" }), _jsx("span", { className: "text-xs text-muted-foreground", children: "Reading Time" })] }), _jsxs("span", { className: "text-sm font-medium text-foreground", children: [readability.readingTime, " min"] }), _jsxs("span", { className: "text-xs text-muted-foreground", children: ["~", readability.wordCount, " words"] })] })] }));
+    return (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "bg-muted/50 flex flex-col gap-1 rounded-md p-3", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(BarChart3, { size: 12, className: "text-muted-foreground" }), _jsx("span", { className: "text-muted-foreground text-xs", children: "Flesch Score" })] }), _jsx("span", { className: `text-sm font-medium ${getScoreColor(readability.fleschScore)}`, children: readability.fleschScore }), _jsx("span", { className: "text-muted-foreground text-xs", children: fleschLabel })] }), _jsxs("div", { className: "bg-muted/50 flex flex-col gap-1 rounded-md p-3", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Type, { size: 12, className: "text-muted-foreground" }), _jsx("span", { className: "text-muted-foreground text-xs", children: "Word Count" })] }), _jsx("span", { className: "text-foreground text-sm font-medium", children: readability.wordCount }), _jsx("span", { className: "text-muted-foreground text-xs", children: readability.wordCount >= 300 ? 'Good length' : 'Short' })] }), _jsxs("div", { className: "bg-muted/50 flex flex-col gap-1 rounded-md p-3", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(FileText, { size: 12, className: "text-muted-foreground" }), _jsx("span", { className: "text-muted-foreground text-xs", children: "Avg Sentence" })] }), _jsxs("span", { className: "text-foreground text-sm font-medium", children: [readability.avgSentenceLength, " words"] }), _jsx("span", { className: "text-muted-foreground text-xs", children: readability.avgSentenceLength <= 20 ? 'Good' : 'Long' })] }), _jsxs("div", { className: "bg-muted/50 flex flex-col gap-1 rounded-md p-3", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Clock, { size: 12, className: "text-muted-foreground" }), _jsx("span", { className: "text-muted-foreground text-xs", children: "Reading Time" })] }), _jsxs("span", { className: "text-foreground text-sm font-medium", children: [readability.readingTime, " min"] }), _jsxs("span", { className: "text-muted-foreground text-xs", children: ["~", readability.wordCount, " words"] })] })] }));
 }
 function PerBlockHints({ hints }) {
-    return (_jsx("div", { className: "flex flex-col gap-2", children: hints.map((hint, index) => (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(StatusIcon, { status: hint.status }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-xs font-medium text-foreground", children: hint.label }), _jsx("span", { className: "text-xs text-muted-foreground", children: hint.detail })] })] }, `${hint.id}-${index}`))) }));
+    return (_jsx("div", { className: "flex flex-col gap-2", children: hints.map((hint, index) => (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(StatusIcon, { status: hint.status }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-foreground text-xs font-medium", children: hint.label }), _jsx("span", { className: "text-muted-foreground text-xs", children: hint.detail })] })] }, `${hint.id}-${index}`))) }));
 }
 function BasicSEOFields({ pageSettings, onPageSettingsChange, }) {
     const metaTitleLength = (pageSettings.metaTitle || '').length;
     const metaDescLength = (pageSettings.metaDescription || '').length;
-    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-xs font-medium text-foreground", children: "Meta Title" }), _jsxs("span", { className: `text-xs ${metaTitleLength > 60 ? 'text-red-500' : metaTitleLength > 0 ? 'text-muted-foreground' : 'text-muted-foreground'}`, children: [metaTitleLength, "/60"] })] }), _jsx("input", { type: "text", value: pageSettings.metaTitle || '', onChange: (e) => onPageSettingsChange({ metaTitle: e.target.value }), placeholder: "Page title for search engines", className: "w-full px-3 py-2 text-sm bg-input-background border border-border rounded-md text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-xs font-medium text-foreground", children: "Meta Description" }), _jsxs("span", { className: `text-xs ${metaDescLength > 160 ? 'text-red-500' : metaDescLength > 0 ? 'text-muted-foreground' : 'text-muted-foreground'}`, children: [metaDescLength, "/160"] })] }), _jsx("textarea", { value: pageSettings.metaDescription || '', onChange: (e) => onPageSettingsChange({ metaDescription: e.target.value }), placeholder: "Brief description of the page content", rows: 3, className: "w-full px-3 py-2 text-sm bg-input-background border border-border rounded-md text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary resize-none" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("label", { className: "text-xs font-medium text-foreground", children: "Focus Keyphrase" }), _jsx("input", { type: "text", value: pageSettings.focusKeyphrase || '', onChange: (e) => onPageSettingsChange({ focusKeyphrase: e.target.value }), placeholder: "Primary keyword or phrase", className: "w-full px-3 py-2 text-sm bg-input-background border border-border rounded-md text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary" })] })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-foreground text-xs font-medium", children: "Meta Title" }), _jsxs("span", { className: `text-xs ${metaTitleLength > 60 ? 'text-red-500' : metaTitleLength > 0 ? 'text-muted-foreground' : 'text-muted-foreground'}`, children: [metaTitleLength, "/60"] })] }), _jsx("input", { type: "text", value: pageSettings.metaTitle || '', onChange: (e) => onPageSettingsChange({ metaTitle: e.target.value }), placeholder: "Page title for search engines", className: "bg-input-background border-border text-foreground placeholder:text-muted-foreground focus:ring-primary w-full rounded-md border px-3 py-2 text-sm focus:ring-1 focus:outline-none" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-foreground text-xs font-medium", children: "Meta Description" }), _jsxs("span", { className: `text-xs ${metaDescLength > 160 ? 'text-red-500' : metaDescLength > 0 ? 'text-muted-foreground' : 'text-muted-foreground'}`, children: [metaDescLength, "/160"] })] }), _jsx("textarea", { value: pageSettings.metaDescription || '', onChange: (e) => onPageSettingsChange({ metaDescription: e.target.value }), placeholder: "Brief description of the page content", rows: 3, className: "bg-input-background border-border text-foreground placeholder:text-muted-foreground focus:ring-primary w-full resize-none rounded-md border px-3 py-2 text-sm focus:ring-1 focus:outline-none" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("label", { className: "text-foreground text-xs font-medium", children: "Focus Keyphrase" }), _jsx("input", { type: "text", value: pageSettings.focusKeyphrase || '', onChange: (e) => onPageSettingsChange({ focusKeyphrase: e.target.value }), placeholder: "Primary keyword or phrase", className: "bg-input-background border-border text-foreground placeholder:text-muted-foreground focus:ring-primary w-full rounded-md border px-3 py-2 text-sm focus:ring-1 focus:outline-none" })] })] }));
 }
 function SearchPreview({ pageSettings }) {
     const title = pageSettings.metaTitle || pageSettings.title || 'Untitled Page';
     const description = pageSettings.metaDescription || 'No description set';
     const slug = pageSettings.slug || 'page';
-    return (_jsxs("div", { className: "bg-background rounded-md border border-border p-4", children: [_jsx("p", { className: "text-xs text-muted-foreground mb-2", children: "Google Search Preview" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-sm text-primary truncate", children: title }), _jsxs("p", { className: "text-xs text-green-600 truncate", children: ["example.com/", slug] }), _jsx("p", { className: "text-xs text-muted-foreground line-clamp-2", children: description })] })] }));
+    return (_jsxs("div", { className: "bg-background border-border rounded-md border p-4", children: [_jsx("p", { className: "text-muted-foreground mb-2 text-xs", children: "Google Search Preview" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-primary truncate text-sm", children: title }), _jsxs("p", { className: "truncate text-xs text-green-600", children: ["example.com/", slug] }), _jsx("p", { className: "text-muted-foreground line-clamp-2 text-xs", children: description })] })] }));
 }
 function SocialPreview({ pageSettings }) {
     const title = pageSettings.metaTitle || pageSettings.title || 'Untitled Page';
     const description = pageSettings.metaDescription || 'No description set';
-    return (_jsxs("div", { className: "bg-background rounded-md border border-border overflow-hidden", children: [_jsx("p", { className: "text-xs text-muted-foreground px-4 pt-3 pb-2", children: "Open Graph Preview" }), pageSettings.ogImage && (_jsx("div", { className: "w-full h-32 bg-muted flex items-center justify-center overflow-hidden", children: _jsx("img", { src: pageSettings.ogImage, alt: "OG preview", className: "w-full h-full object-cover" }) })), !pageSettings.ogImage && (_jsx("div", { className: "w-full h-32 bg-muted flex items-center justify-center", children: _jsx(Globe, { size: 24, className: "text-muted-foreground" }) })), _jsxs("div", { className: "p-3 flex flex-col gap-1", children: [_jsx("p", { className: "text-xs text-muted-foreground uppercase", children: "example.com" }), _jsx("p", { className: "text-sm font-medium text-foreground truncate", children: title }), _jsx("p", { className: "text-xs text-muted-foreground line-clamp-2", children: description })] })] }));
+    return (_jsxs("div", { className: "bg-background border-border overflow-hidden rounded-md border", children: [_jsx("p", { className: "text-muted-foreground px-4 pt-3 pb-2 text-xs", children: "Open Graph Preview" }), pageSettings.ogImage && (_jsx("div", { className: "bg-muted flex h-32 w-full items-center justify-center overflow-hidden", children: _jsx("img", { src: pageSettings.ogImage, alt: "OG preview", className: "h-full w-full object-cover" }) })), !pageSettings.ogImage && (_jsx("div", { className: "bg-muted flex h-32 w-full items-center justify-center", children: _jsx(Globe, { size: 24, className: "text-muted-foreground" }) })), _jsxs("div", { className: "flex flex-col gap-1 p-3", children: [_jsx("p", { className: "text-muted-foreground text-xs uppercase", children: "example.com" }), _jsx("p", { className: "text-foreground truncate text-sm font-medium", children: title }), _jsx("p", { className: "text-muted-foreground line-clamp-2 text-xs", children: description })] })] }));
 }
 export function BuilderSEOPanel({ tree, pageSettings, onPageSettingsChange, selectedNodeId, }) {
     const analysis = useMemo(() => analyzeSEO(tree, pageSettings), [tree, pageSettings]);
@@ -96,8 +96,8 @@ export function BuilderSEOPanel({ tree, pageSettings, onPageSettingsChange, sele
         return analysis.perBlockHints.get(selectedNodeId) || [];
     }, [analysis.perBlockHints, selectedNodeId]);
     if (!tree.children || tree.children.length === 0) {
-        return (_jsxs("div", { className: "p-6 flex flex-col items-center justify-center text-center min-h-[200px]", children: [_jsx(Search, { size: 32, className: "text-muted-foreground mb-3" }), _jsx("p", { className: "text-sm font-medium text-foreground mb-1", children: "SEO Analysis" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Add content to your page to see SEO analysis" })] }));
+        return (_jsxs("div", { className: "flex min-h-[200px] flex-col items-center justify-center p-6 text-center", children: [_jsx(Search, { size: 32, className: "text-muted-foreground mb-3" }), _jsx("p", { className: "text-foreground mb-1 text-sm font-medium", children: "SEO Analysis" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Add content to your page to see SEO analysis" })] }));
     }
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-4 px-4 py-5 border-b border-border", children: [_jsx(ScoreRing, { score: analysis.score }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs font-medium text-foreground", children: getScoreLabel(analysis.score) }), _jsx(ScoreSummary, { checks: analysis.checks })] })] }), _jsxs("div", { className: "flex flex-col", children: [_jsx(CollapsibleSection, { title: "SEO Checks", icon: Search, expanded: expandedSections.includes('checks'), onToggle: () => toggleSection('checks'), children: _jsx(SEOChecksList, { checks: analysis.checks }) }), _jsx(CollapsibleSection, { title: "Readability", icon: BarChart3, expanded: expandedSections.includes('readability'), onToggle: () => toggleSection('readability'), children: _jsx(ReadabilityGrid, { readability: analysis.readability }) }), blockHints.length > 0 && (_jsx(CollapsibleSection, { title: "Block Hints", icon: Target, expanded: expandedSections.includes('blockHints'), onToggle: () => toggleSection('blockHints'), children: _jsx(PerBlockHints, { hints: blockHints }) })), _jsx(CollapsibleSection, { title: "Basic SEO", icon: FileText, expanded: expandedSections.includes('basicSeo'), onToggle: () => toggleSection('basicSeo'), children: _jsx(BasicSEOFields, { pageSettings: pageSettings, onPageSettingsChange: onPageSettingsChange }) }), _jsx(CollapsibleSection, { title: "Search Preview", icon: Eye, expanded: expandedSections.includes('searchPreview'), onToggle: () => toggleSection('searchPreview'), children: _jsx(SearchPreview, { pageSettings: pageSettings }) }), _jsx(CollapsibleSection, { title: "Social Preview", icon: Globe, expanded: expandedSections.includes('socialPreview'), onToggle: () => toggleSection('socialPreview'), children: _jsx(SocialPreview, { pageSettings: pageSettings }) })] })] }));
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "border-border flex items-center gap-4 border-b px-4 py-5", children: [_jsx(ScoreRing, { score: analysis.score }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-foreground text-xs font-medium", children: getScoreLabel(analysis.score) }), _jsx(ScoreSummary, { checks: analysis.checks })] })] }), _jsxs("div", { className: "flex flex-col", children: [_jsx(CollapsibleSection, { title: "SEO Checks", icon: Search, expanded: expandedSections.includes('checks'), onToggle: () => toggleSection('checks'), children: _jsx(SEOChecksList, { checks: analysis.checks }) }), _jsx(CollapsibleSection, { title: "Readability", icon: BarChart3, expanded: expandedSections.includes('readability'), onToggle: () => toggleSection('readability'), children: _jsx(ReadabilityGrid, { readability: analysis.readability }) }), blockHints.length > 0 && (_jsx(CollapsibleSection, { title: "Block Hints", icon: Target, expanded: expandedSections.includes('blockHints'), onToggle: () => toggleSection('blockHints'), children: _jsx(PerBlockHints, { hints: blockHints }) })), _jsx(CollapsibleSection, { title: "Basic SEO", icon: FileText, expanded: expandedSections.includes('basicSeo'), onToggle: () => toggleSection('basicSeo'), children: _jsx(BasicSEOFields, { pageSettings: pageSettings, onPageSettingsChange: onPageSettingsChange }) }), _jsx(CollapsibleSection, { title: "Search Preview", icon: Eye, expanded: expandedSections.includes('searchPreview'), onToggle: () => toggleSection('searchPreview'), children: _jsx(SearchPreview, { pageSettings: pageSettings }) }), _jsx(CollapsibleSection, { title: "Social Preview", icon: Globe, expanded: expandedSections.includes('socialPreview'), onToggle: () => toggleSection('socialPreview'), children: _jsx(SocialPreview, { pageSettings: pageSettings }) })] })] }));
 }
 //# sourceMappingURL=SEOPanel.js.map

package/dist/views/page-builder/SavedSections.js

@@ -116,14 +116,14 @@ export function SavedSections({ onNavigate, config }) {
                 }
             }, onCancel: () => setViewState({ mode: 'list' }) }));
     }
-    return (_jsxs("div", { className: "p-4 pr-8", children: [_jsxs("div", { className: "mb-6 flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-medium text-foreground", children: "Saved Sections" }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Reusable sections for the page builder" })] }), _jsxs("button", { type: "button", onClick: () => setViewState({ mode: 'create' }), className: "flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90", children: [_jsx(Plus, { size: 16 }), "Create Section"] })] }), _jsxs("div", { className: "mb-4 flex items-center gap-1 border-b border-border", children: [_jsx(CategoryTab, { label: "All", active: activeCategory === 'all', onClick: () => setActiveCategory('all') }), CATEGORIES.map((cat) => (_jsx(CategoryTab, { label: cat.charAt(0).toUpperCase() + cat.slice(1), active: activeCategory === cat, onClick: () => setActiveCategory(cat) }, cat)))] }), loading && (_jsx("div", { className: "flex items-center justify-center py-16", children: _jsx(Loader2, { className: "w-6 h-6 animate-spin text-muted-foreground" }) })), error && !loading && (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx(AlertTriangle, { size: 24, className: "text-destructive mb-2" }), _jsx("p", { className: "text-sm text-muted-foreground mb-3", children: error }), _jsx("button", { type: "button", onClick: fetchSections, className: "px-3 py-1.5 text-sm font-medium text-foreground border border-border rounded-md hover:bg-accent transition-colors", children: "Retry" })] })), !loading && !error && filteredSections.length === 0 && (_jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [_jsx(Layers, { size: 32, className: "text-muted-foreground mb-3" }), _jsx("p", { className: "text-sm font-medium text-foreground mb-1", children: "No saved sections" }), _jsx("p", { className: "text-xs text-muted-foreground mb-4", children: activeCategory === 'all'
+    return (_jsxs("div", { className: "p-4 pr-8", children: [_jsxs("div", { className: "mb-6 flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-foreground text-2xl font-medium", children: "Saved Sections" }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: "Reusable sections for the page builder" })] }), _jsxs("button", { type: "button", onClick: () => setViewState({ mode: 'create' }), className: "bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors", children: [_jsx(Plus, { size: 16 }), "Create Section"] })] }), _jsxs("div", { className: "border-border mb-4 flex items-center gap-1 border-b", children: [_jsx(CategoryTab, { label: "All", active: activeCategory === 'all', onClick: () => setActiveCategory('all') }), CATEGORIES.map((cat) => (_jsx(CategoryTab, { label: cat.charAt(0).toUpperCase() + cat.slice(1), active: activeCategory === cat, onClick: () => setActiveCategory(cat) }, cat)))] }), loading && (_jsx("div", { className: "flex items-center justify-center py-16", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) })), error && !loading && (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx(AlertTriangle, { size: 24, className: "text-destructive mb-2" }), _jsx("p", { className: "text-muted-foreground mb-3 text-sm", children: error }), _jsx("button", { type: "button", onClick: fetchSections, className: "text-foreground border-border hover:bg-accent rounded-md border px-3 py-1.5 text-sm font-medium transition-colors", children: "Retry" })] })), !loading && !error && filteredSections.length === 0 && (_jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [_jsx(Layers, { size: 32, className: "text-muted-foreground mb-3" }), _jsx("p", { className: "text-foreground mb-1 text-sm font-medium", children: "No saved sections" }), _jsx("p", { className: "text-muted-foreground mb-4 text-xs", children: activeCategory === 'all'
                             ? 'Create your first reusable section to get started.'
-                            : `No sections in the "${activeCategory}" category.` }), activeCategory === 'all' && (_jsxs("button", { type: "button", onClick: () => setViewState({ mode: 'create' }), className: "flex items-center gap-2 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors", children: [_jsx(Plus, { size: 14 }), "Create Section"] }))] })), !loading && !error && filteredSections.length > 0 && (_jsx("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-3", children: filteredSections.map((section) => (_jsxs("div", { className: "border border-border rounded-lg p-4 bg-card hover:border-primary/50 transition-colors", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-sm font-medium text-foreground truncate", children: section.name }), section.description && (_jsx("p", { className: "text-xs text-muted-foreground mt-0.5 line-clamp-2", children: section.description }))] }), _jsx("span", { className: `shrink-0 text-xs px-2 py-0.5 rounded-full ${CATEGORY_COLORS[section.category] ?? 'bg-muted text-muted-foreground'}`, children: section.category })] }), _jsxs("div", { className: "mt-3 flex items-center gap-4 text-xs text-muted-foreground", children: [_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Hash, { size: 12 }), section.usageCount, " use", section.usageCount !== 1 ? 's' : ''] }), _jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Calendar, { size: 12 }), formatDate(section.createdAt)] }), section.tree && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Layers, { size: 12 }), JSON.stringify(section.tree).length > 1000 ? 'Complex' : 'Simple'] }))] }), _jsxs("div", { className: "mt-3 flex items-center gap-1 border-t border-border pt-3", children: [_jsxs("button", { type: "button", onClick: () => setViewState({ mode: 'edit', section }), className: "flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-foreground rounded-md hover:bg-accent transition-colors", "aria-label": `Edit ${section.name}`, children: [_jsx(Edit, { size: 13 }), "Edit"] }), _jsxs("button", { type: "button", onClick: () => handleDuplicate(section), className: "flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-foreground rounded-md hover:bg-accent transition-colors", "aria-label": `Duplicate ${section.name}`, children: [_jsx(Copy, { size: 13 }), "Duplicate"] }), deleteConfirmId === section.id ? (_jsxs("div", { className: "ml-auto flex items-center gap-1", children: [_jsx("span", { className: "text-xs text-destructive mr-1", children: "Delete?" }), _jsx("button", { type: "button", onClick: () => handleDelete(section.id), className: "px-2 py-1 text-xs font-medium text-destructive-foreground bg-destructive rounded-md hover:bg-destructive/90 transition-colors", children: "Yes" }), _jsx("button", { type: "button", onClick: () => setDeleteConfirmId(null), className: "px-2 py-1 text-xs font-medium text-foreground border border-border rounded-md hover:bg-accent transition-colors", children: "No" })] })) : (_jsxs("button", { type: "button", onClick: () => setDeleteConfirmId(section.id), className: "ml-auto flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-destructive rounded-md hover:bg-destructive/10 transition-colors", "aria-label": `Delete ${section.name}`, children: [_jsx(Trash2, { size: 13 }), "Delete"] }))] })] }, section.id))) }))] }));
+                            : `No sections in the "${activeCategory}" category.` }), activeCategory === 'all' && (_jsxs("button", { type: "button", onClick: () => setViewState({ mode: 'create' }), className: "bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium transition-colors", children: [_jsx(Plus, { size: 14 }), "Create Section"] }))] })), !loading && !error && filteredSections.length > 0 && (_jsx("div", { className: "grid grid-cols-1 gap-3 lg:grid-cols-2", children: filteredSections.map((section) => (_jsxs("div", { className: "border-border bg-card hover:border-primary/50 rounded-lg border p-4 transition-colors", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-foreground truncate text-sm font-medium", children: section.name }), section.description && (_jsx("p", { className: "text-muted-foreground mt-0.5 line-clamp-2 text-xs", children: section.description }))] }), _jsx("span", { className: `shrink-0 rounded-full px-2 py-0.5 text-xs ${CATEGORY_COLORS[section.category] ?? 'bg-muted text-muted-foreground'}`, children: section.category })] }), _jsxs("div", { className: "text-muted-foreground mt-3 flex items-center gap-4 text-xs", children: [_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Hash, { size: 12 }), section.usageCount, " use", section.usageCount !== 1 ? 's' : ''] }), _jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Calendar, { size: 12 }), formatDate(section.createdAt)] }), section.tree && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Layers, { size: 12 }), JSON.stringify(section.tree).length > 1000 ? 'Complex' : 'Simple'] }))] }), _jsxs("div", { className: "border-border mt-3 flex items-center gap-1 border-t pt-3", children: [_jsxs("button", { type: "button", onClick: () => setViewState({ mode: 'edit', section }), className: "text-foreground hover:bg-accent flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors", "aria-label": `Edit ${section.name}`, children: [_jsx(Edit, { size: 13 }), "Edit"] }), _jsxs("button", { type: "button", onClick: () => handleDuplicate(section), className: "text-foreground hover:bg-accent flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors", "aria-label": `Duplicate ${section.name}`, children: [_jsx(Copy, { size: 13 }), "Duplicate"] }), deleteConfirmId === section.id ? (_jsxs("div", { className: "ml-auto flex items-center gap-1", children: [_jsx("span", { className: "text-destructive mr-1 text-xs", children: "Delete?" }), _jsx("button", { type: "button", onClick: () => handleDelete(section.id), className: "text-destructive-foreground bg-destructive hover:bg-destructive/90 rounded-md px-2 py-1 text-xs font-medium transition-colors", children: "Yes" }), _jsx("button", { type: "button", onClick: () => setDeleteConfirmId(null), className: "text-foreground border-border hover:bg-accent rounded-md border px-2 py-1 text-xs font-medium transition-colors", children: "No" })] })) : (_jsxs("button", { type: "button", onClick: () => setDeleteConfirmId(section.id), className: "text-destructive hover:bg-destructive/10 ml-auto flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors", "aria-label": `Delete ${section.name}`, children: [_jsx(Trash2, { size: 13 }), "Delete"] }))] })] }, section.id))) }))] }));
 }
 function CategoryTab({ label, active, onClick }) {
-    return (_jsx("button", { type: "button", onClick: onClick, className: `px-3 py-2 text-sm transition-colors border-b-2 -mb-px ${active
+    return (_jsx("button", { type: "button", onClick: onClick, className: `-mb-px border-b-2 px-3 py-2 text-sm transition-colors ${active
             ? 'border-primary text-foreground font-medium'
-            : 'border-transparent text-muted-foreground hover:text-foreground'}`, children: label }));
+            : 'text-muted-foreground hover:text-foreground border-transparent'}`, children: label }));
 }
 function SectionForm({ initial, saving, onSave, onCancel }) {
     const [name, setName] = useState(initial?.name ?? '');
@@ -136,6 +136,6 @@ function SectionForm({ initial, saving, onSave, onCancel }) {
         onSave({ name: name.trim(), description: description.trim(), category });
     }
     const treeSize = initial?.tree ? JSON.stringify(initial.tree).length : null;
-    return (_jsxs("div", { className: "p-4 pr-8", children: [_jsxs("div", { className: "mb-6", children: [_jsxs("button", { type: "button", onClick: onCancel, className: "flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors mb-3", "aria-label": "Back to saved sections", children: [_jsx(ArrowLeft, { size: 16 }), "Back"] }), _jsx("h1", { className: "text-2xl font-medium text-foreground", children: initial ? `Edit: ${initial.name}` : 'Create Saved Section' })] }), _jsxs("form", { onSubmit: handleSubmit, className: "max-w-lg space-y-4", children: [_jsxs("div", { children: [_jsxs("label", { htmlFor: "section-name", className: "block text-sm font-medium text-foreground mb-1", children: ["Name ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx("input", { id: "section-name", type: "text", value: name, onChange: (e) => setName(e.target.value), required: true, placeholder: "e.g. Hero Banner", className: "w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "section-description", className: "block text-sm font-medium text-foreground mb-1", children: "Description" }), _jsx("textarea", { id: "section-description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Optional description of this section...", rows: 3, className: "w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring resize-none" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "section-category", className: "block text-sm font-medium text-foreground mb-1", children: "Category" }), _jsx("select", { id: "section-category", value: category, onChange: (e) => setCategory(e.target.value), className: "w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring", children: CATEGORIES.map((cat) => (_jsx("option", { value: cat, children: cat.charAt(0).toUpperCase() + cat.slice(1) }, cat))) })] }), treeSize !== null && (_jsx("div", { className: "rounded-md border border-border bg-muted p-3", children: _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Section tree editing is available in the page builder. Current tree size:", ' ', (treeSize / 1024).toFixed(1), " KB"] }) })), _jsxs("div", { className: "flex items-center gap-3 pt-2", children: [_jsxs("button", { type: "submit", disabled: saving || !name.trim(), className: "flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed", children: [saving && _jsx(Loader2, { size: 14, className: "animate-spin" }), initial ? 'Save Changes' : 'Create Section'] }), _jsx("button", { type: "button", onClick: onCancel, disabled: saving, className: "px-4 py-2 text-sm font-medium text-foreground border border-border rounded-lg hover:bg-accent transition-colors disabled:opacity-50", children: "Cancel" })] })] })] }));
+    return (_jsxs("div", { className: "p-4 pr-8", children: [_jsxs("div", { className: "mb-6", children: [_jsxs("button", { type: "button", onClick: onCancel, className: "text-muted-foreground hover:text-foreground mb-3 flex items-center gap-1.5 text-sm transition-colors", "aria-label": "Back to saved sections", children: [_jsx(ArrowLeft, { size: 16 }), "Back"] }), _jsx("h1", { className: "text-foreground text-2xl font-medium", children: initial ? `Edit: ${initial.name}` : 'Create Saved Section' })] }), _jsxs("form", { onSubmit: handleSubmit, className: "max-w-lg space-y-4", children: [_jsxs("div", { children: [_jsxs("label", { htmlFor: "section-name", className: "text-foreground mb-1 block text-sm font-medium", children: ["Name ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx("input", { id: "section-name", type: "text", value: name, onChange: (e) => setName(e.target.value), required: true, placeholder: "e.g. Hero Banner", className: "bg-background border-input focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "section-description", className: "text-foreground mb-1 block text-sm font-medium", children: "Description" }), _jsx("textarea", { id: "section-description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Optional description of this section...", rows: 3, className: "bg-background border-input focus:ring-ring w-full resize-none rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "section-category", className: "text-foreground mb-1 block text-sm font-medium", children: "Category" }), _jsx("select", { id: "section-category", value: category, onChange: (e) => setCategory(e.target.value), className: "bg-background border-input focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none", children: CATEGORIES.map((cat) => (_jsx("option", { value: cat, children: cat.charAt(0).toUpperCase() + cat.slice(1) }, cat))) })] }), treeSize !== null && (_jsx("div", { className: "border-border bg-muted rounded-md border p-3", children: _jsxs("p", { className: "text-muted-foreground text-xs", children: ["Section tree editing is available in the page builder. Current tree size:", ' ', (treeSize / 1024).toFixed(1), " KB"] }) })), _jsxs("div", { className: "flex items-center gap-3 pt-2", children: [_jsxs("button", { type: "submit", disabled: saving || !name.trim(), className: "bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50", children: [saving && _jsx(Loader2, { size: 14, className: "animate-spin" }), initial ? 'Save Changes' : 'Create Section'] }), _jsx("button", { type: "button", onClick: onCancel, disabled: saving, className: "text-foreground border-border hover:bg-accent rounded-lg border px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50", children: "Cancel" })] })] })] }));
 }
 //# sourceMappingURL=SavedSections.js.map

package/dist/views/page-builder/TemplatePicker.js

@@ -59,10 +59,10 @@ export function TemplatePicker({ onSelect, onClose }) {
         onSelect(template.tree);
         onClose();
     }
-    return (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", role: "dialog", "aria-modal": "true", "aria-label": "Choose a template", children: [_jsx("div", { className: "absolute inset-0 bg-black/50 motion-safe:animate-in motion-safe:fade-in-0", onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { className: "relative z-10 w-full max-w-2xl max-h-[80vh] bg-card rounded-xl shadow-2xl border border-border flex flex-col overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between px-5 pt-5 pb-3", children: [_jsx("h2", { className: "text-lg font-medium text-foreground", children: "Choose a Template" }), _jsx("button", { type: "button", onClick: onClose, className: "p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors", "aria-label": "Close", children: _jsx(X, { size: 18 }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto px-5 pb-5", children: [loading && (_jsx("div", { className: "flex items-center justify-center py-16", children: _jsx(Loader2, { className: "w-6 h-6 animate-spin text-muted-foreground" }) })), error && !loading && (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx(AlertTriangle, { size: 24, className: "text-destructive mb-2" }), _jsx("p", { className: "text-sm text-muted-foreground mb-3", children: error }), _jsx("button", { type: "button", onClick: fetchTemplates, className: "px-3 py-1.5 text-sm font-medium text-foreground border border-border rounded-md hover:bg-accent transition-colors", children: "Retry" })] })), !loading && !error && (_jsxs("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-3", role: "list", "aria-label": "Available templates", children: [_jsxs("button", { type: "button", role: "listitem", onClick: handleBlankPage, className: "p-4 border border-border rounded-lg hover:border-primary cursor-pointer transition-colors bg-card text-left flex flex-col items-center gap-2 group focus:outline-none focus:ring-2 focus:ring-ring", children: [_jsx("div", { className: "w-10 h-10 rounded-md bg-muted flex items-center justify-center text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary transition-colors", children: _jsx(File, { size: 20 }) }), _jsx("p", { className: "text-sm font-medium text-foreground text-center", children: "Blank Page" }), _jsx("p", { className: "text-xs text-muted-foreground text-center", children: "Start from scratch" })] }), templates.map((template) => {
+    return (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", role: "dialog", "aria-modal": "true", "aria-label": "Choose a template", children: [_jsx("div", { className: "motion-safe:animate-in motion-safe:fade-in-0 absolute inset-0 bg-black/50", onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { className: "bg-card border-border relative z-10 flex max-h-[80vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl border shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between px-5 pt-5 pb-3", children: [_jsx("h2", { className: "text-foreground text-lg font-medium", children: "Choose a Template" }), _jsx("button", { type: "button", onClick: onClose, className: "text-muted-foreground hover:text-foreground hover:bg-accent rounded-md p-1.5 transition-colors", "aria-label": "Close", children: _jsx(X, { size: 18 }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto px-5 pb-5", children: [loading && (_jsx("div", { className: "flex items-center justify-center py-16", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) })), error && !loading && (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx(AlertTriangle, { size: 24, className: "text-destructive mb-2" }), _jsx("p", { className: "text-muted-foreground mb-3 text-sm", children: error }), _jsx("button", { type: "button", onClick: fetchTemplates, className: "text-foreground border-border hover:bg-accent rounded-md border px-3 py-1.5 text-sm font-medium transition-colors", children: "Retry" })] })), !loading && !error && (_jsxs("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-3", role: "list", "aria-label": "Available templates", children: [_jsxs("button", { type: "button", role: "listitem", onClick: handleBlankPage, className: "border-border hover:border-primary bg-card group focus:ring-ring flex cursor-pointer flex-col items-center gap-2 rounded-lg border p-4 text-left transition-colors focus:ring-2 focus:outline-none", children: [_jsx("div", { className: "bg-muted text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary flex h-10 w-10 items-center justify-center rounded-md transition-colors", children: _jsx(File, { size: 20 }) }), _jsx("p", { className: "text-foreground text-center text-sm font-medium", children: "Blank Page" }), _jsx("p", { className: "text-muted-foreground text-center text-xs", children: "Start from scratch" })] }), templates.map((template) => {
                                         const Icon = resolveIcon(template.category);
                                         const badgeColor = resolveBadgeColor(template.category);
-                                        return (_jsxs("button", { type: "button", role: "listitem", onClick: () => handleTemplateSelect(template), className: "p-4 border border-border rounded-lg hover:border-primary cursor-pointer transition-colors bg-card text-left flex flex-col items-center gap-2 group focus:outline-none focus:ring-2 focus:ring-ring", children: [_jsx("div", { className: "w-10 h-10 rounded-md bg-accent flex items-center justify-center text-foreground group-hover:bg-primary/10 group-hover:text-primary transition-colors", children: _jsx(Icon, { size: 20 }) }), _jsx("p", { className: "text-sm font-medium text-foreground text-center truncate w-full", children: template.name }), template.description && (_jsx("p", { className: "text-xs text-muted-foreground text-center line-clamp-2", children: template.description })), _jsx("span", { className: `inline-block text-xs px-2 py-0.5 rounded-full ${badgeColor}`, children: template.category })] }, template.id));
+                                        return (_jsxs("button", { type: "button", role: "listitem", onClick: () => handleTemplateSelect(template), className: "border-border hover:border-primary bg-card group focus:ring-ring flex cursor-pointer flex-col items-center gap-2 rounded-lg border p-4 text-left transition-colors focus:ring-2 focus:outline-none", children: [_jsx("div", { className: "bg-accent text-foreground group-hover:bg-primary/10 group-hover:text-primary flex h-10 w-10 items-center justify-center rounded-md transition-colors", children: _jsx(Icon, { size: 20 }) }), _jsx("p", { className: "text-foreground w-full truncate text-center text-sm font-medium", children: template.name }), template.description && (_jsx("p", { className: "text-muted-foreground line-clamp-2 text-center text-xs", children: template.description })), _jsx("span", { className: `inline-block rounded-full px-2 py-0.5 text-xs ${badgeColor}`, children: template.category })] }, template.id));
                                     })] }))] })] })] }));
 }
 //# sourceMappingURL=TemplatePicker.js.map

package/dist/views/page-builder/block-renderers/CTAPreview.js

@@ -4,16 +4,16 @@ export function CTAPreview({ data, variant = 'banner' }) {
     const heading = data.heading || '';
     const body = data.body || '';
     const buttonText = data.buttonText || '';
-    const button = (_jsx("span", { className: "inline-block rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground", children: buttonText || 'Click Here' }));
+    const button = (_jsx("span", { className: "bg-primary text-primary-foreground inline-block rounded-md px-4 py-2 text-sm", children: buttonText || 'Click Here' }));
     if (variant === 'inline') {
-        return (_jsxs("div", { className: "flex items-center justify-between gap-4 rounded-md border border-border p-4", children: [_jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: heading || _jsx("span", { className: "text-muted-foreground", children: "CTA Heading" }) }), body && _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: body })] }), button] }));
+        return (_jsxs("div", { className: "border-border flex items-center justify-between gap-4 rounded-md border p-4", children: [_jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: heading || _jsx("span", { className: "text-muted-foreground", children: "CTA Heading" }) }), body && _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: body })] }), button] }));
     }
     if (variant === 'floating') {
-        return (_jsx("div", { className: "mx-auto max-w-md rounded-lg border border-border bg-card p-6 shadow-md", children: _jsxs("div", { className: "text-center", children: [_jsx("h3", { className: "text-lg font-medium text-foreground", children: heading || _jsx("span", { className: "text-muted-foreground", children: "CTA Heading" }) }), (body || !heading) && (_jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: body || 'Supporting text for the call to action' })), _jsx("div", { className: "mt-4", children: button })] }) }));
+        return (_jsx("div", { className: "border-border bg-card mx-auto max-w-md rounded-lg border p-6 shadow-md", children: _jsxs("div", { className: "text-center", children: [_jsx("h3", { className: "text-foreground text-lg font-medium", children: heading || _jsx("span", { className: "text-muted-foreground", children: "CTA Heading" }) }), (body || !heading) && (_jsx("p", { className: "text-muted-foreground mt-2 text-sm", children: body || 'Supporting text for the call to action' })), _jsx("div", { className: "mt-4", children: button })] }) }));
     }
     if (variant === 'split') {
-        return (_jsxs("div", { className: "flex items-center gap-6 rounded-md border border-border p-6", children: [_jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "text-lg font-medium text-foreground", children: heading || _jsx("span", { className: "text-muted-foreground", children: "CTA Heading" }) }), (body || !heading) && (_jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: body || 'Supporting text for the call to action' }))] }), _jsx("div", { className: "shrink-0", children: button })] }));
+        return (_jsxs("div", { className: "border-border flex items-center gap-6 rounded-md border p-6", children: [_jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "text-foreground text-lg font-medium", children: heading || _jsx("span", { className: "text-muted-foreground", children: "CTA Heading" }) }), (body || !heading) && (_jsx("p", { className: "text-muted-foreground mt-2 text-sm", children: body || 'Supporting text for the call to action' }))] }), _jsx("div", { className: "shrink-0", children: button })] }));
     }
-    return (_jsxs("div", { className: "rounded-md border border-border bg-accent p-6 text-center", children: [_jsx("h3", { className: "text-lg font-medium text-foreground", children: heading || _jsx("span", { className: "text-muted-foreground", children: "CTA Heading" }) }), (body || !heading) && (_jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: body || 'Supporting text for the call to action' })), _jsx("div", { className: "mt-4", children: button })] }));
+    return (_jsxs("div", { className: "border-border bg-accent rounded-md border p-6 text-center", children: [_jsx("h3", { className: "text-foreground text-lg font-medium", children: heading || _jsx("span", { className: "text-muted-foreground", children: "CTA Heading" }) }), (body || !heading) && (_jsx("p", { className: "text-muted-foreground mt-2 text-sm", children: body || 'Supporting text for the call to action' })), _jsx("div", { className: "mt-4", children: button })] }));
 }
 //# sourceMappingURL=CTAPreview.js.map

package/dist/views/page-builder/block-renderers/CardsPreview.js

@@ -17,6 +17,6 @@ export function CardsPreview({ data, variant = 'grid-3' }) {
             : variant === 'horizontal'
                 ? 'flex gap-3 overflow-hidden'
                 : 'grid grid-cols-3 gap-3';
-    return (_jsx("div", { className: "rounded-md border border-border p-4", children: _jsx("div", { className: gridClass, children: placeholderItems.map((item, i) => (_jsxs("div", { className: `flex flex-col overflow-hidden rounded-md border border-border bg-card ${variant === 'horizontal' ? 'min-w-40' : ''}`, children: [_jsx("div", { className: "flex h-20 items-center justify-center bg-muted", children: item.image ? (_jsx("img", { src: item.image, alt: item.title || '', className: "h-full w-full object-cover" })) : (_jsx(Image, { size: 20, className: "text-muted-foreground" })) }), _jsxs("div", { className: "p-3", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: item.title || _jsx("span", { className: "text-muted-foreground", children: "Card Title" }) }), item.description && (_jsx("p", { className: "mt-1 text-xs text-muted-foreground line-clamp-2", children: item.description }))] })] }, i))) }) }));
+    return (_jsx("div", { className: "border-border rounded-md border p-4", children: _jsx("div", { className: gridClass, children: placeholderItems.map((item, i) => (_jsxs("div", { className: `border-border bg-card flex flex-col overflow-hidden rounded-md border ${variant === 'horizontal' ? 'min-w-40' : ''}`, children: [_jsx("div", { className: "bg-muted flex h-20 items-center justify-center", children: item.image ? (_jsx("img", { src: item.image, alt: item.title || '', className: "h-full w-full object-cover" })) : (_jsx(Image, { size: 20, className: "text-muted-foreground" })) }), _jsxs("div", { className: "p-3", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: item.title || _jsx("span", { className: "text-muted-foreground", children: "Card Title" }) }), item.description && (_jsx("p", { className: "text-muted-foreground mt-1 line-clamp-2 text-xs", children: item.description }))] })] }, i))) }) }));
 }
 //# sourceMappingURL=CardsPreview.js.map

package/dist/views/page-builder/block-renderers/CodePreview.js

@@ -7,6 +7,6 @@ export function CodePreview({ data, variant = 'embed' }) {
     const sandboxed = data.sandboxed;
     const truncated = content.length > 200 ? content.slice(0, 200) + '…' : content;
     const icon = variant === 'html' ? (_jsx(Globe, { size: 14, className: "text-muted-foreground" })) : variant === 'script' ? (_jsx(Terminal, { size: 14, className: "text-muted-foreground" })) : (_jsx(Code, { size: 14, className: "text-muted-foreground" }));
-    return (_jsxs("div", { className: "overflow-hidden rounded-md border border-border", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border bg-card px-3 py-2", children: [icon, _jsx("span", { className: "text-xs text-muted-foreground", children: language || variant }), sandboxed && (_jsx("span", { className: "ml-auto rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground", children: "sandboxed" }))] }), _jsx("div", { className: "bg-card p-4", children: truncated ? (_jsx("pre", { className: "overflow-hidden whitespace-pre-wrap font-mono text-xs text-foreground", children: truncated })) : (_jsx("p", { className: "font-mono text-xs text-muted-foreground italic", children: "// Code content goes here\u2026" })) })] }));
+    return (_jsxs("div", { className: "border-border overflow-hidden rounded-md border", children: [_jsxs("div", { className: "border-border bg-card flex items-center gap-2 border-b px-3 py-2", children: [icon, _jsx("span", { className: "text-muted-foreground text-xs", children: language || variant }), sandboxed && (_jsx("span", { className: "bg-muted text-muted-foreground ml-auto rounded px-1.5 py-0.5 text-xs", children: "sandboxed" }))] }), _jsx("div", { className: "bg-card p-4", children: truncated ? (_jsx("pre", { className: "text-foreground overflow-hidden font-mono text-xs whitespace-pre-wrap", children: truncated })) : (_jsx("p", { className: "text-muted-foreground font-mono text-xs italic", children: "// Code content goes here\u2026" })) })] }));
 }
 //# sourceMappingURL=CodePreview.js.map

package/dist/views/page-builder/block-renderers/FAQPreview.js

@@ -17,11 +17,11 @@ export function FAQPreview({ data, variant = 'accordion' }) {
         const mid = Math.ceil(placeholderItems.length / 2);
         const col1 = placeholderItems.slice(0, mid);
         const col2 = placeholderItems.slice(mid);
-        return (_jsx("div", { className: "rounded-md border border-border p-4", children: _jsx("div", { className: "grid grid-cols-2 gap-4", children: [col1, col2].map((column, colIdx) => (_jsx("div", { className: "flex flex-col gap-3", children: column.map((item, i) => (_jsxs("div", { className: "rounded-md border border-border p-3", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: item.question || 'Question?' }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground line-clamp-2", children: item.answer || 'Answer text…' })] }, i))) }, colIdx))) }) }));
+        return (_jsx("div", { className: "border-border rounded-md border p-4", children: _jsx("div", { className: "grid grid-cols-2 gap-4", children: [col1, col2].map((column, colIdx) => (_jsx("div", { className: "flex flex-col gap-3", children: column.map((item, i) => (_jsxs("div", { className: "border-border rounded-md border p-3", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: item.question || 'Question?' }), _jsx("p", { className: "text-muted-foreground mt-1 line-clamp-2 text-xs", children: item.answer || 'Answer text…' })] }, i))) }, colIdx))) }) }));
     }
     if (variant === 'list') {
-        return (_jsx("div", { className: "rounded-md border border-border p-4", children: _jsx("div", { className: "flex flex-col gap-3", children: placeholderItems.map((item, i) => (_jsxs("div", { className: "border-b border-border pb-3 last:border-b-0 last:pb-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: item.question || 'Question?' }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground line-clamp-2", children: item.answer || 'Answer text…' })] }, i))) }) }));
+        return (_jsx("div", { className: "border-border rounded-md border p-4", children: _jsx("div", { className: "flex flex-col gap-3", children: placeholderItems.map((item, i) => (_jsxs("div", { className: "border-border border-b pb-3 last:border-b-0 last:pb-0", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: item.question || 'Question?' }), _jsx("p", { className: "text-muted-foreground mt-1 line-clamp-2 text-xs", children: item.answer || 'Answer text…' })] }, i))) }) }));
     }
-    return (_jsx("div", { className: "rounded-md border border-border p-4", children: _jsx("div", { className: "flex flex-col gap-2", children: placeholderItems.map((item, i) => (_jsxs("div", { className: "rounded-md border border-border p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: item.question || 'Question?' }), _jsx(ChevronDown, { size: 14, className: "shrink-0 text-muted-foreground" })] }), i === 0 && (_jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: item.answer || 'Answer text…' }))] }, i))) }) }));
+    return (_jsx("div", { className: "border-border rounded-md border p-4", children: _jsx("div", { className: "flex flex-col gap-2", children: placeholderItems.map((item, i) => (_jsxs("div", { className: "border-border rounded-md border p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: item.question || 'Question?' }), _jsx(ChevronDown, { size: 14, className: "text-muted-foreground shrink-0" })] }), i === 0 && (_jsx("p", { className: "text-muted-foreground mt-2 text-xs", children: item.answer || 'Answer text…' }))] }, i))) }) }));
 }
 //# sourceMappingURL=FAQPreview.js.map

package/dist/views/page-builder/block-renderers/FallbackPreview.js

@@ -2,6 +2,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from 'lucide-react';
 export function FallbackPreview({ blockType }) {
-    return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 rounded-md border border-dashed border-border bg-muted/50 p-8", children: [_jsx(Box, { size: 24, className: "text-muted-foreground" }), _jsx("p", { className: "text-sm font-medium text-muted-foreground", children: blockType }), _jsx("p", { className: "text-xs text-muted-foreground", children: "No preview available" })] }));
+    return (_jsxs("div", { className: "border-border bg-muted/50 flex flex-col items-center justify-center gap-2 rounded-md border border-dashed p-8", children: [_jsx(Box, { size: 24, className: "text-muted-foreground" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: blockType }), _jsx("p", { className: "text-muted-foreground text-xs", children: "No preview available" })] }));
 }
 //# sourceMappingURL=FallbackPreview.js.map

package/dist/views/page-builder/block-renderers/FormPreview.js

@@ -4,11 +4,11 @@ import { FileText, Mail, Send } from 'lucide-react';
 export function FormPreview({ data, variant = 'contact' }) {
     const formId = data.formId || '';
     if (variant === 'newsletter') {
-        return (_jsxs("div", { className: "rounded-md border border-border p-6 text-center", children: [_jsx(Mail, { size: 24, className: "mx-auto text-muted-foreground" }), _jsx("p", { className: "mt-3 text-sm font-medium text-foreground", children: "Newsletter Signup" }), formId && _jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: ["Form: ", formId] }), _jsxs("div", { className: "mx-auto mt-4 flex max-w-xs gap-2", children: [_jsx("div", { className: "h-9 flex-1 rounded-md border border-border bg-input-background" }), _jsx("div", { className: "flex h-9 items-center rounded-md bg-primary px-3", children: _jsx(Send, { size: 14, className: "text-primary-foreground" }) })] })] }));
+        return (_jsxs("div", { className: "border-border rounded-md border p-6 text-center", children: [_jsx(Mail, { size: 24, className: "text-muted-foreground mx-auto" }), _jsx("p", { className: "text-foreground mt-3 text-sm font-medium", children: "Newsletter Signup" }), formId && _jsxs("p", { className: "text-muted-foreground mt-1 text-xs", children: ["Form: ", formId] }), _jsxs("div", { className: "mx-auto mt-4 flex max-w-xs gap-2", children: [_jsx("div", { className: "border-border bg-input-background h-9 flex-1 rounded-md border" }), _jsx("div", { className: "bg-primary flex h-9 items-center rounded-md px-3", children: _jsx(Send, { size: 14, className: "text-primary-foreground" }) })] })] }));
     }
     if (variant === 'custom') {
-        return (_jsxs("div", { className: "rounded-md border border-border p-5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FileText, { size: 16, className: "text-muted-foreground" }), _jsx("p", { className: "text-sm font-medium text-foreground", children: formId ? `Form: ${formId}` : 'Custom Form' })] }), _jsxs("div", { className: "mt-3 flex flex-col gap-2", children: [_jsx("div", { className: "h-8 rounded-md border border-border bg-input-background" }), _jsx("div", { className: "h-8 rounded-md border border-border bg-input-background" }), _jsx("div", { className: "h-20 rounded-md border border-border bg-input-background" })] }), _jsx("div", { className: "mt-3", children: _jsx("span", { className: "inline-block rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground", children: "Submit" }) })] }));
+        return (_jsxs("div", { className: "border-border rounded-md border p-5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FileText, { size: 16, className: "text-muted-foreground" }), _jsx("p", { className: "text-foreground text-sm font-medium", children: formId ? `Form: ${formId}` : 'Custom Form' })] }), _jsxs("div", { className: "mt-3 flex flex-col gap-2", children: [_jsx("div", { className: "border-border bg-input-background h-8 rounded-md border" }), _jsx("div", { className: "border-border bg-input-background h-8 rounded-md border" }), _jsx("div", { className: "border-border bg-input-background h-20 rounded-md border" })] }), _jsx("div", { className: "mt-3", children: _jsx("span", { className: "bg-primary text-primary-foreground inline-block rounded-md px-4 py-2 text-sm", children: "Submit" }) })] }));
     }
-    return (_jsxs("div", { className: "rounded-md border border-border p-5", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Contact Form" }), formId && _jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: ["Form: ", formId] }), _jsxs("div", { className: "mt-3 grid grid-cols-2 gap-2", children: [_jsx("div", { className: "h-8 rounded-md border border-border bg-input-background" }), _jsx("div", { className: "h-8 rounded-md border border-border bg-input-background" })] }), _jsx("div", { className: "mt-2 h-8 rounded-md border border-border bg-input-background" }), _jsx("div", { className: "mt-2 h-20 rounded-md border border-border bg-input-background" }), _jsx("div", { className: "mt-3", children: _jsx("span", { className: "inline-block rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground", children: "Send Message" }) })] }));
+    return (_jsxs("div", { className: "border-border rounded-md border p-5", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: "Contact Form" }), formId && _jsxs("p", { className: "text-muted-foreground mt-1 text-xs", children: ["Form: ", formId] }), _jsxs("div", { className: "mt-3 grid grid-cols-2 gap-2", children: [_jsx("div", { className: "border-border bg-input-background h-8 rounded-md border" }), _jsx("div", { className: "border-border bg-input-background h-8 rounded-md border" })] }), _jsx("div", { className: "border-border bg-input-background mt-2 h-8 rounded-md border" }), _jsx("div", { className: "border-border bg-input-background mt-2 h-20 rounded-md border" }), _jsx("div", { className: "mt-3", children: _jsx("span", { className: "bg-primary text-primary-foreground inline-block rounded-md px-4 py-2 text-sm", children: "Send Message" }) })] }));
 }
 //# sourceMappingURL=FormPreview.js.map

package/dist/views/page-builder/block-renderers/GalleryPreview.js

@@ -4,16 +4,16 @@ import { Image } from 'lucide-react';
 export function GalleryPreview({ data, variant = 'grid' }) {
     const images = data.images || [];
     const placeholders = images.length > 0 ? images : Array.from({ length: 6 }, (_, i) => ({ alt: `Image ${i + 1}` }));
-    const Thumbnail = ({ item, className = '' }) => (_jsx("div", { className: `flex items-center justify-center overflow-hidden rounded-md bg-muted ${className}`, children: item.src ? (_jsx("img", { src: item.src, alt: item.alt || '', className: "h-full w-full object-cover" })) : (_jsx(Image, { size: 20, className: "text-muted-foreground" })) }));
+    const Thumbnail = ({ item, className = '' }) => (_jsx("div", { className: `bg-muted flex items-center justify-center overflow-hidden rounded-md ${className}`, children: item.src ? (_jsx("img", { src: item.src, alt: item.alt || '', className: "h-full w-full object-cover" })) : (_jsx(Image, { size: 20, className: "text-muted-foreground" })) }));
     if (variant === 'masonry') {
-        return (_jsx("div", { className: "rounded-md border border-border p-4", children: _jsx("div", { className: "columns-3 gap-3 space-y-3", children: placeholders.map((item, i) => (_jsx(Thumbnail, { item: item, className: i % 3 === 0 ? 'aspect-square' : i % 3 === 1 ? 'aspect-[3/4]' : 'aspect-[4/3]' }, i))) }) }));
+        return (_jsx("div", { className: "border-border rounded-md border p-4", children: _jsx("div", { className: "columns-3 gap-3 space-y-3", children: placeholders.map((item, i) => (_jsx(Thumbnail, { item: item, className: i % 3 === 0 ? 'aspect-square' : i % 3 === 1 ? 'aspect-[3/4]' : 'aspect-[4/3]' }, i))) }) }));
     }
     if (variant === 'carousel') {
-        return (_jsx("div", { className: "overflow-hidden rounded-md border border-border p-4", children: _jsxs("div", { className: "flex gap-3 overflow-hidden", children: [placeholders.slice(0, 4).map((item, i) => (_jsx(Thumbnail, { item: item, className: "aspect-square min-w-[120px] flex-1" }, i))), placeholders.length > 4 && (_jsx("div", { className: "flex min-w-[120px] flex-1 items-center justify-center rounded-md bg-muted", children: _jsxs("span", { className: "text-sm text-muted-foreground", children: ["+", placeholders.length - 4] }) }))] }) }));
+        return (_jsx("div", { className: "border-border overflow-hidden rounded-md border p-4", children: _jsxs("div", { className: "flex gap-3 overflow-hidden", children: [placeholders.slice(0, 4).map((item, i) => (_jsx(Thumbnail, { item: item, className: "aspect-square min-w-[120px] flex-1" }, i))), placeholders.length > 4 && (_jsx("div", { className: "bg-muted flex min-w-[120px] flex-1 items-center justify-center rounded-md", children: _jsxs("span", { className: "text-muted-foreground text-sm", children: ["+", placeholders.length - 4] }) }))] }) }));
     }
     if (variant === 'lightbox') {
-        return (_jsxs("div", { className: "rounded-md border border-border p-4", children: [_jsx("div", { className: "grid grid-cols-3 gap-3", children: placeholders.map((item, i) => (_jsx(Thumbnail, { item: item, className: "aspect-square" }, i))) }), _jsx("p", { className: "mt-2 text-center text-xs text-muted-foreground", children: "Click to open lightbox" })] }));
+        return (_jsxs("div", { className: "border-border rounded-md border p-4", children: [_jsx("div", { className: "grid grid-cols-3 gap-3", children: placeholders.map((item, i) => (_jsx(Thumbnail, { item: item, className: "aspect-square" }, i))) }), _jsx("p", { className: "text-muted-foreground mt-2 text-center text-xs", children: "Click to open lightbox" })] }));
     }
-    return (_jsx("div", { className: "rounded-md border border-border p-4", children: _jsx("div", { className: "grid grid-cols-3 gap-3", children: placeholders.map((item, i) => (_jsx(Thumbnail, { item: item, className: "aspect-square" }, i))) }) }));
+    return (_jsx("div", { className: "border-border rounded-md border p-4", children: _jsx("div", { className: "grid grid-cols-3 gap-3", children: placeholders.map((item, i) => (_jsx(Thumbnail, { item: item, className: "aspect-square" }, i))) }) }));
 }
 //# sourceMappingURL=GalleryPreview.js.map

package/dist/views/page-builder/block-renderers/HeroPreview.js

@@ -8,12 +8,12 @@ export function HeroPreview({ data, variant = 'centered' }) {
     const ctaText = data.ctaText || '';
     const overlayOpacity = data.overlayOpacity ?? 0.4;
     if (variant === 'split-image') {
-        return (_jsxs("div", { className: "flex min-h-[200px] overflow-hidden rounded-md border border-border", children: [_jsxs("div", { className: "flex flex-1 flex-col justify-center gap-3 p-6", children: [_jsx("h2", { className: "text-2xl font-medium text-foreground", children: title || _jsx("span", { className: "text-muted-foreground", children: "Hero Title" }) }), (subtitle || !title) && (_jsx("p", { className: "text-sm text-muted-foreground", children: subtitle || 'Subtitle text goes here' })), ctaText && (_jsx("div", { className: "mt-2", children: _jsx("span", { className: "inline-block rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground", children: ctaText }) }))] }), _jsx("div", { className: "flex flex-1 items-center justify-center bg-muted", children: image ? (_jsx("img", { src: image, alt: "", className: "h-full w-full object-cover" })) : (_jsx(Image, { size: 32, className: "text-muted-foreground" })) })] }));
+        return (_jsxs("div", { className: "border-border flex min-h-[200px] overflow-hidden rounded-md border", children: [_jsxs("div", { className: "flex flex-1 flex-col justify-center gap-3 p-6", children: [_jsx("h2", { className: "text-foreground text-2xl font-medium", children: title || _jsx("span", { className: "text-muted-foreground", children: "Hero Title" }) }), (subtitle || !title) && (_jsx("p", { className: "text-muted-foreground text-sm", children: subtitle || 'Subtitle text goes here' })), ctaText && (_jsx("div", { className: "mt-2", children: _jsx("span", { className: "bg-primary text-primary-foreground inline-block rounded-md px-4 py-2 text-sm", children: ctaText }) }))] }), _jsx("div", { className: "bg-muted flex flex-1 items-center justify-center", children: image ? (_jsx("img", { src: image, alt: "", className: "h-full w-full object-cover" })) : (_jsx(Image, { size: 32, className: "text-muted-foreground" })) })] }));
     }
     if (variant === 'minimal') {
-        return (_jsxs("div", { className: "flex flex-col items-center gap-3 rounded-md border border-border p-8", children: [_jsx("h2", { className: "text-2xl font-medium text-foreground", children: title || _jsx("span", { className: "text-muted-foreground", children: "Hero Title" }) }), (subtitle || !title) && (_jsx("p", { className: "text-sm text-muted-foreground", children: subtitle || 'Subtitle text goes here' })), ctaText && (_jsx("span", { className: "mt-2 inline-block rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground", children: ctaText }))] }));
+        return (_jsxs("div", { className: "border-border flex flex-col items-center gap-3 rounded-md border p-8", children: [_jsx("h2", { className: "text-foreground text-2xl font-medium", children: title || _jsx("span", { className: "text-muted-foreground", children: "Hero Title" }) }), (subtitle || !title) && (_jsx("p", { className: "text-muted-foreground text-sm", children: subtitle || 'Subtitle text goes here' })), ctaText && (_jsx("span", { className: "bg-primary text-primary-foreground mt-2 inline-block rounded-md px-4 py-2 text-sm", children: ctaText }))] }));
     }
     const isVideo = variant === 'video-bg';
-    return (_jsxs("div", { className: "relative flex min-h-[220px] flex-col items-center justify-center gap-3 overflow-hidden rounded-md border border-border p-8", children: [image ? (_jsx("img", { src: image, alt: "", className: "absolute inset-0 h-full w-full object-cover" })) : (_jsx("div", { className: "absolute inset-0 bg-muted" })), _jsx("div", { className: "absolute inset-0 bg-background", style: { opacity: overlayOpacity } }), _jsxs("div", { className: "relative z-10 flex flex-col items-center gap-3 text-center", children: [isVideo && (_jsx("div", { className: "mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-primary/90", children: _jsx(Play, { size: 20, className: "text-primary-foreground" }) })), _jsx("h2", { className: "text-2xl font-medium text-foreground", children: title || _jsx("span", { className: "text-muted-foreground", children: "Hero Title" }) }), (subtitle || !title) && (_jsx("p", { className: "text-sm text-muted-foreground", children: subtitle || 'Subtitle text goes here' })), ctaText && (_jsx("span", { className: "mt-2 inline-block rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground", children: ctaText }))] })] }));
+    return (_jsxs("div", { className: "border-border relative flex min-h-[220px] flex-col items-center justify-center gap-3 overflow-hidden rounded-md border p-8", children: [image ? (_jsx("img", { src: image, alt: "", className: "absolute inset-0 h-full w-full object-cover" })) : (_jsx("div", { className: "bg-muted absolute inset-0" })), _jsx("div", { className: "bg-background absolute inset-0", style: { opacity: overlayOpacity } }), _jsxs("div", { className: "relative z-10 flex flex-col items-center gap-3 text-center", children: [isVideo && (_jsx("div", { className: "bg-primary/90 mb-2 flex h-12 w-12 items-center justify-center rounded-full", children: _jsx(Play, { size: 20, className: "text-primary-foreground" }) })), _jsx("h2", { className: "text-foreground text-2xl font-medium", children: title || _jsx("span", { className: "text-muted-foreground", children: "Hero Title" }) }), (subtitle || !title) && (_jsx("p", { className: "text-muted-foreground text-sm", children: subtitle || 'Subtitle text goes here' })), ctaText && (_jsx("span", { className: "bg-primary text-primary-foreground mt-2 inline-block rounded-md px-4 py-2 text-sm", children: ctaText }))] })] }));
 }
 //# sourceMappingURL=HeroPreview.js.map

package/dist/views/page-builder/block-renderers/ImagePreview.js

@@ -7,11 +7,11 @@ export function ImagePreview({ data, variant = 'full-width' }) {
     const caption = data.caption || '';
     const aspectRatio = data.aspectRatio || '16/9';
     const roundedClass = variant === 'rounded' ? 'rounded-xl' : 'rounded-md';
-    const ImagePlaceholder = ({ className = '' }) => (_jsx("div", { className: `flex items-center justify-center bg-muted ${roundedClass} ${className}`, style: { aspectRatio }, children: _jsx(Image, { size: 32, className: "text-muted-foreground" }) }));
+    const ImagePlaceholder = ({ className = '' }) => (_jsx("div", { className: `bg-muted flex items-center justify-center ${roundedClass} ${className}`, style: { aspectRatio }, children: _jsx(Image, { size: 32, className: "text-muted-foreground" }) }));
     const ImageElement = ({ className = '' }) => src ? (_jsx("img", { src: src, alt: alt, className: `h-auto w-full object-cover ${roundedClass} ${className}`, style: { aspectRatio } })) : (_jsx(ImagePlaceholder, { className: className }));
     if (variant === 'side-by-side') {
-        return (_jsxs("div", { className: "grid grid-cols-2 gap-3 rounded-md border border-border p-4", children: [_jsx(ImageElement, {}), _jsx(ImagePlaceholder, {})] }));
+        return (_jsxs("div", { className: "border-border grid grid-cols-2 gap-3 rounded-md border p-4", children: [_jsx(ImageElement, {}), _jsx(ImagePlaceholder, {})] }));
     }
-    return (_jsxs("figure", { className: "overflow-hidden rounded-md border border-border p-4", children: [_jsx(ImageElement, {}), (variant === 'captioned' || caption) && (_jsx("figcaption", { className: "mt-2 text-center text-sm text-muted-foreground", children: caption || 'Image caption' }))] }));
+    return (_jsxs("figure", { className: "border-border overflow-hidden rounded-md border p-4", children: [_jsx(ImageElement, {}), (variant === 'captioned' || caption) && (_jsx("figcaption", { className: "text-muted-foreground mt-2 text-center text-sm", children: caption || 'Image caption' }))] }));
 }
 //# sourceMappingURL=ImagePreview.js.map

package/dist/views/page-builder/block-renderers/TextPreview.js

@@ -12,11 +12,11 @@ export function TextPreview({ data, variant = 'prose' }) {
         const midpoint = Math.ceil(truncatedBody.length / 2);
         const col1 = truncatedBody.slice(0, midpoint);
         const col2 = truncatedBody.slice(midpoint);
-        return (_jsxs("div", { className: "rounded-md border border-border p-5", children: [heading && (_jsx(HeadingTag, { className: `${headingSizeClass} mb-3 font-medium text-foreground`, children: heading })), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: col1 || 'Column one text content…' }), _jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: col2 || 'Column two text content…' })] })] }));
+        return (_jsxs("div", { className: "border-border rounded-md border p-5", children: [heading && (_jsx(HeadingTag, { className: `${headingSizeClass} text-foreground mb-3 font-medium`, children: heading })), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx("p", { className: "text-muted-foreground text-sm leading-relaxed", children: col1 || 'Column one text content…' }), _jsx("p", { className: "text-muted-foreground text-sm leading-relaxed", children: col2 || 'Column two text content…' })] })] }));
     }
     if (variant === 'with-sidebar') {
-        return (_jsxs("div", { className: "grid grid-cols-[1fr_200px] gap-4 rounded-md border border-border p-5", children: [_jsxs("div", { children: [heading && (_jsx(HeadingTag, { className: `${headingSizeClass} mb-3 font-medium text-foreground`, children: heading })), _jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: truncatedBody || 'Body text content goes here…' })] }), _jsxs("aside", { className: "rounded-md bg-muted p-3", children: [_jsx("div", { className: "h-3 w-3/4 rounded bg-border" }), _jsx("div", { className: "mt-2 h-2 w-full rounded bg-border" }), _jsx("div", { className: "mt-1 h-2 w-2/3 rounded bg-border" })] })] }));
+        return (_jsxs("div", { className: "border-border grid grid-cols-[1fr_200px] gap-4 rounded-md border p-5", children: [_jsxs("div", { children: [heading && (_jsx(HeadingTag, { className: `${headingSizeClass} text-foreground mb-3 font-medium`, children: heading })), _jsx("p", { className: "text-muted-foreground text-sm leading-relaxed", children: truncatedBody || 'Body text content goes here…' })] }), _jsxs("aside", { className: "bg-muted rounded-md p-3", children: [_jsx("div", { className: "bg-border h-3 w-3/4 rounded" }), _jsx("div", { className: "bg-border mt-2 h-2 w-full rounded" }), _jsx("div", { className: "bg-border mt-1 h-2 w-2/3 rounded" })] })] }));
     }
-    return (_jsxs("div", { className: "rounded-md border border-border p-5", children: [heading && (_jsx(HeadingTag, { className: `${headingSizeClass} mb-3 font-medium text-foreground`, children: heading })), _jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: truncatedBody || _jsx("span", { className: "italic", children: "Body text content goes here\u2026" }) })] }));
+    return (_jsxs("div", { className: "border-border rounded-md border p-5", children: [heading && (_jsx(HeadingTag, { className: `${headingSizeClass} text-foreground mb-3 font-medium`, children: heading })), _jsx("p", { className: "text-muted-foreground text-sm leading-relaxed", children: truncatedBody || _jsx("span", { className: "italic", children: "Body text content goes here\u2026" }) })] }));
 }
 //# sourceMappingURL=TextPreview.js.map

package/dist/views/page-builder/block-renderers/VideoPreview.js

@@ -6,13 +6,13 @@ export function VideoPreview({ data, variant = 'inline' }) {
     const autoplay = data.autoplay;
     const loop = data.loop;
     const badges = [autoplay ? 'Autoplay' : '', loop ? 'Loop' : ''].filter((b) => b !== '');
-    const content = (_jsxs("div", { className: "relative flex aspect-video items-center justify-center overflow-hidden rounded-md bg-muted", children: [poster ? (_jsx("img", { src: poster, alt: "", className: "absolute inset-0 h-full w-full object-cover" })) : (_jsx("div", { className: "absolute inset-0 bg-card" })), _jsx("div", { className: "relative z-10 flex h-12 w-12 items-center justify-center rounded-full bg-primary/90 shadow-sm", children: _jsx(Play, { size: 20, className: "text-primary-foreground" }) }), badges.length > 0 && (_jsx("div", { className: "absolute bottom-2 right-2 z-10 flex gap-1", children: badges.map((badge) => (_jsx("span", { className: "rounded bg-background/80 px-1.5 py-0.5 text-xs text-muted-foreground", children: badge }, badge))) }))] }));
+    const content = (_jsxs("div", { className: "bg-muted relative flex aspect-video items-center justify-center overflow-hidden rounded-md", children: [poster ? (_jsx("img", { src: poster, alt: "", className: "absolute inset-0 h-full w-full object-cover" })) : (_jsx("div", { className: "bg-card absolute inset-0" })), _jsx("div", { className: "bg-primary/90 relative z-10 flex h-12 w-12 items-center justify-center rounded-full shadow-sm", children: _jsx(Play, { size: 20, className: "text-primary-foreground" }) }), badges.length > 0 && (_jsx("div", { className: "absolute right-2 bottom-2 z-10 flex gap-1", children: badges.map((badge) => (_jsx("span", { className: "bg-background/80 text-muted-foreground rounded px-1.5 py-0.5 text-xs", children: badge }, badge))) }))] }));
     if (variant === 'background') {
-        return (_jsx("div", { className: "overflow-hidden rounded-md border border-border", children: _jsxs("div", { className: "relative aspect-[21/9]", children: [poster ? (_jsx("img", { src: poster, alt: "", className: "absolute inset-0 h-full w-full object-cover" })) : (_jsx("div", { className: "absolute inset-0 bg-card" })), _jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-background/30", children: _jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-primary/90 shadow-sm", children: _jsx(Play, { size: 24, className: "text-primary-foreground" }) }) })] }) }));
+        return (_jsx("div", { className: "border-border overflow-hidden rounded-md border", children: _jsxs("div", { className: "relative aspect-[21/9]", children: [poster ? (_jsx("img", { src: poster, alt: "", className: "absolute inset-0 h-full w-full object-cover" })) : (_jsx("div", { className: "bg-card absolute inset-0" })), _jsx("div", { className: "bg-background/30 absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "bg-primary/90 flex h-14 w-14 items-center justify-center rounded-full shadow-sm", children: _jsx(Play, { size: 24, className: "text-primary-foreground" }) }) })] }) }));
     }
     if (variant === 'lightbox') {
-        return (_jsx("div", { className: "rounded-md border border-border p-4", children: _jsxs("div", { className: "mx-auto max-w-sm", children: [content, _jsx("p", { className: "mt-2 text-center text-xs text-muted-foreground", children: "Click to play in lightbox" })] }) }));
+        return (_jsx("div", { className: "border-border rounded-md border p-4", children: _jsxs("div", { className: "mx-auto max-w-sm", children: [content, _jsx("p", { className: "text-muted-foreground mt-2 text-center text-xs", children: "Click to play in lightbox" })] }) }));
     }
-    return _jsx("div", { className: "rounded-md border border-border p-4", children: content });
+    return _jsx("div", { className: "border-border rounded-md border p-4", children: content });
 }
 //# sourceMappingURL=VideoPreview.js.map

package/dist/views/page-builder/canvas/BlockRenderer.js

@@ -21,6 +21,6 @@ export function BlockRenderer({ node, selectedNodeId, onSelectNode }) {
         e.stopPropagation();
         onSelectNode(node.id);
     };
-    return (_jsxs("div", { "data-node-id": node.id, className: `relative min-h-[48px] transition-shadow ${isSelected ? 'ring-2 ring-primary ring-offset-2' : hovered ? 'ring-1 ring-primary/50' : ''}`, onClick: handleClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [(hovered || isSelected) && (_jsx("span", { className: "absolute -top-2 -left-1 text-xs px-1.5 py-0.5 bg-primary text-primary-foreground rounded font-medium z-10", children: label })), _jsxs("div", { className: "flex items-center justify-center gap-2 p-4 bg-muted/30 border border-dashed border-border rounded-md", children: [_jsx(Icon, { size: 16, className: "text-muted-foreground" }), _jsx("span", { className: "text-sm text-muted-foreground", children: label })] })] }));
+    return (_jsxs("div", { "data-node-id": node.id, className: `relative min-h-[48px] transition-shadow ${isSelected ? 'ring-primary ring-2 ring-offset-2' : hovered ? 'ring-primary/50 ring-1' : ''}`, onClick: handleClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [(hovered || isSelected) && (_jsx("span", { className: "bg-primary text-primary-foreground absolute -top-2 -left-1 z-10 rounded px-1.5 py-0.5 text-xs font-medium", children: label })), _jsxs("div", { className: "bg-muted/30 border-border flex items-center justify-center gap-2 rounded-md border border-dashed p-4", children: [_jsx(Icon, { size: 16, className: "text-muted-foreground" }), _jsx("span", { className: "text-muted-foreground text-sm", children: label })] })] }));
 }
 //# sourceMappingURL=BlockRenderer.js.map

package/dist/views/page-builder/canvas/BuilderCanvas.js

@@ -13,14 +13,14 @@ export function BuilderCanvas({ tree, selectedNodeId, showGridOverlay, deviceMod
             onSelectNode(null);
         }
     };
-    return (_jsxs("div", { className: "relative flex-1 overflow-auto bg-muted p-6", onClick: handleCanvasClick, children: [showGridOverlay && _jsx(GridOverlay, { deviceMode: deviceMode }), _jsxs("div", { className: `relative bg-background shadow-sm min-h-full ${DEVICE_CLASSES[deviceMode]}`, onClick: handleCanvasClick, children: [tree.children.map((child) => {
+    return (_jsxs("div", { className: "bg-muted relative flex-1 overflow-auto p-6", onClick: handleCanvasClick, children: [showGridOverlay && _jsx(GridOverlay, { deviceMode: deviceMode }), _jsxs("div", { className: `bg-background relative min-h-full shadow-sm ${DEVICE_CLASSES[deviceMode]}`, onClick: handleCanvasClick, children: [tree.children.map((child) => {
                         if (child.type === 'section') {
                             return (_jsx(SectionRenderer, { node: child, selectedNodeId: selectedNodeId, onSelectNode: onSelectNode }, child.id));
                         }
                         return null;
-                    }), tree.children.length === 0 && (_jsxs("div", { className: "flex flex-col items-center justify-center min-h-[400px] text-center", children: [_jsx(LayoutGrid, { size: 32, className: "text-muted-foreground mb-3" }), _jsx("p", { className: "text-sm font-medium text-foreground mb-1", children: "No sections yet" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Click \"Add Section\" below to start building your page" })] }))] })] }));
+                    }), tree.children.length === 0 && (_jsxs("div", { className: "flex min-h-[400px] flex-col items-center justify-center text-center", children: [_jsx(LayoutGrid, { size: 32, className: "text-muted-foreground mb-3" }), _jsx("p", { className: "text-foreground mb-1 text-sm font-medium", children: "No sections yet" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Click \"Add Section\" below to start building your page" })] }))] })] }));
 }
 function GridOverlay({ deviceMode }) {
-    return (_jsx("div", { className: `pointer-events-none absolute inset-0 z-50 p-6 ${deviceMode !== 'desktop' ? 'flex justify-center' : ''}`, "aria-hidden": "true", children: _jsx("div", { className: `grid grid-cols-12 gap-4 h-full opacity-[0.08] ${DEVICE_CLASSES[deviceMode]}`, children: Array.from({ length: 12 }).map((_, i) => (_jsx("div", { className: "bg-primary h-full rounded-sm" }, i))) }) }));
+    return (_jsx("div", { className: `pointer-events-none absolute inset-0 z-50 p-6 ${deviceMode !== 'desktop' ? 'flex justify-center' : ''}`, "aria-hidden": "true", children: _jsx("div", { className: `grid h-full grid-cols-12 gap-4 opacity-[0.08] ${DEVICE_CLASSES[deviceMode]}`, children: Array.from({ length: 12 }).map((_, i) => (_jsx("div", { className: "bg-primary h-full rounded-sm" }, i))) }) }));
 }
 //# sourceMappingURL=BuilderCanvas.js.map

package/dist/views/page-builder/canvas/ColumnRenderer.js

@@ -12,14 +12,14 @@ export function ColumnRenderer({ node, selectedNodeId, onSelectNode }) {
         e.stopPropagation();
         onSelectNode(node.id);
     };
-    return (_jsxs("div", { "data-node-id": node.id, className: `relative transition-shadow ${isSelected ? 'ring-2 ring-primary ring-offset-2' : hovered ? 'ring-1 ring-primary/50' : ''}`, style: {
+    return (_jsxs("div", { "data-node-id": node.id, className: `relative transition-shadow ${isSelected ? 'ring-primary ring-2 ring-offset-2' : hovered ? 'ring-primary/50 ring-1' : ''}`, style: {
             gridColumn: `span ${width}`,
             padding: node.settings.padding,
             background: node.settings.background,
         }, onClick: handleClick, onMouseEnter: (e) => {
             e.stopPropagation();
             setHovered(true);
-        }, onMouseLeave: () => setHovered(false), children: [(hovered || isSelected) && (_jsxs("span", { className: "absolute -top-2 -left-1 text-xs px-1.5 py-0.5 bg-primary text-primary-foreground rounded font-medium z-10", children: ["Col ", width] })), isEmpty ? (_jsx("div", { className: "flex items-center justify-center min-h-[64px] border-2 border-dashed border-border rounded-md text-sm text-muted-foreground", children: "Empty column" })) : (_jsx("div", { className: "flex flex-col gap-2", children: node.children.map((child) => {
+        }, onMouseLeave: () => setHovered(false), children: [(hovered || isSelected) && (_jsxs("span", { className: "bg-primary text-primary-foreground absolute -top-2 -left-1 z-10 rounded px-1.5 py-0.5 text-xs font-medium", children: ["Col ", width] })), isEmpty ? (_jsx("div", { className: "border-border text-muted-foreground flex min-h-[64px] items-center justify-center rounded-md border-2 border-dashed text-sm", children: "Empty column" })) : (_jsx("div", { className: "flex flex-col gap-2", children: node.children.map((child) => {
                     if (child.type === 'block') {
                         return (_jsx(BlockRenderer, { node: child, selectedNodeId: selectedNodeId, onSelectNode: onSelectNode }, child.id));
                     }

package/dist/views/page-builder/canvas/ContainerRenderer.js

@@ -17,13 +17,13 @@ export function ContainerRenderer({ node, selectedNodeId, onSelectNode }) {
         e.stopPropagation();
         onSelectNode(node.id);
     };
-    return (_jsxs("div", { "data-node-id": node.id, className: `relative transition-shadow ${isSelected ? 'ring-2 ring-primary ring-offset-2' : hovered ? 'ring-1 ring-primary/50' : ''}`, style: {
+    return (_jsxs("div", { "data-node-id": node.id, className: `relative transition-shadow ${isSelected ? 'ring-primary ring-2 ring-offset-2' : hovered ? 'ring-primary/50 ring-1' : ''}`, style: {
             maxWidth,
             margin: marginMap[alignment] ?? '0 auto',
             padding,
         }, onClick: handleClick, onMouseEnter: (e) => {
             e.stopPropagation();
             setHovered(true);
-        }, onMouseLeave: () => setHovered(false), children: [(hovered || isSelected) && (_jsx("span", { className: "absolute -top-2 -left-1 text-xs px-1.5 py-0.5 bg-primary text-primary-foreground rounded font-medium z-10", children: "Container" })), _jsx("div", { className: "flex flex-col gap-4", children: node.children.map((row) => (_jsx(RowRenderer, { node: row, selectedNodeId: selectedNodeId, onSelectNode: onSelectNode }, row.id))) })] }));
+        }, onMouseLeave: () => setHovered(false), children: [(hovered || isSelected) && (_jsx("span", { className: "bg-primary text-primary-foreground absolute -top-2 -left-1 z-10 rounded px-1.5 py-0.5 text-xs font-medium", children: "Container" })), _jsx("div", { className: "flex flex-col gap-4", children: node.children.map((row) => (_jsx(RowRenderer, { node: row, selectedNodeId: selectedNodeId, onSelectNode: onSelectNode }, row.id))) })] }));
 }
 //# sourceMappingURL=ContainerRenderer.js.map