@actuate-media/cms-admin 0.10.0 → 0.11.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.11.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/actuate-media/actuatecms.git",
@@ -68,14 +68,18 @@
     "@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.20.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>

package/src/__tests__/layout/primitives.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest'
+import { tokens } from '../../layout/primitives/tokens.js'
+import * as primitives from '../../layout/primitives/index.js'
+
+describe('layout primitive tokens', () => {
+  it('exposes the canonical spacing scale', () => {
+    expect(tokens.space['0']).toBe(0)
+    expect(tokens.space['1']).toBe(4)
+    expect(tokens.space['4']).toBe(16)
+    expect(tokens.space['8']).toBe(32)
+  })
+
+  it('exposes the canonical radius scale', () => {
+    expect(tokens.radius.none).toBe(0)
+    expect(tokens.radius.md).toBe(6)
+    expect(tokens.radius.full).toBe(9999)
+  })
+
+  it('exposes the canonical breakpoint scale', () => {
+    expect(tokens.breakpoint.sm).toBe(640)
+    expect(tokens.breakpoint.md).toBe(768)
+    expect(tokens.breakpoint.lg).toBe(1024)
+  })
+})
+
+describe('layout primitives exports', () => {
+  it('re-exports every public primitive', () => {
+    expect(typeof primitives.AdminShell).toBe('function')
+    expect(typeof primitives.PageContainer).toBe('function')
+    expect(typeof primitives.Stack).toBe('function')
+    expect(typeof primitives.Cluster).toBe('function')
+    expect(typeof primitives.Grid).toBe('function')
+    expect(typeof primitives.Split).toBe('function')
+    expect(typeof primitives.Box).toBe('object')
+    expect(typeof primitives.tokens).toBe('object')
+  })
+})

package/src/__tests__/lib/cv.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest'
+import { cv } from '../../lib/cv.js'
+
+describe('cv()', () => {
+  const button = cv('inline-flex items-center', {
+    variants: {
+      intent: {
+        primary: 'bg-primary text-white',
+        secondary: 'bg-secondary text-foreground',
+      },
+      size: {
+        sm: 'px-2 py-1 text-xs',
+        md: 'px-4 py-2 text-sm',
+        lg: 'px-6 py-3 text-base',
+      },
+    },
+    defaultVariants: { intent: 'primary', size: 'md' },
+  })
+
+  it('returns the base class and default variant classes when no props supplied', () => {
+    const out = button()
+    expect(out).toContain('inline-flex')
+    expect(out).toContain('bg-primary')
+    expect(out).toContain('text-white')
+    expect(out).toContain('px-4 py-2 text-sm')
+  })
+
+  it('overrides default variants when explicit values are supplied', () => {
+    const out = button({ intent: 'secondary', size: 'sm' })
+    expect(out).toContain('bg-secondary')
+    expect(out).toContain('text-foreground')
+    expect(out).toContain('px-2 py-1 text-xs')
+    expect(out).not.toContain('bg-primary')
+  })
+
+  it('appends the `class` escape hatch', () => {
+    const out = button({ class: 'shadow-md' })
+    expect(out).toContain('shadow-md')
+  })
+
+  it('appends the `className` escape hatch', () => {
+    const out = button({ className: 'rounded-full' })
+    expect(out).toContain('rounded-full')
+  })
+
+  it('applies compound variants when their match criteria are satisfied', () => {
+    const card = cv('rounded-md', {
+      variants: {
+        tone: { neutral: 'bg-gray-100', danger: 'bg-red-100' },
+        emphasis: { low: 'border', high: 'border-2' },
+      },
+      defaultVariants: { tone: 'neutral', emphasis: 'low' },
+      compoundVariants: [{ tone: 'danger', emphasis: 'high', class: 'ring-2 ring-red-500' }],
+    })
+
+    expect(card({ tone: 'danger', emphasis: 'high' })).toContain('ring-2 ring-red-500')
+    expect(card({ tone: 'danger', emphasis: 'low' })).not.toContain('ring-2')
+    expect(card({ tone: 'neutral', emphasis: 'high' })).not.toContain('ring-2')
+  })
+
+  it('applies compound variants with array (any-of) matching', () => {
+    const alert = cv('alert', {
+      variants: {
+        tone: { info: 'bg-blue-50', warn: 'bg-amber-50', danger: 'bg-red-50' },
+      },
+      defaultVariants: { tone: 'info' },
+      compoundVariants: [{ tone: ['warn', 'danger'], class: 'font-medium' }],
+    })
+
+    expect(alert({ tone: 'warn' })).toContain('font-medium')
+    expect(alert({ tone: 'danger' })).toContain('font-medium')
+    expect(alert({ tone: 'info' })).not.toContain('font-medium')
+  })
+})

package/src/assets/actuate-logo.tsx

@@ -0,0 +1,72 @@
+/**
+ * Default Actuate Media brand logo for the admin sidebar (top-left) and the
+ * login screen.
+ *
+ * Source: the official 2021 Actuate Media SVG. The original asset has a
+ * 1000×800 viewBox with a white background polygon and the artwork
+ * concentrated in the middle band — we strip the white polygon so the logo
+ * is transparent on any surface, and crop the viewBox to the actual content
+ * bounds so `h-9 w-auto` renders at a sensible aspect ratio instead of
+ * leaving 60% empty space.
+ *
+ * Integrators override this default via:
+ *   defineConfig({
+ *     admin: { branding: { logo: '/my-logo.svg', name: 'Acme' } }
+ *   })
+ *
+ * Both the sidebar (top-left) and the login screen read from the same
+ * `admin.branding` config so swapping logos is a one-line change.
+ */
+
+import type { ReactElement } from 'react'
+
+export interface BrandLogoProps {
+  /** Tailwind / CSS class applied to the root `<svg>` element. */
+  className?: string
+}
+
+/**
+ * Inline SVG renderer for the official Actuate Media lockup. Transparent
+ * background, scales cleanly at any size, and ships as JSX (no bundler asset
+ * pipeline required — works under Next.js, Vite, Webpack, esbuild, etc.).
+ *
+ * Colour palette is baked into the path fills so the logo stays on-brand
+ * regardless of the surrounding theme:
+ *   - Coral / red `#F05E65` for the "C" mark + ACTUATE wordmark
+ *   - Neutral grey `#818386` for the MEDIA sub-line
+ */
+export function ActuateBrandLogo({ className }: BrandLogoProps): ReactElement {
+  return (
+    <svg
+      viewBox="160 250 730 290"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      role="img"
+      aria-label="Actuate Media"
+      style={{ shapeRendering: 'geometricPrecision' }}
+    >
+      {/* "C" mark: upward arrow + three vertical bars (coral) */}
+      <polygon
+        fill="#F05E65"
+        fillRule="nonzero"
+        points="253,266 167,433 196,433 253,323 309,433 339,433"
+      />
+      <path
+        fill="#F05E65"
+        d="M216 433l16 0 0 59 -16 0 0 -59zm57 0l17 0 0 59 -17 0 0 -59zm-28 0l16 0 0 101 -16 0 0 -101z"
+      />
+      {/* "MEDIA" subtitle (neutral grey) */}
+      <path
+        fill="#818386"
+        fillRule="nonzero"
+        d="M707 447l-12 0 6 -14 6 14zm-241 -11l0 25 6 0 0 -35 -7 0 -11 17 -10 -17 -7 0 0 35 6 0 0 -25 11 17 1 0 11 -17zm70 -10l-26 0 0 35 26 0 0 -5 -20 0 0 -10 20 0 0 -5 -20 0 0 -10 20 0 0 -5zm62 18c0,1 0,3 -1,5 0,1 -1,2 -2,3 -1,1 -3,2 -4,3 -2,1 -3,1 -5,1l-7 0 0 -25 7 0c2,0 3,1 5,1 1,1 3,2 4,3 1,1 2,2 2,4 1,1 1,3 1,5zm7 0c0,-3 -1,-5 -2,-7 -1,-3 -2,-5 -4,-6 -1,-2 -3,-3 -6,-4 -2,-1 -5,-1 -7,-1l-14 0 0 35 14 0c2,0 5,0 7,-1 3,-1 5,-2 6,-4 2,-1 3,-3 4,-5 1,-3 2,-5 2,-7zm36 -18l0 35 6 0 0 -35 -6 0zm63 0l-6 0 -16 35 7 0 3 -8 17 0 4 8 7 0 -16 -35z"
+      />
+      {/* "ACTUATE" main wordmark (coral) */}
+      <path
+        fill="#F05E65"
+        fillRule="nonzero"
+        d="M406 386l-10 -10c-4,3 -7,6 -11,8 -4,2 -8,3 -13,3 -5,0 -8,-1 -12,-2 -3,-2 -6,-4 -9,-7 -2,-3 -4,-6 -6,-10 -1,-3 -2,-7 -2,-12 0,-4 1,-8 2,-11 2,-4 4,-7 6,-10 3,-3 6,-5 9,-7 4,-1 7,-2 12,-2 4,0 9,1 13,3 3,2 7,5 11,8l9 -11c-2,-2 -4,-4 -6,-6 -3,-1 -5,-3 -8,-4 -2,-1 -5,-2 -9,-3 -3,0 -6,-1 -10,-1 -7,0 -13,1 -18,4 -6,2 -10,5 -14,9 -4,4 -7,9 -9,14 -2,6 -4,12 -4,18 0,6 2,12 4,17 2,5 5,10 9,14 4,4 8,7 14,9 5,3 11,4 17,4 4,0 8,0 11,-1 3,-1 6,-2 9,-3 3,-2 5,-3 8,-5 2,-2 5,-4 7,-6zm230 -73l-45 86 16 0 29 -57 29 57 15 0 -44 -86zm197 1l-63 0 0 85 63 0 0 -13 -48 0 0 -23 48 0 0 -14 -48 0 0 -22 48 0 0 -13zm-110 14l27 0 0 -14 -70 0 0 14 28 0 0 71 15 0 0 -71zm-140 -14l-15 0 0 49c0,8 -2,14 -6,18 -4,4 -9,6 -16,6 -7,0 -12,-2 -16,-6 -4,-4 -6,-11 -6,-19l0 -48 -15 0 0 49c0,6 1,12 3,16 2,5 4,9 7,12 3,3 7,6 12,7 4,2 9,3 15,3 5,0 11,-1 15,-3 5,-1 8,-4 12,-7 3,-3 5,-7 7,-12 2,-5 3,-10 3,-17l0 -48zm-118 14l27 0 0 -14 -69 0 0 14 27 0 0 71 15 0 0 -71z"
+      />
+    </svg>
+  )
+}