@actuate-media/cms-admin 0.10.0 → 0.11.0

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

@@ -38,11 +38,11 @@ function getRingStrokeColor(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 SeverityBadge({ severity }) {
@@ -51,7 +51,7 @@ function SeverityBadge({ severity }) {
         suggestion: 'bg-amber-100 text-amber-700',
         info: 'bg-blue-100 text-blue-700',
     };
-    return (_jsx("span", { className: `inline-block px-1.5 py-0.5 rounded text-xs font-medium ${classes[severity]}`, children: severity }));
+    return (_jsx("span", { className: `inline-block rounded px-1.5 py-0.5 text-xs font-medium ${classes[severity]}`, children: severity }));
 }
 function ScoreRing({ score }) {
     const radius = 32;
@@ -60,11 +60,11 @@ function ScoreRing({ score }) {
     const progress = Math.min(score, 100) / 100;
     const dashOffset = circumference * (1 - progress);
     const size = (radius + strokeWidth) * 2;
-    return (_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsxs("div", { className: "relative", children: [_jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "-rotate-90", children: [_jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: "var(--border)", strokeWidth: strokeWidth }), _jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: getRingStrokeColor(score), strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: dashOffset, strokeLinecap: "round", className: "transition-all duration-700 ease-out" })] }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("span", { className: `text-lg font-medium ${getScoreColor(score, 100)}`, children: score }) })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: getScoreLabel(score) })] }));
+    return (_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsxs("div", { className: "relative", children: [_jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "-rotate-90", children: [_jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: "var(--border)", strokeWidth: strokeWidth }), _jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: getRingStrokeColor(score), strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: dashOffset, strokeLinecap: "round", className: "transition-all duration-700 ease-out" })] }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("span", { className: `text-lg font-medium ${getScoreColor(score, 100)}`, children: score }) })] }), _jsx("span", { className: "text-muted-foreground text-xs", children: getScoreLabel(score) })] }));
 }
 function CategoryRow({ category, expanded, onToggle, }) {
     const percentage = category.maxScore > 0 ? (category.score / category.maxScore) * 100 : 0;
-    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 flex-col gap-2 hover:bg-muted/50 transition-colors", onClick: onToggle, "aria-expanded": expanded, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-medium text-foreground", children: category.label }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-xs text-muted-foreground", children: [category.score, "/", category.maxScore] }), expanded ? (_jsx(ChevronUp, { size: 14, className: "text-muted-foreground" })) : (_jsx(ChevronDown, { size: 14, className: "text-muted-foreground" }))] })] }), _jsx("div", { className: "w-full h-1.5 rounded-full bg-muted overflow-hidden", children: _jsx("div", { className: `h-full rounded-full transition-all duration-500 ease-out ${getBarColor(category.score, category.maxScore)}`, style: { width: `${percentage}%` } }) })] }), expanded && category.checks.length > 0 && (_jsx("div", { className: "px-4 pb-3 flex flex-col gap-2", children: category.checks.map((check) => (_jsxs("div", { className: "flex items-start gap-2 pl-1", 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 (_jsxs("div", { className: "border-border border-b last:border-b-0", children: [_jsxs("button", { type: "button", className: "hover:bg-muted/50 flex w-full flex-col gap-2 px-4 py-3 text-left transition-colors", onClick: onToggle, "aria-expanded": expanded, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-foreground text-xs font-medium", children: category.label }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-muted-foreground text-xs", children: [category.score, "/", category.maxScore] }), expanded ? (_jsx(ChevronUp, { size: 14, className: "text-muted-foreground" })) : (_jsx(ChevronDown, { size: 14, className: "text-muted-foreground" }))] })] }), _jsx("div", { className: "bg-muted h-1.5 w-full overflow-hidden rounded-full", children: _jsx("div", { className: `h-full rounded-full transition-all duration-500 ease-out ${getBarColor(category.score, category.maxScore)}`, style: { width: `${percentage}%` } }) })] }), expanded && category.checks.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 px-4 pb-3", children: category.checks.map((check) => (_jsxs("div", { className: "flex items-start gap-2 pl-1", 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 SuggestionsList({ suggestions }) {
     const sorted = useMemo(() => {
@@ -77,7 +77,7 @@ function SuggestionsList({ suggestions }) {
     }, [suggestions]);
     if (sorted.length === 0)
         return null;
-    return (_jsxs("div", { className: "px-4 py-3 border-t border-border", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Lightbulb, { size: 14, className: "text-muted-foreground" }), _jsx("span", { className: "text-xs font-medium text-foreground", children: "Suggestions" })] }), _jsx("div", { className: "flex flex-col gap-2.5", children: sorted.map((suggestion) => (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(SeverityBadge, { severity: suggestion.severity }), _jsx("span", { className: "text-xs text-muted-foreground leading-relaxed", children: suggestion.message })] }, suggestion.id))) })] }));
+    return (_jsxs("div", { className: "border-border border-t px-4 py-3", children: [_jsxs("div", { className: "mb-3 flex items-center gap-2", children: [_jsx(Lightbulb, { size: 14, className: "text-muted-foreground" }), _jsx("span", { className: "text-foreground text-xs font-medium", children: "Suggestions" })] }), _jsx("div", { className: "flex flex-col gap-2.5", children: sorted.map((suggestion) => (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(SeverityBadge, { severity: suggestion.severity }), _jsx("span", { className: "text-muted-foreground text-xs leading-relaxed", children: suggestion.message })] }, suggestion.id))) })] }));
 }
 export function DesignScorePanel({ tree }) {
     const analysis = useMemo(() => analyzeDesign(tree), [tree]);
@@ -86,8 +86,8 @@ export function DesignScorePanel({ tree }) {
         setExpandedCategories((prev) => prev.includes(name) ? prev.filter((n) => n !== name) : [...prev, name]);
     };
     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(Palette, { size: 32, className: "text-muted-foreground mb-3" }), _jsx("p", { className: "text-sm font-medium text-foreground mb-1", children: "Design Score" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Add sections to your page to see the design analysis" })] }));
+        return (_jsxs("div", { className: "flex min-h-[200px] flex-col items-center justify-center p-6 text-center", children: [_jsx(Palette, { size: 32, className: "text-muted-foreground mb-3" }), _jsx("p", { className: "text-foreground mb-1 text-sm font-medium", children: "Design Score" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Add sections to your page to see the design analysis" })] }));
     }
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "flex flex-col items-center py-5 border-b border-border", children: _jsx(ScoreRing, { score: analysis.score }) }), _jsx("div", { className: "flex flex-col", children: analysis.categories.map((category) => (_jsx(CategoryRow, { category: category, expanded: expandedCategories.includes(category.name), onToggle: () => toggleCategory(category.name) }, category.name))) }), _jsx(SuggestionsList, { suggestions: analysis.suggestions })] }));
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "border-border flex flex-col items-center border-b py-5", children: _jsx(ScoreRing, { score: analysis.score }) }), _jsx("div", { className: "flex flex-col", children: analysis.categories.map((category) => (_jsx(CategoryRow, { category: category, expanded: expandedCategories.includes(category.name), onToggle: () => toggleCategory(category.name) }, category.name))) }), _jsx(SuggestionsList, { suggestions: analysis.suggestions })] }));
 }
 //# sourceMappingURL=DesignScore.js.map

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

@@ -36,19 +36,19 @@ export function NodeSettings({ node, onUpdateSettings, onRemoveNode, onDuplicate
             : node.type === 'row'
                 ? 'Row'
                 : 'Column';
-    return (_jsxs("div", { className: "flex flex-col h-full", children: [_jsx("div", { className: "p-4 border-b border-border", children: _jsxs("p", { className: "text-sm font-medium text-foreground", children: [nodeLabel, " Settings"] }) }), _jsx("div", { className: "flex-1 overflow-y-auto", children: _jsxs("div", { className: "space-y-4 p-4", children: [node.type === 'section' && (_jsx(SectionFields, { node: node, updateSetting: updateSetting, onAddRow: onAddRow })), node.type === 'container' && (_jsx(ContainerFields, { node: node, updateSetting: updateSetting })), node.type === 'row' && _jsx(RowFields, { node: node, updateSetting: updateSetting }), node.type === 'column' && _jsx(ColumnFields, { node: node, updateSetting: updateSetting })] }) }), _jsxs("div", { className: "p-4 border-t border-border space-y-2", children: [_jsx("p", { className: SECTION_HEADING_CLASS, children: "Actions" }), _jsxs("div", { className: "flex gap-2", children: [_jsxs("button", { type: "button", onClick: () => onMoveNodeUp(node.id), "aria-label": "Move up", className: "flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-sm bg-background border border-input rounded-md hover:bg-accent transition-colors", children: [_jsx(ArrowUp, { size: 14 }), "Up"] }), _jsxs("button", { type: "button", onClick: () => onMoveNodeDown(node.id), "aria-label": "Move down", className: "flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-sm bg-background border border-input rounded-md hover:bg-accent transition-colors", children: [_jsx(ArrowDown, { size: 14 }), "Down"] })] }), _jsxs("button", { type: "button", onClick: () => onDuplicateNode(node.id), className: "w-full flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium bg-background border border-input rounded-md hover:bg-accent transition-colors", children: [_jsx(Copy, { size: 14 }), "Duplicate"] }), _jsxs("button", { type: "button", onClick: handleDelete, onBlur: () => setConfirmDelete(false), className: `w-full flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded-md transition-colors ${confirmDelete
+    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsx("div", { className: "border-border border-b p-4", children: _jsxs("p", { className: "text-foreground text-sm font-medium", children: [nodeLabel, " Settings"] }) }), _jsx("div", { className: "flex-1 overflow-y-auto", children: _jsxs("div", { className: "space-y-4 p-4", children: [node.type === 'section' && (_jsx(SectionFields, { node: node, updateSetting: updateSetting, onAddRow: onAddRow })), node.type === 'container' && (_jsx(ContainerFields, { node: node, updateSetting: updateSetting })), node.type === 'row' && _jsx(RowFields, { node: node, updateSetting: updateSetting }), node.type === 'column' && _jsx(ColumnFields, { node: node, updateSetting: updateSetting })] }) }), _jsxs("div", { className: "border-border space-y-2 border-t p-4", children: [_jsx("p", { className: SECTION_HEADING_CLASS, children: "Actions" }), _jsxs("div", { className: "flex gap-2", children: [_jsxs("button", { type: "button", onClick: () => onMoveNodeUp(node.id), "aria-label": "Move up", className: "bg-background border-input hover:bg-accent flex flex-1 items-center justify-center gap-1.5 rounded-md border px-3 py-2 text-sm transition-colors", children: [_jsx(ArrowUp, { size: 14 }), "Up"] }), _jsxs("button", { type: "button", onClick: () => onMoveNodeDown(node.id), "aria-label": "Move down", className: "bg-background border-input hover:bg-accent flex flex-1 items-center justify-center gap-1.5 rounded-md border px-3 py-2 text-sm transition-colors", children: [_jsx(ArrowDown, { size: 14 }), "Down"] })] }), _jsxs("button", { type: "button", onClick: () => onDuplicateNode(node.id), className: "bg-background border-input hover:bg-accent flex w-full items-center justify-center gap-2 rounded-md border px-3 py-2 text-sm font-medium transition-colors", children: [_jsx(Copy, { size: 14 }), "Duplicate"] }), _jsxs("button", { type: "button", onClick: handleDelete, onBlur: () => setConfirmDelete(false), className: `flex w-full items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors ${confirmDelete
                             ? 'bg-destructive text-destructive-foreground'
-                            : 'bg-background border border-destructive text-destructive hover:bg-destructive/10'}`, children: [_jsx(Trash2, { size: 14 }), confirmDelete ? 'Click again to confirm' : 'Delete'] })] })] }));
+                            : 'bg-background border-destructive text-destructive hover:bg-destructive/10 border'}`, children: [_jsx(Trash2, { size: 14 }), confirmDelete ? 'Click again to confirm' : 'Delete'] })] })] }));
 }
 function SectionFields({ node, updateSetting, onAddRow, }) {
     const s = node.settings;
-    return (_jsxs(_Fragment, { children: [_jsx("p", { className: SECTION_HEADING_CLASS, children: "Background" }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Background Color" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "color", value: s.background ?? '#ffffff', onChange: (e) => updateSetting('background', e.target.value), className: "h-9 w-9 rounded-md border border-input cursor-pointer" }), _jsx("input", { type: "text", value: s.background ?? '', onChange: (e) => updateSetting('background', e.target.value), placeholder: "transparent", className: `${INPUT_CLASS} flex-1` })] })] }), _jsx("p", { className: SECTION_HEADING_CLASS, children: "Spacing" }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Padding Top" }), _jsx("input", { type: "text", value: s.paddingTop ?? '', onChange: (e) => updateSetting('paddingTop', e.target.value), placeholder: "0px", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Padding Bottom" }), _jsx("input", { type: "text", value: s.paddingBottom ?? '', onChange: (e) => updateSetting('paddingBottom', e.target.value), placeholder: "0px", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Margin Top" }), _jsx("input", { type: "text", value: s.marginTop ?? '', onChange: (e) => updateSetting('marginTop', e.target.value), placeholder: "0px", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Margin Bottom" }), _jsx("input", { type: "text", value: s.marginBottom ?? '', onChange: (e) => updateSetting('marginBottom', e.target.value), placeholder: "0px", className: INPUT_CLASS })] })] }), _jsx("p", { className: SECTION_HEADING_CLASS, children: "Attributes" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-sm font-medium text-foreground", children: "Visibility" }), _jsx(SwitchPrimitive.Root, { checked: s.visibility !== 'hidden', onCheckedChange: (checked) => updateSetting('visibility', checked ? 'visible' : 'hidden'), className: "w-9 h-5 bg-input rounded-full relative data-[state=checked]:bg-primary transition-colors", "aria-label": "Section visibility", children: _jsx(SwitchPrimitive.Thumb, { className: "block h-3.5 w-3.5 rounded-full bg-background shadow-sm transition-transform translate-x-0.5 data-[state=checked]:translate-x-[18px]" }) })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "HTML ID" }), _jsx("input", { type: "text", value: s.htmlId ?? '', onChange: (e) => updateSetting('htmlId', e.target.value), placeholder: "section-id", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "HTML Class" }), _jsx("input", { type: "text", value: s.htmlClass ?? '', onChange: (e) => updateSetting('htmlClass', e.target.value), placeholder: "my-class", className: INPUT_CLASS })] }), onAddRow && (_jsxs("button", { type: "button", onClick: () => onAddRow(node.id), className: "w-full flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors", children: [_jsx(Plus, { size: 14 }), "Add Row"] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("p", { className: SECTION_HEADING_CLASS, children: "Background" }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Background Color" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "color", value: s.background ?? '#ffffff', onChange: (e) => updateSetting('background', e.target.value), className: "border-input h-9 w-9 cursor-pointer rounded-md border" }), _jsx("input", { type: "text", value: s.background ?? '', onChange: (e) => updateSetting('background', e.target.value), placeholder: "transparent", className: `${INPUT_CLASS} flex-1` })] })] }), _jsx("p", { className: SECTION_HEADING_CLASS, children: "Spacing" }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Padding Top" }), _jsx("input", { type: "text", value: s.paddingTop ?? '', onChange: (e) => updateSetting('paddingTop', e.target.value), placeholder: "0px", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Padding Bottom" }), _jsx("input", { type: "text", value: s.paddingBottom ?? '', onChange: (e) => updateSetting('paddingBottom', e.target.value), placeholder: "0px", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Margin Top" }), _jsx("input", { type: "text", value: s.marginTop ?? '', onChange: (e) => updateSetting('marginTop', e.target.value), placeholder: "0px", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Margin Bottom" }), _jsx("input", { type: "text", value: s.marginBottom ?? '', onChange: (e) => updateSetting('marginBottom', e.target.value), placeholder: "0px", className: INPUT_CLASS })] })] }), _jsx("p", { className: SECTION_HEADING_CLASS, children: "Attributes" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-foreground text-sm font-medium", children: "Visibility" }), _jsx(SwitchPrimitive.Root, { checked: s.visibility !== 'hidden', onCheckedChange: (checked) => updateSetting('visibility', checked ? 'visible' : 'hidden'), className: "bg-input data-[state=checked]:bg-primary relative h-5 w-9 rounded-full transition-colors", "aria-label": "Section visibility", children: _jsx(SwitchPrimitive.Thumb, { className: "bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[18px]" }) })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "HTML ID" }), _jsx("input", { type: "text", value: s.htmlId ?? '', onChange: (e) => updateSetting('htmlId', e.target.value), placeholder: "section-id", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "HTML Class" }), _jsx("input", { type: "text", value: s.htmlClass ?? '', onChange: (e) => updateSetting('htmlClass', e.target.value), placeholder: "my-class", className: INPUT_CLASS })] }), onAddRow && (_jsxs("button", { type: "button", onClick: () => onAddRow(node.id), className: "bg-primary text-primary-foreground hover:bg-primary/90 flex w-full items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors", children: [_jsx(Plus, { size: 14 }), "Add Row"] }))] }));
 }
 function ContainerFields({ node, updateSetting, }) {
     const s = node.settings;
     return (_jsxs(_Fragment, { children: [_jsx("p", { className: SECTION_HEADING_CLASS, children: "Layout" }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Max Width" }), _jsx("input", { type: "text", value: s.maxWidth ?? '', onChange: (e) => updateSetting('maxWidth', e.target.value), placeholder: "1200px", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Alignment" }), _jsx("div", { className: "flex gap-1", children: ['left', 'center', 'right'].map((align) => {
                             const Icon = align === 'left' ? AlignLeft : align === 'center' ? AlignCenter : AlignRight;
-                            return (_jsx("button", { type: "button", onClick: () => updateSetting('alignment', align), "aria-label": `Align ${align}`, className: `flex-1 flex items-center justify-center py-2 rounded-md border transition-colors ${s.alignment === align
+                            return (_jsx("button", { type: "button", onClick: () => updateSetting('alignment', align), "aria-label": `Align ${align}`, className: `flex flex-1 items-center justify-center rounded-md border py-2 transition-colors ${s.alignment === align
                                     ? 'bg-primary text-primary-foreground border-primary'
                                     : 'bg-background border-input hover:bg-accent'}`, children: _jsx(Icon, { size: 14 }) }, align));
                         }) })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Padding" }), _jsx("input", { type: "text", value: s.padding ?? '', onChange: (e) => updateSetting('padding', e.target.value), placeholder: "0px", className: INPUT_CLASS })] })] }));
@@ -63,18 +63,18 @@ function RowFields({ node, updateSetting, }) {
                                     : align === 'center'
                                         ? Minus
                                         : AlignCenter;
-                            return (_jsx("button", { type: "button", onClick: () => updateSetting('verticalAlign', align), "aria-label": `Align ${align}`, className: `flex-1 flex items-center justify-center py-2 rounded-md border text-xs transition-colors ${s.verticalAlign === align
+                            return (_jsx("button", { type: "button", onClick: () => updateSetting('verticalAlign', align), "aria-label": `Align ${align}`, className: `flex flex-1 items-center justify-center rounded-md border py-2 text-xs transition-colors ${s.verticalAlign === align
                                     ? 'bg-primary text-primary-foreground border-primary'
                                     : 'bg-background border-input hover:bg-accent'}`, children: _jsx(Icon, { size: 14 }) }, align));
-                        }) })] }), _jsx("p", { className: SECTION_HEADING_CLASS, children: "Mobile" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-sm font-medium text-foreground", children: "Reverse on Mobile" }), _jsx(SwitchPrimitive.Root, { checked: !!s.reverseOnMobile, onCheckedChange: (checked) => updateSetting('reverseOnMobile', checked), className: "w-9 h-5 bg-input rounded-full relative data-[state=checked]:bg-primary transition-colors", "aria-label": "Reverse column order on mobile", children: _jsx(SwitchPrimitive.Thumb, { className: "block h-3.5 w-3.5 rounded-full bg-background shadow-sm transition-transform translate-x-0.5 data-[state=checked]:translate-x-[18px]" }) })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-sm font-medium text-foreground", children: "Wrap on Mobile" }), _jsx(SwitchPrimitive.Root, { checked: !!s.wrapOnMobile, onCheckedChange: (checked) => updateSetting('wrapOnMobile', checked), className: "w-9 h-5 bg-input rounded-full relative data-[state=checked]:bg-primary transition-colors", "aria-label": "Wrap columns on mobile", children: _jsx(SwitchPrimitive.Thumb, { className: "block h-3.5 w-3.5 rounded-full bg-background shadow-sm transition-transform translate-x-0.5 data-[state=checked]:translate-x-[18px]" }) })] }), _jsx("p", { className: SECTION_HEADING_CLASS, children: "Column Presets" }), _jsx("div", { className: "grid grid-cols-2 gap-1.5", children: COLUMN_PRESETS.map((preset) => (_jsxs("button", { type: "button", onClick: () => updateSetting('__columnPreset', preset.widths), className: "px-2 py-2 rounded-md border border-input bg-background hover:bg-accent transition-colors", children: [_jsx("div", { className: "flex gap-0.5 h-4", children: preset.widths.map((w, i) => (_jsx("div", { className: "bg-muted-foreground/30 rounded-sm", style: { flex: w } }, i))) }), _jsx("p", { className: "text-xs text-muted-foreground mt-1 text-center", children: preset.widths.join(' | ') })] }, preset.label))) })] }));
+                        }) })] }), _jsx("p", { className: SECTION_HEADING_CLASS, children: "Mobile" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-foreground text-sm font-medium", children: "Reverse on Mobile" }), _jsx(SwitchPrimitive.Root, { checked: !!s.reverseOnMobile, onCheckedChange: (checked) => updateSetting('reverseOnMobile', checked), className: "bg-input data-[state=checked]:bg-primary relative h-5 w-9 rounded-full transition-colors", "aria-label": "Reverse column order on mobile", children: _jsx(SwitchPrimitive.Thumb, { className: "bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[18px]" }) })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-foreground text-sm font-medium", children: "Wrap on Mobile" }), _jsx(SwitchPrimitive.Root, { checked: !!s.wrapOnMobile, onCheckedChange: (checked) => updateSetting('wrapOnMobile', checked), className: "bg-input data-[state=checked]:bg-primary relative h-5 w-9 rounded-full transition-colors", "aria-label": "Wrap columns on mobile", children: _jsx(SwitchPrimitive.Thumb, { className: "bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[18px]" }) })] }), _jsx("p", { className: SECTION_HEADING_CLASS, children: "Column Presets" }), _jsx("div", { className: "grid grid-cols-2 gap-1.5", children: COLUMN_PRESETS.map((preset) => (_jsxs("button", { type: "button", onClick: () => updateSetting('__columnPreset', preset.widths), className: "border-input bg-background hover:bg-accent rounded-md border px-2 py-2 transition-colors", children: [_jsx("div", { className: "flex h-4 gap-0.5", children: preset.widths.map((w, i) => (_jsx("div", { className: "bg-muted-foreground/30 rounded-sm", style: { flex: w } }, i))) }), _jsx("p", { className: "text-muted-foreground mt-1 text-center text-xs", children: preset.widths.join(' | ') })] }, preset.label))) })] }));
 }
 function ColumnFields({ node, updateSetting, }) {
     const s = node.settings;
     return (_jsxs(_Fragment, { children: [_jsx("p", { className: SECTION_HEADING_CLASS, children: "Size" }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Width (1-12)" }), _jsx("input", { type: "number", min: 1, max: 12, value: s.width, onChange: (e) => updateSetting('width', Number(e.target.value)), className: INPUT_CLASS })] }), _jsx("p", { className: SECTION_HEADING_CLASS, children: "Layout" }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Vertical Align" }), _jsx("div", { className: "flex gap-1", children: ['top', 'center', 'bottom'].map((align) => {
                             const Icon = align === 'top' ? ArrowUpFromLine : align === 'bottom' ? ArrowDownToLine : Minus;
-                            return (_jsx("button", { type: "button", onClick: () => updateSetting('verticalAlign', align), "aria-label": `Align ${align}`, className: `flex-1 flex items-center justify-center py-2 rounded-md border transition-colors ${s.verticalAlign === align
+                            return (_jsx("button", { type: "button", onClick: () => updateSetting('verticalAlign', align), "aria-label": `Align ${align}`, className: `flex flex-1 items-center justify-center rounded-md border py-2 transition-colors ${s.verticalAlign === align
                                     ? 'bg-primary text-primary-foreground border-primary'
                                     : 'bg-background border-input hover:bg-accent'}`, children: _jsx(Icon, { size: 14 }) }, align));
-                        }) })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Padding" }), _jsx("input", { type: "text", value: s.padding ?? '', onChange: (e) => updateSetting('padding', e.target.value), placeholder: "0px", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Background Color" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "color", value: s.background ?? '#ffffff', onChange: (e) => updateSetting('background', e.target.value), className: "h-9 w-9 rounded-md border border-input cursor-pointer" }), _jsx("input", { type: "text", value: s.background ?? '', onChange: (e) => updateSetting('background', e.target.value), placeholder: "transparent", className: `${INPUT_CLASS} flex-1` })] })] })] }));
+                        }) })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Padding" }), _jsx("input", { type: "text", value: s.padding ?? '', onChange: (e) => updateSetting('padding', e.target.value), placeholder: "0px", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Background Color" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "color", value: s.background ?? '#ffffff', onChange: (e) => updateSetting('background', e.target.value), className: "border-input h-9 w-9 cursor-pointer rounded-md border" }), _jsx("input", { type: "text", value: s.background ?? '', onChange: (e) => updateSetting('background', e.target.value), placeholder: "transparent", className: `${INPUT_CLASS} flex-1` })] })] })] }));
 }
 //# sourceMappingURL=NodeSettings.js.map

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

@@ -116,10 +116,10 @@ export function PageBuilder({ documentId, collectionSlug, config, onNavigate })
         replaceTree(generatedTree);
     }, [replaceTree]);
     if (loading) {
-        return (_jsx("div", { className: "h-full flex items-center justify-center bg-background", children: _jsx(Loader2, { className: "animate-spin text-muted-foreground", size: 24 }) }));
+        return (_jsx("div", { className: "bg-background flex h-full items-center justify-center", children: _jsx(Loader2, { className: "text-muted-foreground animate-spin", size: 24 }) }));
     }
     if (loadError) {
-        return (_jsx("div", { className: "h-full flex items-center justify-center bg-background", children: _jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-destructive/30 bg-destructive/5 p-4 max-w-md", children: [_jsx(AlertTriangle, { className: "text-destructive shrink-0", size: 20 }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Failed to load page" }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: loadError })] })] }) }));
+        return (_jsx("div", { className: "bg-background flex h-full items-center justify-center", children: _jsxs("div", { className: "border-destructive/30 bg-destructive/5 flex max-w-md items-center gap-3 rounded-lg border p-4", children: [_jsx(AlertTriangle, { className: "text-destructive shrink-0", size: 20 }), _jsxs("div", { children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: "Failed to load page" }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: loadError })] })] }) }));
     }
     const canvasWidth = DEVICE_WIDTHS[deviceMode];
     const isConstrained = deviceMode !== 'desktop';
@@ -143,6 +143,6 @@ export function PageBuilder({ documentId, collectionSlug, config, onNavigate })
         ...previewStyle,
         fontFamily: previewTheme.fontFamily ?? undefined,
     };
-    return (_jsxs(ErrorBoundary, { children: [_jsxs("div", { className: "h-full flex flex-col bg-background overflow-hidden", children: [_jsx(BuilderToolbar, { collectionSlug: collectionSlug, pageSettings: pageSettings, status: status, dirty: dirty, saving: saving, canUndo: canUndo, canRedo: canRedo, deviceMode: deviceMode, onNavigate: onNavigate, onTitleChange: (title) => setPageSettings({ title }), onUndo: undo, onRedo: redo, onDeviceMode: setDeviceMode, onSave: handleSave, onPublish: handlePublish, onOpenAI: () => setAiDialogOpen(true) }), _jsxs("div", { className: "flex-1 flex overflow-hidden", children: [_jsx("div", { className: "flex-1 overflow-auto bg-muted", children: _jsx("div", { className: "mx-auto h-full max-w-full transition-all duration-200", style: { width: canvasWidth }, children: _jsx("div", { className: `h-full bg-background page-builder-canvas-shell ${isConstrained ? 'shadow-lg border-x border-border' : ''}`, style: canvasShellStyle, children: _jsx(BuilderCanvas, { tree: tree, selectedNodeId: selectedNodeId, showGridOverlay: showGridOverlay, deviceMode: deviceMode, onSelectNode: selectNode }) }) }) }), _jsx("div", { className: "w-[35%] min-w-[280px] max-w-[420px] border-l border-border bg-card overflow-y-auto", children: _jsx(ContextPanel, { activeTab: activeTab, onTabChange: setActiveTab, selectedNode: selectedNode, tree: tree, pageSettings: pageSettings, onUpdateSettings: updateSettings, onUpdateBlock: updateBlock, onRemoveNode: removeNodeById, onDuplicateNode: duplicateNode, onMoveNodeUp: moveNodeUp, onMoveNodeDown: moveNodeDown, onPageSettingsChange: setPageSettings, onAddRow: addRowToSection, config: config }) })] }), _jsx(BottomBar, { deviceMode: deviceMode, showGridOverlay: showGridOverlay, onAddSection: addSection, onToggleGrid: setShowGridOverlay })] }), _jsx(AIGenerateDialog, { open: aiDialogOpen, onClose: () => setAiDialogOpen(false), onAccept: handleAIAccept })] }));
+    return (_jsxs(ErrorBoundary, { children: [_jsxs("div", { className: "bg-background flex h-full flex-col overflow-hidden", children: [_jsx(BuilderToolbar, { collectionSlug: collectionSlug, pageSettings: pageSettings, status: status, dirty: dirty, saving: saving, canUndo: canUndo, canRedo: canRedo, deviceMode: deviceMode, onNavigate: onNavigate, onTitleChange: (title) => setPageSettings({ title }), onUndo: undo, onRedo: redo, onDeviceMode: setDeviceMode, onSave: handleSave, onPublish: handlePublish, onOpenAI: () => setAiDialogOpen(true) }), _jsxs("div", { className: "flex flex-1 overflow-hidden", children: [_jsx("div", { className: "bg-muted flex-1 overflow-auto", children: _jsx("div", { className: "mx-auto h-full max-w-full transition-all duration-200", style: { width: canvasWidth }, children: _jsx("div", { className: `bg-background page-builder-canvas-shell h-full ${isConstrained ? 'border-border border-x shadow-lg' : ''}`, style: canvasShellStyle, children: _jsx(BuilderCanvas, { tree: tree, selectedNodeId: selectedNodeId, showGridOverlay: showGridOverlay, deviceMode: deviceMode, onSelectNode: selectNode }) }) }) }), _jsx("div", { className: "border-border bg-card w-[35%] max-w-[420px] min-w-[280px] overflow-y-auto border-l", children: _jsx(ContextPanel, { activeTab: activeTab, onTabChange: setActiveTab, selectedNode: selectedNode, tree: tree, pageSettings: pageSettings, onUpdateSettings: updateSettings, onUpdateBlock: updateBlock, onRemoveNode: removeNodeById, onDuplicateNode: duplicateNode, onMoveNodeUp: moveNodeUp, onMoveNodeDown: moveNodeDown, onPageSettingsChange: setPageSettings, onAddRow: addRowToSection, config: config }) })] }), _jsx(BottomBar, { deviceMode: deviceMode, showGridOverlay: showGridOverlay, onAddSection: addSection, onToggleGrid: setShowGridOverlay })] }), _jsx(AIGenerateDialog, { open: aiDialogOpen, onClose: () => setAiDialogOpen(false), onAccept: handleAIAccept })] }));
 }
 //# sourceMappingURL=PageBuilder.js.map

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

@@ -22,6 +22,6 @@ export function PageSettingsEditor({ settings, onChange }) {
     }, [onChange]);
     const metaTitleLength = (settings.metaTitle ?? '').length;
     const metaDescLength = (settings.metaDescription ?? '').length;
-    return (_jsxs("div", { className: "space-y-4 p-4", children: [_jsx("p", { className: SECTION_HEADING_CLASS, children: "General" }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Title" }), _jsx("input", { type: "text", value: settings.title, onChange: (e) => update('title', e.target.value), placeholder: "Page title", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Slug" }), _jsx("input", { type: "text", value: settings.slug, onChange: (e) => update('slug', e.target.value), placeholder: "/page-slug", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Template" }), _jsx("input", { type: "text", value: settings.template ?? '', onChange: (e) => update('template', e.target.value), placeholder: "default", className: INPUT_CLASS, readOnly: true })] }), _jsx("p", { className: SECTION_HEADING_CLASS, children: "SEO" }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("label", { className: "text-sm font-medium text-foreground", children: "Meta Title" }), _jsxs("span", { className: `text-xs ${metaTitleLength > 60 ? 'text-destructive' : 'text-muted-foreground'}`, children: [metaTitleLength, "/60"] })] }), _jsx("input", { type: "text", value: settings.metaTitle ?? '', onChange: (e) => update('metaTitle', e.target.value), placeholder: "SEO title", maxLength: 100, className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("label", { className: "text-sm font-medium text-foreground", children: "Meta Description" }), _jsxs("span", { className: `text-xs ${metaDescLength > 160 ? 'text-destructive' : 'text-muted-foreground'}`, children: [metaDescLength, "/160"] })] }), _jsx("textarea", { value: settings.metaDescription ?? '', onChange: (e) => update('metaDescription', e.target.value), placeholder: "Brief description for search engines", rows: 3, maxLength: 250, className: `${INPUT_CLASS} resize-y` })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "OG Image" }), _jsx("input", { type: "text", value: settings.ogImage ?? '', onChange: (e) => update('ogImage', e.target.value), placeholder: "https://example.com/image.jpg", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Focus Keyphrase" }), _jsx("input", { type: "text", value: settings.focusKeyphrase ?? '', onChange: (e) => update('focusKeyphrase', e.target.value), placeholder: "primary keyword", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Schema Type" }), _jsxs("select", { value: settings.schemaType ?? '', onChange: (e) => update('schemaType', e.target.value), className: INPUT_CLASS, children: [_jsx("option", { value: "", children: "Select schema type..." }), SCHEMA_TYPES.map((type) => (_jsx("option", { value: type, children: type }, type)))] })] })] }));
+    return (_jsxs("div", { className: "space-y-4 p-4", children: [_jsx("p", { className: SECTION_HEADING_CLASS, children: "General" }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Title" }), _jsx("input", { type: "text", value: settings.title, onChange: (e) => update('title', e.target.value), placeholder: "Page title", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Slug" }), _jsx("input", { type: "text", value: settings.slug, onChange: (e) => update('slug', e.target.value), placeholder: "/page-slug", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Template" }), _jsx("input", { type: "text", value: settings.template ?? '', onChange: (e) => update('template', e.target.value), placeholder: "default", className: INPUT_CLASS, readOnly: true })] }), _jsx("p", { className: SECTION_HEADING_CLASS, children: "SEO" }), _jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center justify-between", children: [_jsx("label", { className: "text-foreground text-sm font-medium", children: "Meta Title" }), _jsxs("span", { className: `text-xs ${metaTitleLength > 60 ? 'text-destructive' : 'text-muted-foreground'}`, children: [metaTitleLength, "/60"] })] }), _jsx("input", { type: "text", value: settings.metaTitle ?? '', onChange: (e) => update('metaTitle', e.target.value), placeholder: "SEO title", maxLength: 100, className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center justify-between", children: [_jsx("label", { className: "text-foreground text-sm font-medium", children: "Meta Description" }), _jsxs("span", { className: `text-xs ${metaDescLength > 160 ? 'text-destructive' : 'text-muted-foreground'}`, children: [metaDescLength, "/160"] })] }), _jsx("textarea", { value: settings.metaDescription ?? '', onChange: (e) => update('metaDescription', e.target.value), placeholder: "Brief description for search engines", rows: 3, maxLength: 250, className: `${INPUT_CLASS} resize-y` })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "OG Image" }), _jsx("input", { type: "text", value: settings.ogImage ?? '', onChange: (e) => update('ogImage', e.target.value), placeholder: "https://example.com/image.jpg", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Focus Keyphrase" }), _jsx("input", { type: "text", value: settings.focusKeyphrase ?? '', onChange: (e) => update('focusKeyphrase', e.target.value), placeholder: "primary keyword", className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Schema Type" }), _jsxs("select", { value: settings.schemaType ?? '', onChange: (e) => update('schemaType', e.target.value), className: INPUT_CLASS, children: [_jsx("option", { value: "", children: "Select schema type..." }), SCHEMA_TYPES.map((type) => (_jsx("option", { value: type, children: type }, type)))] })] })] }));
 }
 //# sourceMappingURL=PageSettings.js.map

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

@@ -6,8 +6,8 @@ export function PageTemplates({ onNavigate }) {
     const { data, loading, error, refetch } = useApiData('/page-templates');
     const templates = data ?? [];
     if (loading) {
-        return (_jsxs("div", { className: "flex h-64 items-center justify-center p-4", role: "status", "aria-live": "polite", children: [_jsx(Loader2, { className: "h-6 w-6 animate-spin text-primary" }), _jsx("span", { className: "sr-only", children: "Loading page templates" })] }));
+        return (_jsxs("div", { className: "flex h-64 items-center justify-center p-4", role: "status", "aria-live": "polite", children: [_jsx(Loader2, { className: "text-primary h-6 w-6 animate-spin" }), _jsx("span", { className: "sr-only", children: "Loading page templates" })] }));
     }
-    return (_jsxs("div", { className: "p-4 pr-8", children: [error && (_jsxs("div", { className: "mb-4 flex items-center gap-3 rounded-lg border border-border bg-card p-3", children: [_jsx(AlertTriangle, { className: "h-5 w-5 shrink-0 text-muted-foreground" }), _jsx("span", { className: "flex-1 text-sm text-foreground", children: error }), _jsx("button", { type: "button", onClick: refetch, className: "rounded-md border border-border px-3 py-1 text-sm text-foreground hover:bg-accent", children: "Retry" })] })), _jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "mb-1 text-2xl font-medium text-foreground", children: "Page Templates" }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [templates.length, " saved template", templates.length === 1 ? '' : 's'] })] }), _jsxs("button", { type: "button", onClick: refetch, className: "inline-flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-foreground hover:bg-accent", children: [_jsx(RefreshCw, { className: "h-4 w-4" }), "Refresh"] })] }), templates.length === 0 ? (_jsxs("div", { className: "rounded-lg border border-border bg-card p-8 text-center", children: [_jsx(Layers, { className: "mx-auto mb-3 h-8 w-8 text-muted-foreground" }), _jsx("h2", { className: "mb-1 text-lg font-medium text-foreground", children: "No page templates yet" }), _jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: "Built-in templates are seeded by the CMS when the templates API is available." }), _jsx("button", { type: "button", onClick: () => onNavigate?.('/saved-sections'), className: "rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90", children: "View Saved Sections" })] })) : (_jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3", children: templates.map((template) => (_jsxs("div", { className: "rounded-lg border border-border bg-card p-4", children: [_jsxs("div", { className: "mb-3 flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-base font-medium text-foreground", children: template.name ?? 'Untitled template' }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: template.description ?? 'No description provided.' })] }), template.builtIn && (_jsx("span", { className: "rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground", children: "Built-in" }))] }), _jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [_jsx("span", { children: template.category ?? 'content' }), _jsx("span", { children: template.updatedAt ? new Date(template.updatedAt).toLocaleDateString() : '' })] })] }, template.id))) }))] }));
+    return (_jsxs("div", { className: "p-4 pr-8", children: [error && (_jsxs("div", { className: "border-border bg-card mb-4 flex items-center gap-3 rounded-lg border p-3", children: [_jsx(AlertTriangle, { className: "text-muted-foreground h-5 w-5 shrink-0" }), _jsx("span", { className: "text-foreground flex-1 text-sm", children: error }), _jsx("button", { type: "button", onClick: refetch, className: "border-border text-foreground hover:bg-accent rounded-md border px-3 py-1 text-sm", children: "Retry" })] })), _jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-foreground mb-1 text-2xl font-medium", children: "Page Templates" }), _jsxs("p", { className: "text-muted-foreground text-sm", children: [templates.length, " saved template", templates.length === 1 ? '' : 's'] })] }), _jsxs("button", { type: "button", onClick: refetch, className: "border-border text-foreground hover:bg-accent inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium", children: [_jsx(RefreshCw, { className: "h-4 w-4" }), "Refresh"] })] }), templates.length === 0 ? (_jsxs("div", { className: "border-border bg-card rounded-lg border p-8 text-center", children: [_jsx(Layers, { className: "text-muted-foreground mx-auto mb-3 h-8 w-8" }), _jsx("h2", { className: "text-foreground mb-1 text-lg font-medium", children: "No page templates yet" }), _jsx("p", { className: "text-muted-foreground mb-4 text-sm", children: "Built-in templates are seeded by the CMS when the templates API is available." }), _jsx("button", { type: "button", onClick: () => onNavigate?.('/saved-sections'), className: "bg-primary text-primary-foreground rounded-md px-4 py-2 text-sm font-medium hover:opacity-90", children: "View Saved Sections" })] })) : (_jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3", children: templates.map((template) => (_jsxs("div", { className: "border-border bg-card rounded-lg border p-4", children: [_jsxs("div", { className: "mb-3 flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-foreground text-base font-medium", children: template.name ?? 'Untitled template' }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: template.description ?? 'No description provided.' })] }), template.builtIn && (_jsx("span", { className: "bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs", children: "Built-in" }))] }), _jsxs("div", { className: "text-muted-foreground flex items-center justify-between text-sm", children: [_jsx("span", { children: template.category ?? 'content' }), _jsx("span", { children: template.updatedAt ? new Date(template.updatedAt).toLocaleDateString() : '' })] })] }, template.id))) }))] }));
 }
 //# sourceMappingURL=PageTemplates.js.map

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