foundrycms 0.1.0

package/dist/page-builder/elements/index.js

@@ -0,0 +1,770 @@
+import { z } from 'zod';
+// ---------------------------------------------------------------------------
+// Shared helpers
+// ---------------------------------------------------------------------------
+function esc(str) {
+    return str
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+function escAttr(str) {
+    return str.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+// ---------------------------------------------------------------------------
+// 1. ROW (layout)
+// ---------------------------------------------------------------------------
+export const rowElement = {
+    type: 'row',
+    name: 'Row',
+    category: 'layout',
+    icon: '▦',
+    description: 'Container row with layout, background, and padding options',
+    defaultSettings: {
+        layout: 'boxed',
+        gap: '1.5rem',
+        paddingTop: '2rem',
+        paddingBottom: '2rem',
+        backgroundColor: '',
+        backgroundImage: '',
+        className: '',
+    },
+    settingsSchema: z.object({
+        layout: z.enum(['full_width', 'boxed', 'narrow']).default('boxed'),
+        gap: z.string().default('1.5rem'),
+        paddingTop: z.string().default('2rem'),
+        paddingBottom: z.string().default('2rem'),
+        backgroundColor: z.string().default(''),
+        backgroundImage: z.string().default(''),
+        className: z.string().default(''),
+    }),
+    render: (s) => {
+        const styles = [];
+        if (s.paddingTop)
+            styles.push(`padding-top: ${s.paddingTop}`);
+        if (s.paddingBottom)
+            styles.push(`padding-bottom: ${s.paddingBottom}`);
+        if (s.backgroundColor)
+            styles.push(`background-color: ${s.backgroundColor}`);
+        if (s.backgroundImage)
+            styles.push(`background-image: url('${escAttr(s.backgroundImage)}'); background-size: cover; background-position: center`);
+        const layoutClass = s.layout === 'full_width' ? 'w-full' : s.layout === 'narrow' ? 'max-w-3xl mx-auto px-4' : 'max-w-7xl mx-auto px-4';
+        return `        <div class="${layoutClass} ${s.className || ''}" style="${styles.join('; ')}"></div>`;
+    },
+};
+// ---------------------------------------------------------------------------
+// 2. COLUMN (layout)
+// ---------------------------------------------------------------------------
+export const columnElement = {
+    type: 'column',
+    name: 'Column',
+    category: 'layout',
+    icon: '▐',
+    description: 'Column container with width and alignment settings',
+    defaultSettings: {
+        width: '1/1',
+        verticalAlign: 'top',
+        padding: '',
+        className: '',
+    },
+    settingsSchema: z.object({
+        width: z.enum(['1/1', '1/2', '1/3', '2/3', '1/4', '3/4', '1/6', '5/6']).default('1/1'),
+        verticalAlign: z.enum(['top', 'center', 'bottom']).default('top'),
+        padding: z.string().default(''),
+        className: z.string().default(''),
+    }),
+    render: (s) => {
+        const styles = [];
+        if (s.padding)
+            styles.push(`padding: ${s.padding}`);
+        return `        <div class="foundry-col ${s.className || ''}" style="${styles.join('; ')}"></div>`;
+    },
+};
+// ---------------------------------------------------------------------------
+// 3. SPACER (layout)
+// ---------------------------------------------------------------------------
+export const spacerElement = {
+    type: 'spacer',
+    name: 'Spacer',
+    category: 'layout',
+    icon: '↕',
+    description: 'Vertical spacer with configurable height',
+    defaultSettings: {
+        height: '2rem',
+    },
+    settingsSchema: z.object({
+        height: z.string().default('2rem'),
+    }),
+    render: (s) => {
+        return `        <div class="foundry-spacer" style="height: ${escAttr(s.height)}" aria-hidden="true"></div>`;
+    },
+};
+// ---------------------------------------------------------------------------
+// 4. DIVIDER (layout)
+// ---------------------------------------------------------------------------
+export const dividerElement = {
+    type: 'divider',
+    name: 'Divider',
+    category: 'layout',
+    icon: '—',
+    description: 'Horizontal divider line with style, color, and width options',
+    defaultSettings: {
+        style: 'solid',
+        color: '#e5e7eb',
+        width: '100%',
+        thickness: '1px',
+    },
+    settingsSchema: z.object({
+        style: z.enum(['solid', 'dashed', 'dotted', 'gradient']).default('solid'),
+        color: z.string().default('#e5e7eb'),
+        width: z.string().default('100%'),
+        thickness: z.string().default('1px'),
+    }),
+    render: (s) => {
+        if (s.style === 'gradient') {
+            return `        <div class="foundry-divider" style="width: ${escAttr(s.width)}; height: ${escAttr(s.thickness)}; background: linear-gradient(90deg, transparent, ${escAttr(s.color)}, transparent); margin: 0 auto" role="separator"></div>`;
+        }
+        return `        <hr class="foundry-divider" style="width: ${escAttr(s.width)}; border: none; border-top: ${escAttr(s.thickness)} ${escAttr(s.style)} ${escAttr(s.color)}; margin: 0 auto" />`;
+    },
+};
+// ---------------------------------------------------------------------------
+// 5. HEADING (content)
+// ---------------------------------------------------------------------------
+export const headingElement = {
+    type: 'heading',
+    name: 'Heading',
+    category: 'content',
+    icon: 'H',
+    description: 'Heading element (H1-H6) with alignment, color, and size',
+    keywords: ['title', 'h1', 'h2', 'h3', 'header'],
+    defaultSettings: {
+        text: 'Heading',
+        level: 'h2',
+        alignment: 'left',
+        color: '',
+        fontSize: '',
+        fontWeight: 'bold',
+        className: '',
+    },
+    settingsSchema: z.object({
+        text: z.string().min(1),
+        level: z.enum(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']).default('h2'),
+        alignment: z.enum(['left', 'center', 'right']).default('left'),
+        color: z.string().default(''),
+        fontSize: z.string().default(''),
+        fontWeight: z.string().default('bold'),
+        className: z.string().default(''),
+    }),
+    render: (s) => {
+        const tag = s.level || 'h2';
+        const styles = [];
+        if (s.color)
+            styles.push(`color: ${s.color}`);
+        if (s.fontSize)
+            styles.push(`font-size: ${s.fontSize}`);
+        if (s.fontWeight)
+            styles.push(`font-weight: ${s.fontWeight}`);
+        const alignClass = s.alignment === 'center' ? 'text-center' : s.alignment === 'right' ? 'text-right' : 'text-left';
+        return `        <${tag} class="foundry-heading ${alignClass} ${s.className || ''}" style="${styles.join('; ')}">${esc(s.text)}</${tag}>`;
+    },
+};
+// ---------------------------------------------------------------------------
+// 6. TEXT BLOCK (content)
+// ---------------------------------------------------------------------------
+export const textBlockElement = {
+    type: 'text-block',
+    name: 'Text Block',
+    category: 'content',
+    icon: '¶',
+    description: 'Rich text content block (HTML)',
+    keywords: ['paragraph', 'text', 'rich text', 'body', 'copy'],
+    defaultSettings: {
+        content: '<p>Enter your text here.</p>',
+        alignment: 'left',
+        color: '',
+        fontSize: '',
+        lineHeight: '',
+        className: '',
+    },
+    settingsSchema: z.object({
+        content: z.string(),
+        alignment: z.enum(['left', 'center', 'right', 'justify']).default('left'),
+        color: z.string().default(''),
+        fontSize: z.string().default(''),
+        lineHeight: z.string().default(''),
+        className: z.string().default(''),
+    }),
+    render: (s) => {
+        const styles = [];
+        if (s.color)
+            styles.push(`color: ${s.color}`);
+        if (s.fontSize)
+            styles.push(`font-size: ${s.fontSize}`);
+        if (s.lineHeight)
+            styles.push(`line-height: ${s.lineHeight}`);
+        const alignClass = s.alignment === 'center' ? 'text-center' : s.alignment === 'right' ? 'text-right' : s.alignment === 'justify' ? 'text-justify' : 'text-left';
+        // Content is trusted HTML (sanitized at save time)
+        return `        <div class="foundry-text-block prose max-w-none ${alignClass} ${s.className || ''}" style="${styles.join('; ')}">${s.content}</div>`;
+    },
+};
+// ---------------------------------------------------------------------------
+// 7. BUTTON (content)
+// ---------------------------------------------------------------------------
+export const buttonElement = {
+    type: 'button',
+    name: 'Button',
+    category: 'content',
+    icon: '▢',
+    description: 'Call-to-action button with variant, size, and link',
+    keywords: ['cta', 'link', 'action', 'button'],
+    defaultSettings: {
+        text: 'Click Here',
+        url: '#',
+        variant: 'primary',
+        size: 'md',
+        alignment: 'left',
+        openInNewTab: false,
+        className: '',
+    },
+    settingsSchema: z.object({
+        text: z.string().min(1),
+        url: z.string().default('#'),
+        variant: z.enum(['primary', 'secondary', 'outline', 'ghost']).default('primary'),
+        size: z.enum(['sm', 'md', 'lg', 'xl']).default('md'),
+        alignment: z.enum(['left', 'center', 'right']).default('left'),
+        openInNewTab: z.boolean().default(false),
+        className: z.string().default(''),
+    }),
+    render: (s) => {
+        const sizeClasses = {
+            sm: 'px-3 py-1.5 text-sm',
+            md: 'px-5 py-2.5 text-base',
+            lg: 'px-7 py-3 text-lg',
+            xl: 'px-9 py-4 text-xl',
+        };
+        const variantClasses = {
+            primary: 'bg-blue-600 text-white hover:bg-blue-700 border border-blue-600',
+            secondary: 'bg-gray-600 text-white hover:bg-gray-700 border border-gray-600',
+            outline: 'bg-transparent text-blue-600 hover:bg-blue-50 border border-blue-600',
+            ghost: 'bg-transparent text-blue-600 hover:bg-blue-50 border border-transparent',
+        };
+        const alignClass = s.alignment === 'center' ? 'text-center' : s.alignment === 'right' ? 'text-right' : 'text-left';
+        const target = s.openInNewTab ? ' target="_blank" rel="noopener noreferrer"' : '';
+        const btnClasses = `inline-block rounded-lg font-medium transition-colors duration-200 no-underline ${sizeClasses[s.size] || sizeClasses.md} ${variantClasses[s.variant] || variantClasses.primary} ${s.className || ''}`;
+        return `        <div class="${alignClass}">
+          <a href="${escAttr(s.url)}" class="${btnClasses}"${target}>${esc(s.text)}</a>
+        </div>`;
+    },
+};
+// ---------------------------------------------------------------------------
+// 8. ICON (content)
+// ---------------------------------------------------------------------------
+export const iconElement = {
+    type: 'icon',
+    name: 'Icon',
+    category: 'content',
+    icon: '★',
+    description: 'Single icon display with name, size, and color',
+    keywords: ['icon', 'symbol', 'emoji'],
+    defaultSettings: {
+        name: '★',
+        size: '2rem',
+        color: '#1f2937',
+        alignment: 'center',
+    },
+    settingsSchema: z.object({
+        name: z.string().min(1),
+        size: z.string().default('2rem'),
+        color: z.string().default('#1f2937'),
+        alignment: z.enum(['left', 'center', 'right']).default('center'),
+    }),
+    render: (s) => {
+        const alignClass = s.alignment === 'center' ? 'text-center' : s.alignment === 'right' ? 'text-right' : 'text-left';
+        return `        <div class="foundry-icon ${alignClass}">
+          <span style="font-size: ${escAttr(s.size)}; color: ${escAttr(s.color)}; line-height: 1" role="img" aria-label="${escAttr(s.name)}">${esc(s.name)}</span>
+        </div>`;
+    },
+};
+// ---------------------------------------------------------------------------
+// 9. IMAGE (media)
+// ---------------------------------------------------------------------------
+export const imageElement = {
+    type: 'image',
+    name: 'Image',
+    category: 'media',
+    icon: '🖼',
+    description: 'Single image with caption, sizing, and border radius',
+    keywords: ['image', 'photo', 'picture', 'img'],
+    defaultSettings: {
+        src: '',
+        alt: '',
+        width: '100%',
+        height: 'auto',
+        objectFit: 'cover',
+        borderRadius: '0',
+        caption: '',
+        alignment: 'center',
+        className: '',
+    },
+    settingsSchema: z.object({
+        src: z.string(),
+        alt: z.string().default(''),
+        width: z.string().default('100%'),
+        height: z.string().default('auto'),
+        objectFit: z.enum(['cover', 'contain', 'fill', 'none']).default('cover'),
+        borderRadius: z.string().default('0'),
+        caption: z.string().default(''),
+        alignment: z.enum(['left', 'center', 'right']).default('center'),
+        className: z.string().default(''),
+    }),
+    render: (s) => {
+        const alignClass = s.alignment === 'center' ? 'mx-auto text-center' : s.alignment === 'right' ? 'ml-auto text-right' : 'text-left';
+        const imgStyle = `width: ${escAttr(s.width)}; height: ${escAttr(s.height)}; object-fit: ${escAttr(s.objectFit)}; border-radius: ${escAttr(s.borderRadius)}`;
+        const captionHtml = s.caption
+            ? `\n          <figcaption class="mt-2 text-sm text-gray-500 ${s.alignment === 'center' ? 'text-center' : ''}">${esc(s.caption)}</figcaption>`
+            : '';
+        if (!s.src) {
+            return `        <figure class="foundry-image ${alignClass} ${s.className || ''}">
+          <div class="bg-gray-100 flex items-center justify-center" style="width: ${escAttr(s.width)}; height: 200px; border-radius: ${escAttr(s.borderRadius)}">
+            <span class="text-gray-400 text-sm">No image selected</span>
+          </div>${captionHtml}
+        </figure>`;
+        }
+        return `        <figure class="foundry-image ${alignClass} ${s.className || ''}">
+          <img src="${escAttr(s.src)}" alt="${escAttr(s.alt)}" style="${imgStyle}" loading="lazy" />${captionHtml}
+        </figure>`;
+    },
+};
+// ---------------------------------------------------------------------------
+// 10. GALLERY (media)
+// ---------------------------------------------------------------------------
+const galleryImageSchema = z.object({
+    src: z.string(),
+    alt: z.string().default(''),
+    caption: z.string().default(''),
+});
+export const galleryElement = {
+    type: 'gallery',
+    name: 'Gallery',
+    category: 'media',
+    icon: '◫',
+    description: 'Image gallery with grid layout, columns, gap, and lightbox',
+    keywords: ['gallery', 'photos', 'images', 'grid'],
+    defaultSettings: {
+        images: [],
+        columns: 3,
+        gap: '1rem',
+        borderRadius: '0.5rem',
+        lightbox: true,
+    },
+    settingsSchema: z.object({
+        images: z.array(galleryImageSchema).default([]),
+        columns: z.number().min(1).max(6).default(3),
+        gap: z.string().default('1rem'),
+        borderRadius: z.string().default('0.5rem'),
+        lightbox: z.boolean().default(true),
+    }),
+    render: (s) => {
+        if (!s.images || s.images.length === 0) {
+            return `        <div class="foundry-gallery bg-gray-50 rounded-lg p-8 text-center text-gray-400">
+          <p>No images added to gallery</p>
+        </div>`;
+        }
+        const items = s.images
+            .map((img, i) => {
+            const lightboxAttrs = s.lightbox ? ` data-lightbox="gallery" data-index="${i}"` : '';
+            const captionHtml = img.caption ? `<figcaption class="mt-1 text-xs text-gray-500">${esc(img.caption)}</figcaption>` : '';
+            return `            <figure class="foundry-gallery-item overflow-hidden" style="border-radius: ${escAttr(s.borderRadius)}">
+              <img src="${escAttr(img.src)}" alt="${escAttr(img.alt)}" class="w-full h-48 object-cover cursor-pointer hover:opacity-90 transition-opacity" loading="lazy"${lightboxAttrs} style="border-radius: ${escAttr(s.borderRadius)}" />${captionHtml}
+            </figure>`;
+        })
+            .join('\n');
+        return `        <div class="foundry-gallery" style="display: grid; grid-template-columns: repeat(${s.columns}, 1fr); gap: ${escAttr(s.gap)}">
+${items}
+        </div>`;
+    },
+};
+// ---------------------------------------------------------------------------
+// 11. VIDEO (media)
+// ---------------------------------------------------------------------------
+export const videoElement = {
+    type: 'video',
+    name: 'Video',
+    category: 'media',
+    icon: '▶',
+    description: 'Video embed (YouTube, Vimeo, or self-hosted)',
+    keywords: ['video', 'youtube', 'vimeo', 'embed', 'movie'],
+    defaultSettings: {
+        url: '',
+        autoplay: false,
+        loop: false,
+        controls: true,
+        muted: false,
+        aspectRatio: '16/9',
+        maxWidth: '100%',
+    },
+    settingsSchema: z.object({
+        url: z.string(),
+        autoplay: z.boolean().default(false),
+        loop: z.boolean().default(false),
+        controls: z.boolean().default(true),
+        muted: z.boolean().default(false),
+        aspectRatio: z.string().default('16/9'),
+        maxWidth: z.string().default('100%'),
+    }),
+    render: (s) => {
+        if (!s.url) {
+            return `        <div class="foundry-video bg-gray-900 rounded-lg flex items-center justify-center" style="aspect-ratio: ${escAttr(s.aspectRatio)}; max-width: ${escAttr(s.maxWidth)}">
+          <span class="text-gray-400">No video URL provided</span>
+        </div>`;
+        }
+        // YouTube detection
+        const ytMatch = s.url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
+        if (ytMatch) {
+            const params = [];
+            if (s.autoplay)
+                params.push('autoplay=1');
+            if (s.loop)
+                params.push(`loop=1&playlist=${ytMatch[1]}`);
+            if (!s.controls)
+                params.push('controls=0');
+            if (s.muted)
+                params.push('mute=1');
+            const query = params.length > 0 ? `?${params.join('&')}` : '';
+            return `        <div class="foundry-video" style="max-width: ${escAttr(s.maxWidth)}">
+          <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
+            <iframe src="https://www.youtube.com/embed/${ytMatch[1]}${query}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy" title="Video"></iframe>
+          </div>
+        </div>`;
+        }
+        // Vimeo detection
+        const vimeoMatch = s.url.match(/vimeo\.com\/(\d+)/);
+        if (vimeoMatch) {
+            const params = [];
+            if (s.autoplay)
+                params.push('autoplay=1');
+            if (s.loop)
+                params.push('loop=1');
+            if (s.muted)
+                params.push('muted=1');
+            const query = params.length > 0 ? `?${params.join('&')}` : '';
+            return `        <div class="foundry-video" style="max-width: ${escAttr(s.maxWidth)}">
+          <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
+            <iframe src="https://player.vimeo.com/video/${vimeoMatch[1]}${query}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen loading="lazy" title="Video"></iframe>
+          </div>
+        </div>`;
+        }
+        // Self-hosted video
+        const attrs = [];
+        if (s.autoplay)
+            attrs.push('autoplay');
+        if (s.loop)
+            attrs.push('loop');
+        if (s.controls)
+            attrs.push('controls');
+        if (s.muted)
+            attrs.push('muted');
+        return `        <div class="foundry-video" style="max-width: ${escAttr(s.maxWidth)}">
+          <video class="w-full rounded-lg" style="aspect-ratio: ${escAttr(s.aspectRatio)}" ${attrs.join(' ')} playsinline>
+            <source src="${escAttr(s.url)}" />
+            Your browser does not support the video tag.
+          </video>
+        </div>`;
+    },
+};
+// ---------------------------------------------------------------------------
+// 12. PRICING TABLE (data)
+// ---------------------------------------------------------------------------
+const pricingFeatureSchema = z.object({
+    text: z.string(),
+    included: z.boolean().default(true),
+});
+export const pricingTableElement = {
+    type: 'pricing-table',
+    name: 'Pricing Table',
+    category: 'data',
+    icon: '$',
+    description: 'Pricing card with name, price, features, and CTA',
+    keywords: ['pricing', 'price', 'plan', 'subscription', 'tier'],
+    defaultSettings: {
+        name: 'Pro Plan',
+        price: '$29',
+        period: '/month',
+        description: 'Everything you need to get started',
+        features: [
+            { text: 'Unlimited projects', included: true },
+            { text: 'Priority support', included: true },
+            { text: 'Custom domain', included: true },
+            { text: 'Analytics dashboard', included: false },
+        ],
+        buttonText: 'Get Started',
+        buttonUrl: '#',
+        highlighted: false,
+        highlightLabel: 'Most Popular',
+    },
+    settingsSchema: z.object({
+        name: z.string(),
+        price: z.string(),
+        period: z.string().default('/month'),
+        description: z.string().default(''),
+        features: z.array(pricingFeatureSchema).default([]),
+        buttonText: z.string().default('Get Started'),
+        buttonUrl: z.string().default('#'),
+        highlighted: z.boolean().default(false),
+        highlightLabel: z.string().default('Most Popular'),
+    }),
+    render: (s) => {
+        const borderClass = s.highlighted ? 'border-2 border-blue-600 shadow-xl scale-105' : 'border border-gray-200 shadow-md';
+        const btnClass = s.highlighted
+            ? 'bg-blue-600 text-white hover:bg-blue-700'
+            : 'bg-gray-900 text-white hover:bg-gray-800';
+        const badge = s.highlighted
+            ? `\n            <span class="inline-block bg-blue-600 text-white text-xs font-semibold px-3 py-1 rounded-full mb-4">${esc(s.highlightLabel)}</span>`
+            : '';
+        const featuresHtml = s.features
+            .map((f) => {
+            const icon = f.included
+                ? '<svg class="w-5 h-5 text-green-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>'
+                : '<svg class="w-5 h-5 text-gray-300 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>';
+            const textClass = f.included ? 'text-gray-700' : 'text-gray-400 line-through';
+            return `              <li class="flex items-center gap-3">${icon}<span class="${textClass}">${esc(f.text)}</span></li>`;
+        })
+            .join('\n');
+        return `        <div class="foundry-pricing-table rounded-2xl p-8 bg-white ${borderClass} relative">
+          <div class="text-center">${badge}
+            <h3 class="text-xl font-bold text-gray-900">${esc(s.name)}</h3>
+            ${s.description ? `<p class="mt-2 text-sm text-gray-500">${esc(s.description)}</p>` : ''}
+            <div class="mt-6 flex items-baseline justify-center gap-1">
+              <span class="text-5xl font-extrabold text-gray-900">${esc(s.price)}</span>
+              <span class="text-gray-500">${esc(s.period)}</span>
+            </div>
+          </div>
+          <ul class="mt-8 space-y-4">
+${featuresHtml}
+          </ul>
+          <a href="${escAttr(s.buttonUrl)}" class="mt-8 block w-full text-center rounded-lg px-6 py-3 font-semibold transition-colors ${btnClass} no-underline">${esc(s.buttonText)}</a>
+        </div>`;
+    },
+};
+// ---------------------------------------------------------------------------
+// 13. TESTIMONIAL (data)
+// ---------------------------------------------------------------------------
+export const testimonialElement = {
+    type: 'testimonial',
+    name: 'Testimonial',
+    category: 'data',
+    icon: '❝',
+    description: 'Quote with author, title, photo, and star rating',
+    keywords: ['testimonial', 'quote', 'review', 'feedback'],
+    defaultSettings: {
+        text: 'This product completely transformed our workflow. Highly recommended!',
+        authorName: 'Jane Smith',
+        authorTitle: 'CEO, Acme Corp',
+        authorImage: '',
+        rating: 5,
+        variant: 'card',
+    },
+    settingsSchema: z.object({
+        text: z.string(),
+        authorName: z.string(),
+        authorTitle: z.string().default(''),
+        authorImage: z.string().default(''),
+        rating: z.number().min(0).max(5).default(5),
+        variant: z.enum(['card', 'minimal', 'large']).default('card'),
+    }),
+    render: (s) => {
+        const stars = s.rating > 0
+            ? `<div class="flex gap-0.5 mb-4">${Array.from({ length: 5 }, (_, i) => `<svg class="w-5 h-5 ${i < s.rating ? 'text-yellow-400' : 'text-gray-200'}" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>`).join('')}</div>`
+            : '';
+        const avatar = s.authorImage
+            ? `<img src="${escAttr(s.authorImage)}" alt="${escAttr(s.authorName)}" class="w-12 h-12 rounded-full object-cover" loading="lazy" />`
+            : `<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-lg">${esc(s.authorName.charAt(0).toUpperCase())}</div>`;
+        const authorTitleHtml = s.authorTitle ? `<p class="text-sm text-gray-500">${esc(s.authorTitle)}</p>` : '';
+        if (s.variant === 'large') {
+            return `        <blockquote class="foundry-testimonial text-center max-w-2xl mx-auto">
+          ${stars}
+          <p class="text-2xl font-medium text-gray-900 italic leading-relaxed">"${esc(s.text)}"</p>
+          <footer class="mt-6 flex flex-col items-center gap-3">
+            ${avatar}
+            <div>
+              <cite class="text-base font-semibold text-gray-900 not-italic">${esc(s.authorName)}</cite>
+              ${authorTitleHtml}
+            </div>
+          </footer>
+        </blockquote>`;
+        }
+        if (s.variant === 'minimal') {
+            return `        <blockquote class="foundry-testimonial border-l-4 border-blue-600 pl-6 py-2">
+          <p class="text-gray-700 italic">"${esc(s.text)}"</p>
+          <footer class="mt-3 flex items-center gap-3">
+            ${avatar}
+            <div>
+              <cite class="text-sm font-semibold text-gray-900 not-italic">${esc(s.authorName)}</cite>
+              ${authorTitleHtml}
+            </div>
+          </footer>
+        </blockquote>`;
+        }
+        // card (default)
+        return `        <blockquote class="foundry-testimonial bg-white rounded-xl shadow-md p-6 border border-gray-100">
+          ${stars}
+          <p class="text-gray-700 leading-relaxed">"${esc(s.text)}"</p>
+          <footer class="mt-4 flex items-center gap-3 pt-4 border-t border-gray-100">
+            ${avatar}
+            <div>
+              <cite class="text-sm font-semibold text-gray-900 not-italic">${esc(s.authorName)}</cite>
+              ${authorTitleHtml}
+            </div>
+          </footer>
+        </blockquote>`;
+    },
+};
+// ---------------------------------------------------------------------------
+// 14. ACCORDION (interactive)
+// ---------------------------------------------------------------------------
+const accordionItemSchema = z.object({
+    title: z.string(),
+    content: z.string(),
+});
+export const accordionElement = {
+    type: 'accordion',
+    name: 'Accordion',
+    category: 'interactive',
+    icon: '≡',
+    description: 'Collapsible FAQ/content sections',
+    keywords: ['accordion', 'faq', 'collapse', 'toggle', 'expandable'],
+    defaultSettings: {
+        items: [
+            { title: 'What is your refund policy?', content: 'We offer a full refund within 30 days of purchase. No questions asked.' },
+            { title: 'How do I get started?', content: 'Simply create an account and follow the onboarding wizard. You will be up and running in minutes.' },
+            { title: 'Do you offer support?', content: 'Yes! We provide 24/7 email support and live chat during business hours.' },
+        ],
+        allowMultiple: false,
+        variant: 'bordered',
+        iconPosition: 'right',
+    },
+    settingsSchema: z.object({
+        items: z.array(accordionItemSchema).default([]),
+        allowMultiple: z.boolean().default(false),
+        variant: z.enum(['bordered', 'separated', 'minimal']).default('bordered'),
+        iconPosition: z.enum(['left', 'right']).default('right'),
+    }),
+    render: (s) => {
+        if (!s.items || s.items.length === 0) {
+            return `        <div class="foundry-accordion text-gray-400 text-center p-4">No accordion items</div>`;
+        }
+        const chevron = '<svg class="w-5 h-5 transition-transform duration-200 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>';
+        const wrapperClass = s.variant === 'separated'
+            ? 'space-y-3'
+            : s.variant === 'minimal'
+                ? 'divide-y divide-gray-100'
+                : 'border border-gray-200 rounded-lg divide-y divide-gray-200';
+        const itemClasses = s.variant === 'separated'
+            ? 'border border-gray-200 rounded-lg overflow-hidden'
+            : '';
+        const items = s.items
+            .map((item, i) => {
+            const flexDir = s.iconPosition === 'left' ? 'flex-row-reverse' : 'flex-row';
+            return `          <details class="foundry-accordion-item group ${itemClasses}"${i === 0 ? ' open' : ''}>
+            <summary class="flex ${flexDir} items-center justify-between gap-3 cursor-pointer list-none p-4 hover:bg-gray-50 transition-colors font-medium text-gray-900 [&::-webkit-details-marker]:hidden">
+              <span>${esc(item.title)}</span>
+              <span class="group-open:rotate-180 transition-transform">${chevron}</span>
+            </summary>
+            <div class="px-4 pb-4 text-gray-600 leading-relaxed">${item.content}</div>
+          </details>`;
+        })
+            .join('\n');
+        return `        <div class="foundry-accordion ${wrapperClass}" data-allow-multiple="${s.allowMultiple}">
+${items}
+        </div>`;
+    },
+};
+// ---------------------------------------------------------------------------
+// 15. CALL TO ACTION (interactive)
+// ---------------------------------------------------------------------------
+export const callToActionElement = {
+    type: 'call-to-action',
+    name: 'Call to Action',
+    category: 'interactive',
+    icon: '📢',
+    description: 'Full-width CTA section with heading, subheading, and button',
+    keywords: ['cta', 'call to action', 'banner', 'promotion'],
+    defaultSettings: {
+        heading: 'Ready to get started?',
+        subheading: 'Join thousands of happy customers and transform your business today.',
+        buttonText: 'Start Free Trial',
+        buttonUrl: '#',
+        alignment: 'center',
+        backgroundColor: '#1e40af',
+        textColor: '#ffffff',
+        buttonVariant: 'light',
+        padding: '4rem 2rem',
+        borderRadius: '1rem',
+    },
+    settingsSchema: z.object({
+        heading: z.string(),
+        subheading: z.string().default(''),
+        buttonText: z.string().default('Get Started'),
+        buttonUrl: z.string().default('#'),
+        alignment: z.enum(['left', 'center', 'right']).default('center'),
+        backgroundColor: z.string().default('#1e40af'),
+        textColor: z.string().default('#ffffff'),
+        buttonVariant: z.enum(['light', 'outline', 'dark']).default('light'),
+        padding: z.string().default('4rem 2rem'),
+        borderRadius: z.string().default('1rem'),
+    }),
+    render: (s) => {
+        const alignClass = s.alignment === 'center' ? 'text-center' : s.alignment === 'right' ? 'text-right' : 'text-left';
+        const btnAlign = s.alignment === 'center' ? 'mx-auto' : s.alignment === 'right' ? 'ml-auto' : '';
+        const btnVariants = {
+            light: 'bg-white text-gray-900 hover:bg-gray-100',
+            outline: `bg-transparent border-2 border-white hover:bg-white/10`,
+            dark: 'bg-gray-900 text-white hover:bg-gray-800',
+        };
+        const btnClass = btnVariants[s.buttonVariant] || btnVariants.light;
+        const subheadingHtml = s.subheading
+            ? `\n            <p class="mt-4 text-lg opacity-90 max-w-2xl ${s.alignment === 'center' ? 'mx-auto' : ''}">${esc(s.subheading)}</p>`
+            : '';
+        return `        <div class="foundry-cta rounded-2xl ${alignClass}" style="background-color: ${escAttr(s.backgroundColor)}; color: ${escAttr(s.textColor)}; padding: ${escAttr(s.padding)}; border-radius: ${escAttr(s.borderRadius)}">
+          <div class="max-w-4xl ${s.alignment === 'center' ? 'mx-auto' : ''}">
+            <h2 class="text-3xl font-bold sm:text-4xl">${esc(s.heading)}</h2>${subheadingHtml}
+            <div class="mt-8">
+              <a href="${escAttr(s.buttonUrl)}" class="inline-block ${btnAlign} rounded-lg px-8 py-3.5 font-semibold text-lg transition-colors no-underline ${btnClass}" style="color: ${s.buttonVariant === 'outline' ? escAttr(s.textColor) : ''}">${esc(s.buttonText)}</a>
+            </div>
+          </div>
+        </div>`;
+    },
+};
+// ---------------------------------------------------------------------------
+// All default elements
+// ---------------------------------------------------------------------------
+export const defaultElements = [
+    rowElement,
+    columnElement,
+    spacerElement,
+    dividerElement,
+    headingElement,
+    textBlockElement,
+    buttonElement,
+    iconElement,
+    imageElement,
+    galleryElement,
+    videoElement,
+    pricingTableElement,
+    testimonialElement,
+    accordionElement,
+    callToActionElement,
+];
+/**
+ * Register all default elements into an ElementRegistry instance.
+ */
+export function registerDefaultElements(registry) {
+    for (const element of defaultElements) {
+        if (!registry.has(element.type)) {
+            registry.register(element);
+        }
+    }
+}
+//# sourceMappingURL=index.js.map