foundrycms 0.1.0

package/dist/page-builder/template-studio.js

@@ -0,0 +1,923 @@
+// ---------------------------------------------------------------------------
+// TemplateStudio class
+// ---------------------------------------------------------------------------
+export class TemplateStudio {
+    templates = new Map();
+    register(template) {
+        if (this.templates.has(template.id)) {
+            throw new Error(`Template "${template.id}" is already registered.`);
+        }
+        this.templates.set(template.id, template);
+    }
+    get(id) {
+        return this.templates.get(id);
+    }
+    list() {
+        return Array.from(this.templates.values());
+    }
+    listByCategory(category) {
+        return this.list().filter((t) => t.category === category);
+    }
+    search(query) {
+        const q = query.toLowerCase();
+        return this.list().filter((t) => {
+            if (t.name.toLowerCase().includes(q))
+                return true;
+            if (t.description.toLowerCase().includes(q))
+                return true;
+            if (t.category.toLowerCase().includes(q))
+                return true;
+            if (t.id.toLowerCase().includes(q))
+                return true;
+            return false;
+        });
+    }
+    unregister(id) {
+        return this.templates.delete(id);
+    }
+    has(id) {
+        return this.templates.has(id);
+    }
+    get count() {
+        return this.templates.size;
+    }
+}
+// ---------------------------------------------------------------------------
+// Helper: generate unique IDs for template content
+// ---------------------------------------------------------------------------
+let _counter = 0;
+function tid(prefix) {
+    _counter++;
+    return `tpl-${prefix}-${_counter}`;
+}
+// ---------------------------------------------------------------------------
+// 10 Starter Templates
+// ---------------------------------------------------------------------------
+export const heroSplitTemplate = {
+    id: 'hero-split',
+    name: 'Hero Split',
+    category: 'hero',
+    description: 'Split layout hero section with heading and CTA on the left, image on the right',
+    content: [
+        {
+            id: tid('row'),
+            type: 'row',
+            settings: {
+                layout: 'boxed',
+                paddingTop: '6rem',
+                paddingBottom: '6rem',
+                gap: '3rem',
+            },
+            columns: [
+                {
+                    id: tid('col'),
+                    width: '1/2',
+                    settings: { verticalAlign: 'center' },
+                    elements: [
+                        {
+                            id: tid('el'),
+                            type: 'heading',
+                            settings: {
+                                text: 'Build beautiful websites without the complexity',
+                                level: 'h1',
+                                fontSize: '3rem',
+                                fontWeight: '800',
+                                color: '#111827',
+                            },
+                        },
+                        {
+                            id: tid('el'),
+                            type: 'text-block',
+                            settings: {
+                                content: '<p class="text-xl text-gray-600">Create stunning, professional websites in minutes with our intuitive drag-and-drop builder. No coding required.</p>',
+                            },
+                        },
+                        {
+                            id: tid('el'),
+                            type: 'button',
+                            settings: {
+                                text: 'Get Started Free',
+                                url: '#signup',
+                                variant: 'primary',
+                                size: 'lg',
+                            },
+                        },
+                    ],
+                },
+                {
+                    id: tid('col'),
+                    width: '1/2',
+                    settings: { verticalAlign: 'center' },
+                    elements: [
+                        {
+                            id: tid('el'),
+                            type: 'image',
+                            settings: {
+                                src: '/images/hero-illustration.png',
+                                alt: 'Platform dashboard preview',
+                                width: '100%',
+                                borderRadius: '1rem',
+                                objectFit: 'cover',
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+};
+export const aboutTeamTemplate = {
+    id: 'about-team',
+    name: 'About Team',
+    category: 'about',
+    description: 'About section introducing the team with a grid of member cards',
+    content: [
+        {
+            id: tid('row'),
+            type: 'row',
+            settings: {
+                layout: 'boxed',
+                paddingTop: '5rem',
+                paddingBottom: '5rem',
+            },
+            columns: [
+                {
+                    id: tid('col'),
+                    width: '1/1',
+                    settings: {},
+                    elements: [
+                        {
+                            id: tid('el'),
+                            type: 'heading',
+                            settings: {
+                                text: 'Meet Our Team',
+                                level: 'h2',
+                                alignment: 'center',
+                                fontSize: '2.5rem',
+                                fontWeight: '700',
+                            },
+                        },
+                        {
+                            id: tid('el'),
+                            type: 'text-block',
+                            settings: {
+                                content: '<p class="text-center text-gray-600 max-w-2xl mx-auto">We are a passionate group of designers, developers, and strategists dedicated to helping you succeed online.</p>',
+                                alignment: 'center',
+                            },
+                        },
+                        {
+                            id: tid('el'),
+                            type: 'spacer',
+                            settings: { height: '2rem' },
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            id: tid('row'),
+            type: 'row',
+            settings: {
+                layout: 'boxed',
+                paddingBottom: '3rem',
+                gap: '2rem',
+            },
+            columns: [
+                {
+                    id: tid('col'),
+                    width: '1/3',
+                    settings: {},
+                    elements: [
+                        {
+                            id: tid('el'),
+                            type: 'image',
+                            settings: { src: '/images/team/member-1.jpg', alt: 'Sarah Chen', borderRadius: '50%', width: '150px', height: '150px', alignment: 'center' },
+                        },
+                        { id: tid('el'), type: 'heading', settings: { text: 'Sarah Chen', level: 'h4', alignment: 'center' } },
+                        { id: tid('el'), type: 'text-block', settings: { content: '<p class="text-center text-gray-500">Lead Designer</p>', alignment: 'center' } },
+                    ],
+                },
+                {
+                    id: tid('col'),
+                    width: '1/3',
+                    settings: {},
+                    elements: [
+                        {
+                            id: tid('el'),
+                            type: 'image',
+                            settings: { src: '/images/team/member-2.jpg', alt: 'Marcus Johnson', borderRadius: '50%', width: '150px', height: '150px', alignment: 'center' },
+                        },
+                        { id: tid('el'), type: 'heading', settings: { text: 'Marcus Johnson', level: 'h4', alignment: 'center' } },
+                        { id: tid('el'), type: 'text-block', settings: { content: '<p class="text-center text-gray-500">Senior Developer</p>', alignment: 'center' } },
+                    ],
+                },
+                {
+                    id: tid('col'),
+                    width: '1/3',
+                    settings: {},
+                    elements: [
+                        {
+                            id: tid('el'),
+                            type: 'image',
+                            settings: { src: '/images/team/member-3.jpg', alt: 'Aisha Patel', borderRadius: '50%', width: '150px', height: '150px', alignment: 'center' },
+                        },
+                        { id: tid('el'), type: 'heading', settings: { text: 'Aisha Patel', level: 'h4', alignment: 'center' } },
+                        { id: tid('el'), type: 'text-block', settings: { content: '<p class="text-center text-gray-500">Product Strategist</p>', alignment: 'center' } },
+                    ],
+                },
+            ],
+        },
+    ],
+};
+export const servicesCardsTemplate = {
+    id: 'services-cards',
+    name: 'Services Cards',
+    category: 'services',
+    description: '3-column service cards with icons, titles, and descriptions',
+    content: [
+        {
+            id: tid('row'),
+            type: 'row',
+            settings: {
+                layout: 'boxed',
+                paddingTop: '5rem',
+                paddingBottom: '2rem',
+            },
+            columns: [
+                {
+                    id: tid('col'),
+                    width: '1/1',
+                    settings: {},
+                    elements: [
+                        {
+                            id: tid('el'),
+                            type: 'heading',
+                            settings: { text: 'Our Services', level: 'h2', alignment: 'center', fontSize: '2.5rem', fontWeight: '700' },
+                        },
+                        {
+                            id: tid('el'),
+                            type: 'text-block',
+                            settings: { content: '<p class="text-center text-gray-600 max-w-2xl mx-auto">Everything you need to establish and grow your online presence.</p>', alignment: 'center' },
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            id: tid('row'),
+            type: 'row',
+            settings: {
+                layout: 'boxed',
+                paddingTop: '2rem',
+                paddingBottom: '5rem',
+                gap: '2rem',
+            },
+            columns: [
+                {
+                    id: tid('col'),
+                    width: '1/3',
+                    settings: { padding: '2rem', className: 'bg-white rounded-xl shadow-md border border-gray-100' },
+                    elements: [
+                        { id: tid('el'), type: 'icon', settings: { name: '🎨', size: '3rem', alignment: 'left' } },
+                        { id: tid('el'), type: 'heading', settings: { text: 'Web Design', level: 'h3', fontSize: '1.25rem' } },
+                        { id: tid('el'), type: 'text-block', settings: { content: '<p class="text-gray-600">Custom, responsive designs that capture your brand identity and engage your audience from the first pixel.</p>' } },
+                    ],
+                },
+                {
+                    id: tid('col'),
+                    width: '1/3',
+                    settings: { padding: '2rem', className: 'bg-white rounded-xl shadow-md border border-gray-100' },
+                    elements: [
+                        { id: tid('el'), type: 'icon', settings: { name: '⚡', size: '3rem', alignment: 'left' } },
+                        { id: tid('el'), type: 'heading', settings: { text: 'Development', level: 'h3', fontSize: '1.25rem' } },
+                        { id: tid('el'), type: 'text-block', settings: { content: '<p class="text-gray-600">Fast, scalable web applications built with modern technologies. From landing pages to complex platforms.</p>' } },
+                    ],
+                },
+                {
+                    id: tid('col'),
+                    width: '1/3',
+                    settings: { padding: '2rem', className: 'bg-white rounded-xl shadow-md border border-gray-100' },
+                    elements: [
+                        { id: tid('el'), type: 'icon', settings: { name: '📈', size: '3rem', alignment: 'left' } },
+                        { id: tid('el'), type: 'heading', settings: { text: 'SEO & Marketing', level: 'h3', fontSize: '1.25rem' } },
+                        { id: tid('el'), type: 'text-block', settings: { content: '<p class="text-gray-600">Data-driven strategies to boost your search rankings, drive organic traffic, and convert visitors into customers.</p>' } },
+                    ],
+                },
+            ],
+        },
+    ],
+};
+export const pricingThreeTierTemplate = {
+    id: 'pricing-three-tier',
+    name: 'Pricing Three Tier',
+    category: 'pricing',
+    description: 'Three pricing cards with the middle plan highlighted as most popular',
+    content: [
+        {
+            id: tid('row'),
+            type: 'row',
+            settings: { layout: 'boxed', paddingTop: '5rem', paddingBottom: '2rem' },
+            columns: [
+                {
+                    id: tid('col'),
+                    width: '1/1',
+                    settings: {},
+                    elements: [
+                        { id: tid('el'), type: 'heading', settings: { text: 'Simple, Transparent Pricing', level: 'h2', alignment: 'center', fontSize: '2.5rem', fontWeight: '700' } },
+                        { id: tid('el'), type: 'text-block', settings: { content: '<p class="text-center text-gray-600 max-w-xl mx-auto">Choose the plan that fits your needs. Upgrade or downgrade at any time.</p>', alignment: 'center' } },
+                    ],
+                },
+            ],
+        },
+        {
+            id: tid('row'),
+            type: 'row',
+            settings: { layout: 'boxed', paddingTop: '2rem', paddingBottom: '5rem', gap: '2rem' },
+            columns: [
+                {
+                    id: tid('col'),
+                    width: '1/3',
+                    settings: { verticalAlign: 'center' },
+                    elements: [
+                        {
+                            id: tid('el'),
+                            type: 'pricing-table',
+                            settings: {
+                                name: 'Starter',
+                                price: '$9',
+                                period: '/month',
+                                description: 'Perfect for personal projects',
+                                features: [
+                                    { text: '1 website', included: true },
+                                    { text: '10GB storage', included: true },
+                                    { text: 'Custom domain', included: true },
+                                    { text: 'Priority support', included: false },
+                                    { text: 'Analytics', included: false },
+                                ],
+                                buttonText: 'Start Free Trial',
+                                buttonUrl: '#',
+                                highlighted: false,
+                            },
+                        },
+                    ],
+                },
+                {
+                    id: tid('col'),
+                    width: '1/3',
+                    settings: { verticalAlign: 'center' },
+                    elements: [
+                        {
+                            id: tid('el'),
+                            type: 'pricing-table',
+                            settings: {
+                                name: 'Professional',
+                                price: '$29',
+                                period: '/month',
+                                description: 'Best for growing businesses',
+                                features: [
+                                    { text: '10 websites', included: true },
+                                    { text: '100GB storage', included: true },
+                                    { text: 'Custom domain', included: true },
+                                    { text: 'Priority support', included: true },
+                                    { text: 'Analytics dashboard', included: true },
+                                ],
+                                buttonText: 'Start Free Trial',
+                                buttonUrl: '#',
+                                highlighted: true,
+                                highlightLabel: 'Most Popular',
+                            },
+                        },
+                    ],
+                },
+                {
+                    id: tid('col'),
+                    width: '1/3',
+                    settings: { verticalAlign: 'center' },
+                    elements: [
+                        {
+                            id: tid('el'),
+                            type: 'pricing-table',
+                            settings: {
+                                name: 'Enterprise',
+                                price: '$99',
+                                period: '/month',
+                                description: 'For teams and agencies',
+                                features: [
+                                    { text: 'Unlimited websites', included: true },
+                                    { text: '1TB storage', included: true },
+                                    { text: 'Custom domains', included: true },
+                                    { text: 'Priority support', included: true },
+                                    { text: 'Advanced analytics', included: true },
+                                ],
+                                buttonText: 'Contact Sales',
+                                buttonUrl: '#contact',
+                                highlighted: false,
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+};
+export const testimonialsCarouselTemplate = {
+    id: 'testimonials-carousel',
+    name: 'Testimonials Carousel',
+    category: 'testimonials',
+    description: 'Row of testimonial cards showing customer reviews with ratings',
+    content: [
+        {
+            id: tid('row'),
+            type: 'row',
+            settings: { layout: 'boxed', paddingTop: '5rem', paddingBottom: '2rem' },
+            columns: [
+                {
+                    id: tid('col'),
+                    width: '1/1',
+                    settings: {},
+                    elements: [
+                        { id: tid('el'), type: 'heading', settings: { text: 'What Our Customers Say', level: 'h2', alignment: 'center', fontSize: '2.5rem', fontWeight: '700' } },
+                    ],
+                },
+            ],
+        },
+        {
+            id: tid('row'),
+            type: 'row',
+            settings: { layout: 'boxed', paddingTop: '1rem', paddingBottom: '5rem', gap: '2rem' },
+            columns: [
+                {
+                    id: tid('col'),
+                    width: '1/3',
+                    settings: {},
+                    elements: [
+                        {
+                            id: tid('el'),
+                            type: 'testimonial',
+                            settings: {
+                                text: 'Foundry replaced three tools we were paying for. The page builder is incredibly intuitive and the results look professional.',
+                                authorName: 'David Park',
+                                authorTitle: 'Founder, Parkside Digital',
+                                authorImage: '/images/testimonials/david.jpg',
+                                rating: 5,
+                                variant: 'card',
+                            },
+                        },
+                    ],
+                },
+                {
+                    id: tid('col'),
+                    width: '1/3',
+                    settings: {},
+                    elements: [
+                        {
+                            id: tid('el'),
+                            type: 'testimonial',
+                            settings: {
+                                text: 'We migrated from WordPress and the difference is night and day. Faster, cleaner, and our team actually enjoys using it.',
+                                authorName: 'Emily Rodriguez',
+                                authorTitle: 'Marketing Director, Bloom & Co',
+                                authorImage: '/images/testimonials/emily.jpg',
+                                rating: 5,
+                                variant: 'card',
+                            },
+                        },
+                    ],
+                },
+                {
+                    id: tid('col'),
+                    width: '1/3',
+                    settings: {},
+                    elements: [
+                        {
+                            id: tid('el'),
+                            type: 'testimonial',
+                            settings: {
+                                text: 'Outstanding support team and a product that just works. We launched our new site in two days instead of two months.',
+                                authorName: 'James Mitchell',
+                                authorTitle: 'CTO, Nexus Labs',
+                                authorImage: '/images/testimonials/james.jpg',
+                                rating: 5,
+                                variant: 'card',
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+};
+export const ctaBannerTemplate = {
+    id: 'cta-banner',
+    name: 'CTA Banner',
+    category: 'cta',
+    description: 'Full-width call-to-action banner with gradient background',
+    content: [
+        {
+            id: tid('row'),
+            type: 'row',
+            settings: {
+                layout: 'boxed',
+                paddingTop: '3rem',
+                paddingBottom: '3rem',
+            },
+            columns: [
+                {
+                    id: tid('col'),
+                    width: '1/1',
+                    settings: {},
+                    elements: [
+                        {
+                            id: tid('el'),
+                            type: 'call-to-action',
+                            settings: {
+                                heading: 'Start building your dream website today',
+                                subheading: 'Join over 10,000 businesses that trust Foundry to power their online presence. Free 14-day trial, no credit card required.',
+                                buttonText: 'Start Your Free Trial',
+                                buttonUrl: '#signup',
+                                alignment: 'center',
+                                backgroundColor: '#1e3a5f',
+                                textColor: '#ffffff',
+                                buttonVariant: 'light',
+                                padding: '4rem 3rem',
+                                borderRadius: '1.5rem',
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+};
+export const contactFormTemplate = {
+    id: 'contact-form',
+    name: 'Contact Form',
+    category: 'contact',
+    description: 'Contact section with information on the left and a form layout on the right',
+    content: [
+        {
+            id: tid('row'),
+            type: 'row',
+            settings: {
+                layout: 'boxed',
+                paddingTop: '5rem',
+                paddingBottom: '5rem',
+                gap: '3rem',
+            },
+            columns: [
+                {
+                    id: tid('col'),
+                    width: '1/2',
+                    settings: { verticalAlign: 'center' },
+                    elements: [
+                        { id: tid('el'), type: 'heading', settings: { text: 'Get in Touch', level: 'h2', fontSize: '2.5rem', fontWeight: '700' } },
+                        {
+                            id: tid('el'),
+                            type: 'text-block',
+                            settings: {
+                                content: `<p class="text-gray-600 text-lg">Have a question or ready to start your project? We would love to hear from you. Fill out the form and our team will get back to you within 24 hours.</p>
+<div class="mt-6 space-y-4">
+  <div class="flex items-center gap-3"><span class="text-2xl">📍</span><span class="text-gray-700">123 Business Ave, Suite 100, San Francisco, CA 94102</span></div>
+  <div class="flex items-center gap-3"><span class="text-2xl">📧</span><a href="mailto:hello@example.com" class="text-blue-600 hover:underline">hello@example.com</a></div>
+  <div class="flex items-center gap-3"><span class="text-2xl">📞</span><a href="tel:+1234567890" class="text-blue-600 hover:underline">(123) 456-7890</a></div>
+</div>`,
+                            },
+                        },
+                    ],
+                },
+                {
+                    id: tid('col'),
+                    width: '1/2',
+                    settings: { padding: '2.5rem', className: 'bg-gray-50 rounded-2xl' },
+                    elements: [
+                        {
+                            id: tid('el'),
+                            type: 'text-block',
+                            settings: {
+                                content: `<form class="space-y-5">
+  <div class="grid grid-cols-2 gap-4">
+    <div>
+      <label class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
+      <input type="text" placeholder="John" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none" />
+    </div>
+    <div>
+      <label class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
+      <input type="text" placeholder="Doe" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none" />
+    </div>
+  </div>
+  <div>
+    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+    <input type="email" placeholder="john@example.com" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none" />
+  </div>
+  <div>
+    <label class="block text-sm font-medium text-gray-700 mb-1">Message</label>
+    <textarea rows="4" placeholder="Tell us about your project..." class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none resize-none"></textarea>
+  </div>
+  <button type="submit" class="w-full bg-blue-600 text-white font-semibold py-3 rounded-lg hover:bg-blue-700 transition-colors">Send Message</button>
+</form>`,
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+};
+export const footerMultiColumnTemplate = {
+    id: 'footer-multi-column',
+    name: 'Footer Multi-Column',
+    category: 'footer',
+    description: 'Multi-column footer with brand info, navigation links, and social icons',
+    content: [
+        {
+            id: tid('row'),
+            type: 'row',
+            settings: {
+                layout: 'boxed',
+                paddingTop: '4rem',
+                paddingBottom: '2rem',
+                gap: '2rem',
+                background: { type: 'color', color: '#111827' },
+            },
+            columns: [
+                {
+                    id: tid('col'),
+                    width: '1/3',
+                    settings: {},
+                    elements: [
+                        { id: tid('el'), type: 'heading', settings: { text: 'Foundry', level: 'h3', color: '#ffffff', fontSize: '1.5rem', fontWeight: '700' } },
+                        {
+                            id: tid('el'),
+                            type: 'text-block',
+                            settings: {
+                                content: '<p class="text-gray-400">The modern website builder for businesses that want to look professional without the complexity. Built for speed, designed for results.</p>',
+                                color: '#9ca3af',
+                            },
+                        },
+                    ],
+                },
+                {
+                    id: tid('col'),
+                    width: '1/6',
+                    settings: {},
+                    elements: [
+                        { id: tid('el'), type: 'heading', settings: { text: 'Product', level: 'h4', color: '#ffffff', fontSize: '1rem' } },
+                        {
+                            id: tid('el'),
+                            type: 'text-block',
+                            settings: {
+                                content: '<ul class="space-y-2 list-none p-0"><li><a href="#" class="text-gray-400 hover:text-white transition-colors no-underline">Features</a></li><li><a href="#" class="text-gray-400 hover:text-white transition-colors no-underline">Pricing</a></li><li><a href="#" class="text-gray-400 hover:text-white transition-colors no-underline">Templates</a></li><li><a href="#" class="text-gray-400 hover:text-white transition-colors no-underline">Integrations</a></li></ul>',
+                            },
+                        },
+                    ],
+                },
+                {
+                    id: tid('col'),
+                    width: '1/6',
+                    settings: {},
+                    elements: [
+                        { id: tid('el'), type: 'heading', settings: { text: 'Company', level: 'h4', color: '#ffffff', fontSize: '1rem' } },
+                        {
+                            id: tid('el'),
+                            type: 'text-block',
+                            settings: {
+                                content: '<ul class="space-y-2 list-none p-0"><li><a href="#" class="text-gray-400 hover:text-white transition-colors no-underline">About</a></li><li><a href="#" class="text-gray-400 hover:text-white transition-colors no-underline">Blog</a></li><li><a href="#" class="text-gray-400 hover:text-white transition-colors no-underline">Careers</a></li><li><a href="#" class="text-gray-400 hover:text-white transition-colors no-underline">Contact</a></li></ul>',
+                            },
+                        },
+                    ],
+                },
+                {
+                    id: tid('col'),
+                    width: '1/6',
+                    settings: {},
+                    elements: [
+                        { id: tid('el'), type: 'heading', settings: { text: 'Legal', level: 'h4', color: '#ffffff', fontSize: '1rem' } },
+                        {
+                            id: tid('el'),
+                            type: 'text-block',
+                            settings: {
+                                content: '<ul class="space-y-2 list-none p-0"><li><a href="#" class="text-gray-400 hover:text-white transition-colors no-underline">Privacy</a></li><li><a href="#" class="text-gray-400 hover:text-white transition-colors no-underline">Terms</a></li><li><a href="#" class="text-gray-400 hover:text-white transition-colors no-underline">Cookies</a></li><li><a href="#" class="text-gray-400 hover:text-white transition-colors no-underline">Licenses</a></li></ul>',
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            id: tid('row'),
+            type: 'row',
+            settings: {
+                layout: 'boxed',
+                paddingTop: '1.5rem',
+                paddingBottom: '2rem',
+                background: { type: 'color', color: '#111827' },
+            },
+            columns: [
+                {
+                    id: tid('col'),
+                    width: '1/1',
+                    settings: {},
+                    elements: [
+                        { id: tid('el'), type: 'divider', settings: { color: '#374151', width: '100%', thickness: '1px', style: 'solid' } },
+                        { id: tid('el'), type: 'spacer', settings: { height: '1.5rem' } },
+                        {
+                            id: tid('el'),
+                            type: 'text-block',
+                            settings: {
+                                content: '<p class="text-gray-500 text-sm text-center">&copy; 2026 Foundry. All rights reserved.</p>',
+                                alignment: 'center',
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+};
+export const galleryMasonryTemplate = {
+    id: 'gallery-masonry',
+    name: 'Gallery Masonry',
+    category: 'gallery',
+    description: 'Image gallery section with masonry-style grid and lightbox support',
+    content: [
+        {
+            id: tid('row'),
+            type: 'row',
+            settings: { layout: 'boxed', paddingTop: '5rem', paddingBottom: '2rem' },
+            columns: [
+                {
+                    id: tid('col'),
+                    width: '1/1',
+                    settings: {},
+                    elements: [
+                        { id: tid('el'), type: 'heading', settings: { text: 'Our Work', level: 'h2', alignment: 'center', fontSize: '2.5rem', fontWeight: '700' } },
+                        { id: tid('el'), type: 'text-block', settings: { content: '<p class="text-center text-gray-600 max-w-xl mx-auto">A selection of our recent projects showcasing design excellence and technical craft.</p>', alignment: 'center' } },
+                    ],
+                },
+            ],
+        },
+        {
+            id: tid('row'),
+            type: 'row',
+            settings: { layout: 'boxed', paddingTop: '2rem', paddingBottom: '5rem' },
+            columns: [
+                {
+                    id: tid('col'),
+                    width: '1/1',
+                    settings: {},
+                    elements: [
+                        {
+                            id: tid('el'),
+                            type: 'gallery',
+                            settings: {
+                                images: [
+                                    { src: '/images/gallery/project-1.jpg', alt: 'Brand identity design for tech startup', caption: 'Brand Identity' },
+                                    { src: '/images/gallery/project-2.jpg', alt: 'E-commerce platform redesign', caption: 'E-commerce Redesign' },
+                                    { src: '/images/gallery/project-3.jpg', alt: 'Mobile app UI design', caption: 'Mobile App UI' },
+                                    { src: '/images/gallery/project-4.jpg', alt: 'Corporate website build', caption: 'Corporate Website' },
+                                    { src: '/images/gallery/project-5.jpg', alt: 'SaaS dashboard interface', caption: 'SaaS Dashboard' },
+                                    { src: '/images/gallery/project-6.jpg', alt: 'Restaurant branding package', caption: 'Restaurant Branding' },
+                                ],
+                                columns: 3,
+                                gap: '1rem',
+                                borderRadius: '0.75rem',
+                                lightbox: true,
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+};
+export const featuresAlternatingTemplate = {
+    id: 'features-alternating',
+    name: 'Features Alternating',
+    category: 'features',
+    description: 'Alternating left-right feature sections with image and text',
+    content: [
+        {
+            id: tid('row'),
+            type: 'row',
+            settings: { layout: 'boxed', paddingTop: '5rem', paddingBottom: '2rem' },
+            columns: [
+                {
+                    id: tid('col'),
+                    width: '1/1',
+                    settings: {},
+                    elements: [
+                        { id: tid('el'), type: 'heading', settings: { text: 'Everything You Need', level: 'h2', alignment: 'center', fontSize: '2.5rem', fontWeight: '700' } },
+                        { id: tid('el'), type: 'text-block', settings: { content: '<p class="text-center text-gray-600 max-w-2xl mx-auto">Powerful features designed to help you build, manage, and grow your online presence.</p>', alignment: 'center' } },
+                    ],
+                },
+            ],
+        },
+        // Feature 1: text left, image right
+        {
+            id: tid('row'),
+            type: 'row',
+            settings: { layout: 'boxed', paddingTop: '3rem', paddingBottom: '3rem', gap: '3rem' },
+            columns: [
+                {
+                    id: tid('col'),
+                    width: '1/2',
+                    settings: { verticalAlign: 'center' },
+                    elements: [
+                        { id: tid('el'), type: 'icon', settings: { name: '🚀', size: '2.5rem', alignment: 'left' } },
+                        { id: tid('el'), type: 'heading', settings: { text: 'Lightning-Fast Performance', level: 'h3', fontSize: '1.75rem' } },
+                        { id: tid('el'), type: 'text-block', settings: { content: '<p class="text-gray-600 text-lg">Every page loads in under a second with our optimized rendering engine. Static generation, edge caching, and smart image optimization come built in.</p>' } },
+                        { id: tid('el'), type: 'button', settings: { text: 'Learn More', url: '#performance', variant: 'outline', size: 'md' } },
+                    ],
+                },
+                {
+                    id: tid('col'),
+                    width: '1/2',
+                    settings: { verticalAlign: 'center' },
+                    elements: [
+                        { id: tid('el'), type: 'image', settings: { src: '/images/features/performance.png', alt: 'Performance dashboard', borderRadius: '1rem', width: '100%' } },
+                    ],
+                },
+            ],
+        },
+        // Feature 2: image left, text right (alternating)
+        {
+            id: tid('row'),
+            type: 'row',
+            settings: { layout: 'boxed', paddingTop: '3rem', paddingBottom: '3rem', gap: '3rem' },
+            columns: [
+                {
+                    id: tid('col'),
+                    width: '1/2',
+                    settings: { verticalAlign: 'center' },
+                    elements: [
+                        { id: tid('el'), type: 'image', settings: { src: '/images/features/builder.png', alt: 'Visual page builder', borderRadius: '1rem', width: '100%' } },
+                    ],
+                },
+                {
+                    id: tid('col'),
+                    width: '1/2',
+                    settings: { verticalAlign: 'center' },
+                    elements: [
+                        { id: tid('el'), type: 'icon', settings: { name: '🎯', size: '2.5rem', alignment: 'left' } },
+                        { id: tid('el'), type: 'heading', settings: { text: 'Visual Drag-and-Drop Builder', level: 'h3', fontSize: '1.75rem' } },
+                        { id: tid('el'), type: 'text-block', settings: { content: '<p class="text-gray-600 text-lg">Design pixel-perfect pages without writing code. Drag elements, customize every detail, and see changes in real time with our WYSIWYG editor.</p>' } },
+                        { id: tid('el'), type: 'button', settings: { text: 'Learn More', url: '#builder', variant: 'outline', size: 'md' } },
+                    ],
+                },
+            ],
+        },
+        // Feature 3: text left, image right
+        {
+            id: tid('row'),
+            type: 'row',
+            settings: { layout: 'boxed', paddingTop: '3rem', paddingBottom: '5rem', gap: '3rem' },
+            columns: [
+                {
+                    id: tid('col'),
+                    width: '1/2',
+                    settings: { verticalAlign: 'center' },
+                    elements: [
+                        { id: tid('el'), type: 'icon', settings: { name: '🔒', size: '2.5rem', alignment: 'left' } },
+                        { id: tid('el'), type: 'heading', settings: { text: 'Enterprise-Grade Security', level: 'h3', fontSize: '1.75rem' } },
+                        { id: tid('el'), type: 'text-block', settings: { content: '<p class="text-gray-600 text-lg">SSL certificates, DDoS protection, automated backups, and role-based access control. Your site and data are protected at every layer.</p>' } },
+                        { id: tid('el'), type: 'button', settings: { text: 'Learn More', url: '#security', variant: 'outline', size: 'md' } },
+                    ],
+                },
+                {
+                    id: tid('col'),
+                    width: '1/2',
+                    settings: { verticalAlign: 'center' },
+                    elements: [
+                        { id: tid('el'), type: 'image', settings: { src: '/images/features/security.png', alt: 'Security features overview', borderRadius: '1rem', width: '100%' } },
+                    ],
+                },
+            ],
+        },
+    ],
+};
+// ---------------------------------------------------------------------------
+// All default templates
+// ---------------------------------------------------------------------------
+export const defaultTemplates = [
+    heroSplitTemplate,
+    aboutTeamTemplate,
+    servicesCardsTemplate,
+    pricingThreeTierTemplate,
+    testimonialsCarouselTemplate,
+    ctaBannerTemplate,
+    contactFormTemplate,
+    footerMultiColumnTemplate,
+    galleryMasonryTemplate,
+    featuresAlternatingTemplate,
+];
+/**
+ * Register all default templates into a TemplateStudio instance.
+ */
+export function registerDefaultTemplates(studio) {
+    for (const template of defaultTemplates) {
+        if (!studio.has(template.id)) {
+            studio.register(template);
+        }
+    }
+}
+//# sourceMappingURL=template-studio.js.map