@actuate-media/cms-admin 0.10.0 → 0.12.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -17,10 +17,10 @@ export function RowRenderer({ node, selectedNodeId, onSelectNode }) {
         e.stopPropagation();
         onSelectNode(node.id);
     };
-    return (_jsxs("div", { "data-node-id": node.id, className: `relative transition-shadow ${isSelected ? 'ring-2 ring-primary ring-offset-2' : hovered ? 'ring-1 ring-primary/50' : ''}`, onClick: handleClick, onMouseEnter: (e) => {
+    return (_jsxs("div", { "data-node-id": node.id, className: `relative transition-shadow ${isSelected ? 'ring-primary ring-2 ring-offset-2' : hovered ? 'ring-primary/50 ring-1' : ''}`, onClick: handleClick, onMouseEnter: (e) => {
             e.stopPropagation();
             setHovered(true);
-        }, onMouseLeave: () => setHovered(false), children: [(hovered || isSelected) && (_jsx("span", { className: "absolute -top-2 -left-1 text-xs px-1.5 py-0.5 bg-primary text-primary-foreground rounded font-medium z-10", children: "Row" })), _jsx("div", { className: "grid grid-cols-12", style: {
+        }, onMouseLeave: () => setHovered(false), children: [(hovered || isSelected) && (_jsx("span", { className: "bg-primary text-primary-foreground absolute -top-2 -left-1 z-10 rounded px-1.5 py-0.5 text-xs font-medium", children: "Row" })), _jsx("div", { className: "grid grid-cols-12", style: {
                     gap,
                     alignItems: alignMap[verticalAlign] ?? 'stretch',
                 }, children: node.children.map((col) => (_jsx(ColumnRenderer, { node: col, selectedNodeId: selectedNodeId, onSelectNode: onSelectNode }, col.id))) })] }));

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

@@ -34,10 +34,10 @@ export function SectionRenderer({ node, selectedNodeId, onSelectNode }) {
     if (node.settings.marginBottom) {
         backgroundStyle.marginBottom = node.settings.marginBottom;
     }
-    return (_jsxs("div", { "data-node-id": node.id, className: `relative w-full transition-shadow ${isSelected ? 'ring-2 ring-primary ring-offset-2' : hovered ? 'ring-1 ring-primary/50' : ''}`, style: backgroundStyle, onClick: handleClick, onMouseEnter: (e) => {
+    return (_jsxs("div", { "data-node-id": node.id, className: `relative w-full transition-shadow ${isSelected ? 'ring-primary ring-2 ring-offset-2' : hovered ? 'ring-primary/50 ring-1' : ''}`, style: backgroundStyle, onClick: handleClick, onMouseEnter: (e) => {
             e.stopPropagation();
             setHovered(true);
-        }, onMouseLeave: () => setHovered(false), children: [(hovered || isSelected) && (_jsx("span", { className: "absolute -top-2 -left-1 text-xs px-1.5 py-0.5 bg-primary text-primary-foreground rounded font-medium z-10", children: "Section" })), node.children.map((child) => {
+        }, onMouseLeave: () => setHovered(false), children: [(hovered || isSelected) && (_jsx("span", { className: "bg-primary text-primary-foreground absolute -top-2 -left-1 z-10 rounded px-1.5 py-0.5 text-xs font-medium", children: "Section" })), node.children.map((child) => {
                 if (child.type === 'container') {
                     return (_jsx(ContainerRenderer, { node: child, selectedNodeId: selectedNodeId, onSelectNode: onSelectNode }, child.id));
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actuate-media/cms-admin",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/actuate-media/actuatecms.git",
@@ -62,20 +62,31 @@
     "tailwind-merge": "^3.5.0"
   },
   "peerDependencies": {
-    "@actuate-media/cms-core": ">=0.1.0"
+    "@actuate-media/cms-core": ">=0.1.0",
+    "@actuate-media/component-blocks": ">=0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@actuate-media/component-blocks": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "concurrently": "^9.2.1",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.7.0",
     "vitest": "^3.0.0",
-    "@actuate-media/cms-core": "0.19.0"
+    "@actuate-media/cms-core": "0.21.0",
+    "@actuate-media/component-blocks": "0.2.0"
   },
   "scripts": {
     "build": "tsc --project tsconfig.json && npx @tailwindcss/cli -i src/styles/build-input.css -o dist/actuate-admin.css --minify",
     "build:css": "npx @tailwindcss/cli -i src/styles/build-input.css -o dist/actuate-admin.css --minify",
+    "dev": "concurrently -n tsc,css -c blue,magenta \"pnpm run dev:tsc\" \"pnpm run dev:css\"",
+    "dev:tsc": "tsc --project tsconfig.json --watch --preserveWatchOutput",
+    "dev:css": "npx @tailwindcss/cli -i src/styles/build-input.css -o dist/actuate-admin.css --watch",
     "type-check": "tsc --noEmit",
     "test": "vitest run",
     "clean": "rm -rf dist .turbo"

package/src/AdminRoot.tsx

@@ -143,13 +143,23 @@ function AdminShell({
     }
 
     if (onLogin) {
-      return <Login onLogin={onLogin} onNavigate={navigate} captchaConfig={captchaConfig} />
+      // Thread `config.admin.branding` through so the login screen matches the
+      // sidebar (single source of truth for the logo + brand name).
+      const branding = config?.admin?.branding
+      return (
+        <Login
+          onLogin={onLogin}
+          onNavigate={navigate}
+          captchaConfig={captchaConfig}
+          branding={branding}
+        />
+      )
     }
     return (
-      <div className="min-h-screen flex items-center justify-center bg-background">
+      <div className="bg-background flex min-h-screen items-center justify-center">
         <div className="text-center">
-          <h1 className="text-xl font-semibold text-foreground mb-2">Unauthorized</h1>
-          <p className="text-sm text-muted-foreground">Please log in to access the admin panel.</p>
+          <h1 className="text-foreground mb-2 text-xl font-semibold">Unauthorized</h1>
+          <p className="text-muted-foreground text-sm">Please log in to access the admin panel.</p>
         </div>
       </div>
     )
@@ -331,12 +341,12 @@ function AdminShell({
     }
 
     return (
-      <div className="flex flex-col items-center justify-center min-h-[400px] text-center p-6">
-        <h1 className="text-4xl font-bold text-foreground mb-2">404</h1>
+      <div className="flex min-h-[400px] flex-col items-center justify-center p-6 text-center">
+        <h1 className="text-foreground mb-2 text-4xl font-bold">404</h1>
         <p className="text-muted-foreground mb-4">The page you are looking for does not exist.</p>
         <button
           onClick={() => navigate('/')}
-          className="px-4 py-2 text-sm font-medium text-primary-foreground bg-primary rounded-md hover:opacity-90"
+          className="text-primary-foreground bg-primary rounded-md px-4 py-2 text-sm font-medium hover:opacity-90"
         >
           Back to Dashboard
         </button>
@@ -360,8 +370,8 @@ function ShortcutHelp({ onClose }: { onClose: () => void }) {
         if (e.target === e.currentTarget) onClose()
       }}
     >
-      <div className="bg-card text-card-foreground rounded-xl shadow-2xl border border-border p-6 max-w-sm w-full mx-4">
-        <h3 className="text-lg font-semibold mb-4">Keyboard Shortcuts</h3>
+      <div className="bg-card text-card-foreground border-border mx-4 w-full max-w-sm rounded-xl border p-6 shadow-2xl">
+        <h3 className="mb-4 text-lg font-semibold">Keyboard Shortcuts</h3>
         <div className="space-y-3 text-sm">
           {[
             ['⌘ K', 'Open search'],
@@ -371,13 +381,13 @@ function ShortcutHelp({ onClose }: { onClose: () => void }) {
           ].map(([key, desc]) => (
             <div key={key} className="flex items-center justify-between">
               <span className="text-muted-foreground">{desc}</span>
-              <kbd className="px-2 py-1 text-xs font-mono bg-muted rounded">{key}</kbd>
+              <kbd className="bg-muted rounded px-2 py-1 font-mono text-xs">{key}</kbd>
             </div>
           ))}
         </div>
         <button
           onClick={onClose}
-          className="mt-4 w-full py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:opacity-90"
+          className="bg-primary text-primary-foreground mt-4 w-full rounded-lg py-2 text-sm hover:opacity-90"
         >
           Close
         </button>