@dmitryvim/form-builder 0.1.4 → 0.1.6

package/dist/form-builder.js

@@ -0,0 +1,1040 @@
+/**
+ * Form Builder Library v0.1.4
+ * A reusable JSON schema form builder library
+ * https://github.com/picazru/form-builder
+ */
+
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FormBuilder = {}));
+})(this, (function (exports) {
+    'use strict';
+
+    // Utility functions
+    const sleep = (ms) => new Promise(r => setTimeout(r, ms));
+    const pretty = (obj) => JSON.stringify(obj, null, 2);
+    const deepClone = (obj) => structuredClone ? structuredClone(obj) : JSON.parse(JSON.stringify(obj));
+    const isPlainObject = (v) => Object.prototype.toString.call(v) === '[object Object]';
+    const setText = (node, text) => { node.textContent = text || ''; };
+    const pathJoin = (base, key) => base ? `${base}.${key}` : key;
+    const assert = (c, m) => { if(!c) throw new Error(m); };
+    const warn = (m) => console.warn('[FormBuilder]', m);
+
+    function clear(node) {
+        while (node.firstChild) node.removeChild(node.firstChild);
+    }
+
+    function parseJSONSafe(text, fallback = null) {
+        try {
+            return JSON.parse(text);
+        } catch {
+            return fallback;
+        }
+    }
+
+    async function makeResourceIdFromFile(file) {
+        try {
+            const buf = await file.arrayBuffer();
+            if (crypto?.subtle?.digest) {
+                const hash = await crypto.subtle.digest('SHA-256', buf);
+                const hex = [...new Uint8Array(hash)].map(b => b.toString(16).padStart(2, '0')).join('');
+                return `res_${hex.slice(0, 24)}`;
+            }
+        } catch(_) {}
+        const rnd = Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
+        return `res_${rnd.slice(0, 24)}`;
+    }
+
+    function formatFileSize(bytes) {
+        if (bytes === 0) return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+    }
+
+    // Schema validation
+    function validateSchema(schema) {
+        const errors = [];
+        try { assert(schema && schema.version === '0.3', 'schema.version must be "0.3"'); } catch(e) { errors.push(e.message); }
+        try { assert(Array.isArray(schema.elements), 'schema.elements must be an array'); } catch(e) { errors.push(e.message); }
+        
+        function validateElements(elements, path) {
+            const seen = new Set();
+            elements.forEach((el, idx) => {
+                const here = `${path}[${idx}]`;
+                if (!el || typeof el !== 'object') { errors.push(`${here}: element must be object`); return; }
+                if (!el.type) errors.push(`${here}: missing "type"`);
+                if (!el.key) errors.push(`${here}: missing "key"`);
+                if (el.key) {
+                    if (seen.has(el.key)) errors.push(`${path}: duplicate key "${el.key}"`);
+                    seen.add(el.key);
+                }
+                if (el.default !== undefined && (el.type === 'file' || el.type === 'files')) {
+                    errors.push(`${here}: default forbidden for "${el.type}"`);
+                }
+                
+                // Type-specific validation
+                if (el.type === 'text' || el.type === 'textarea') {
+                    if (el.minLength != null && el.maxLength != null && el.minLength > el.maxLength) {
+                        errors.push(`${here}: minLength > maxLength`);
+                    }
+                    if (el.pattern != null) {
+                        try { new RegExp(el.pattern); } catch { errors.push(`${here}: invalid pattern regex`); }
+                    }
+                }
+                if (el.type === 'number') {
+                    if (typeof el.min === 'number' && typeof el.max === 'number' && el.min > el.max) {
+                        errors.push(`${here}: min > max`);
+                    }
+                    if (el.decimals != null && (!Number.isInteger(el.decimals) || el.decimals < 0 || el.decimals > 8)) {
+                        errors.push(`${here}: decimals must be 0..8`);
+                    }
+                }
+                if (el.type === 'select') {
+                    if (!Array.isArray(el.options) || el.options.length === 0) {
+                        errors.push(`${here}: select.options must be non-empty array`);
+                    } else {
+                        const values = new Set(el.options.map(o => o.value));
+                        if (el.default != null && !values.has(el.default)) {
+                            errors.push(`${here}: default "${el.default}" not in options`);
+                        }
+                    }
+                }
+                if (el.type === 'file') {
+                    if (el.maxSizeMB != null && el.maxSizeMB <= 0) {
+                        errors.push(`${here}: maxSizeMB must be > 0`);
+                    }
+                }
+                if (el.type === 'files') {
+                    if (el.minCount != null && el.maxCount != null && el.minCount > el.maxCount) {
+                        errors.push(`${here}: minCount > maxCount`);
+                    }
+                }
+                if (el.type === 'group') {
+                    if (!Array.isArray(el.elements)) errors.push(`${here}: group.elements must be array`);
+                    if (el.repeat) {
+                        if (el.repeat.min != null && el.repeat.max != null && el.repeat.min > el.repeat.max) {
+                            errors.push(`${here}: repeat.min > repeat.max`);
+                        }
+                    }
+                    // Validate element_label if provided (optional)
+                    if (el.element_label != null && typeof el.element_label !== 'string') {
+                        errors.push(`${here}: element_label must be a string`);
+                    }
+                    if (Array.isArray(el.elements)) validateElements(el.elements, pathJoin(path, el.key));
+                }
+            });
+        }
+        
+        if (Array.isArray(schema.elements)) validateElements(schema.elements, 'elements');
+        return errors;
+    }
+
+    // Form rendering state
+    let resourceIndex = new Map();
+    let config = {
+        uploadFile: null,
+        downloadFile: null,
+        getThumbnail: null,
+        enableFilePreview: true,
+        maxPreviewSize: '200px'
+    };
+
+    function setTextValueFromPrefill(input, element, prefillObj, key) {
+        let v = undefined;
+        if (prefillObj && Object.prototype.hasOwnProperty.call(prefillObj, key)) v = prefillObj[key];
+        else if (element.default !== undefined) v = element.default;
+        if (v !== undefined) input.value = String(v);
+    }
+
+    function setNumberFromPrefill(input, element, prefillObj, key) {
+        let v = undefined;
+        if (prefillObj && Object.prototype.hasOwnProperty.call(prefillObj, key)) v = prefillObj[key];
+        else if (element.default !== undefined) v = element.default;
+        if (v !== undefined && v !== null && v !== '') input.value = String(v);
+    }
+
+    function setSelectFromPrefill(select, element, prefillObj, key) {
+        const values = new Set(element.options.map(o => String(o.value)));
+        let v = undefined;
+        if (prefillObj && Object.prototype.hasOwnProperty.call(prefillObj, key)) v = prefillObj[key];
+        else if (element.default !== undefined) v = element.default;
+        if (v !== undefined && values.has(String(v))) select.value = String(v);
+        else if (!element.required) select.value = '';
+    }
+
+    function fileValidationError(element, file) {
+        if (!file) return 'no file';
+        if (element.maxSizeMB != null && file.size > element.maxSizeMB * 1024 * 1024) {
+            return `file too large > ${element.maxSizeMB}MB`;
+        }
+        if (element.accept) {
+            const { extensions, mime } = element.accept;
+            if (mime && Array.isArray(mime) && mime.length && !mime.includes(file.type)) {
+                return `mime not allowed: ${file.type}`;
+            }
+            if (extensions && Array.isArray(extensions) && extensions.length) {
+                const ext = (file.name.split('.').pop() || '').toLowerCase();
+                if (!extensions.includes(ext)) return `extension .${ext} not allowed`;
+            }
+        }
+        return null;
+    }
+
+    function markValidity(input, msg) {
+        const prev = input?.parentElement?.querySelector?.('.error-message');
+        if (prev) prev.remove();
+        
+        if (input) {
+            input.classList.toggle('border-red-500', !!msg);
+            input.classList.toggle('border-gray-300', !msg);
+        }
+        
+        if (msg && input?.parentElement) {
+            const m = document.createElement('div');
+            m.className = 'error-message text-red-500 text-xs mt-1';
+            m.textContent = msg;
+            input.parentElement.appendChild(m);
+        }
+    }
+
+    function makeFieldHint(element, extra = '') {
+        const hint = document.createElement('div');
+        hint.className = 'text-gray-500 text-xs mt-1';
+        const bits = [];
+        
+        if (element.required) bits.push('required');
+        
+        if (element.type === 'text' || element.type === 'textarea') {
+            if (element.minLength != null) bits.push(`minLength=${element.minLength}`);
+            if (element.maxLength != null) bits.push(`maxLength=${element.maxLength}`);
+            if (element.pattern) bits.push(`pattern=/${element.pattern}/`);
+        }
+        if (element.type === 'number') {
+            if (element.min != null) bits.push(`min=${element.min}`);
+            if (element.max != null) bits.push(`max=${element.max}`);
+            if (element.decimals != null) bits.push(`decimals=${element.decimals}`);
+        }
+        if (element.type === 'select') {
+            bits.push(`${element.options.length} options`);
+        }
+        if (element.type === 'files') {
+            if (element.minCount != null) bits.push(`minCount=${element.minCount}`);
+            if (element.maxCount != null) bits.push(`maxCount=${element.maxCount}`);
+        }
+        
+        hint.textContent = [bits.join(' • '), extra].filter(Boolean).join(' | ');
+        return hint;
+    }
+
+    async function renderFilePreview(container, resourceId, fileName, fileType) {
+        container.innerHTML = '';
+        
+        const preview = document.createElement('div');
+        preview.className = 'flex items-center gap-3 p-2';
+        
+        // File icon/thumbnail
+        const iconContainer = document.createElement('div');
+        iconContainer.className = 'w-12 h-12 rounded-lg flex items-center justify-center bg-blue-600 text-white text-xl flex-shrink-0';
+        
+        if (fileType.startsWith('image/')) {
+            const img = document.createElement('img');
+            img.className = 'w-12 h-12 object-cover rounded-lg';
+            
+            // Try to get thumbnail using custom function or fallback
+            if (config.getThumbnail && typeof config.getThumbnail === 'function') {
+                try {
+                    const thumbnailUrl = await config.getThumbnail(resourceId);
+                    img.src = thumbnailUrl;
+                    img.onerror = () => { iconContainer.textContent = '🖼️'; };
+                    iconContainer.innerHTML = '';
+                    iconContainer.appendChild(img);
+                } catch {
+                    iconContainer.textContent = '🖼️';
+                }
+            } else {
+                iconContainer.textContent = '🖼️';
+            }
+        } else if (fileType.startsWith('video/')) {
+            iconContainer.textContent = '🎥';
+        } else if (fileType.includes('pdf')) {
+            iconContainer.textContent = '📄';
+        } else {
+            iconContainer.textContent = '📎';
+        }
+        
+        preview.appendChild(iconContainer);
+        
+        // File info
+        const info = document.createElement('div');
+        info.className = 'flex-1';
+        
+        const name = document.createElement('div');
+        name.className = 'font-medium text-sm text-gray-900';
+        name.textContent = fileName;
+        
+        const details = document.createElement('div');
+        details.className = 'text-xs text-gray-500 mt-1';
+        details.textContent = `${fileType} • ${resourceId.slice(0, 12)}...`;
+        
+        info.appendChild(name);
+        info.appendChild(details);
+        preview.appendChild(info);
+        
+        // Action buttons
+        const actions = document.createElement('div');
+        actions.className = 'flex gap-2';
+        
+        // Download button
+        const downloadBtn = document.createElement('button');
+        downloadBtn.className = 'px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded transition-colors';
+        downloadBtn.textContent = '⬇️';
+        downloadBtn.title = 'Download';
+        downloadBtn.addEventListener('click', async () => {
+            if (config.downloadFile && typeof config.downloadFile === 'function') {
+                try {
+                    await config.downloadFile(resourceId, fileName);
+                } catch (error) {
+                    console.error('Download failed:', error);
+                }
+            } else {
+                console.log('Download simulated:', resourceId, fileName);
+            }
+        });
+        
+        // Remove button
+        const removeBtn = document.createElement('button');
+        removeBtn.className = 'px-2 py-1 text-xs bg-red-500 hover:bg-red-600 text-white rounded transition-colors';
+        removeBtn.textContent = '✕';
+        removeBtn.title = 'Remove';
+        removeBtn.addEventListener('click', () => {
+            const hiddenInput = container.closest('.file-container')?.querySelector('input[type="hidden"]');
+            if (hiddenInput) {
+                hiddenInput.value = '';
+            }
+            container.innerHTML = '<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">📁</div><div class="text-sm">Click to upload</div></div>';
+        });
+        
+        actions.appendChild(downloadBtn);
+        actions.appendChild(removeBtn);
+        preview.appendChild(actions);
+        
+        container.appendChild(preview);
+    }
+    
+    function renderResourcePills(container, rids, onRemove) {
+        clear(container);
+        container.className = 'flex flex-wrap gap-1.5 mt-2';
+        
+        rids.forEach(rid => {
+            const meta = resourceIndex.get(rid);
+            const pill = document.createElement('span');
+            pill.className = 'inline-flex items-center gap-1.5 bg-blue-50 border border-gray-300 rounded-full px-2.5 py-1 font-mono text-xs m-0.5';
+            pill.textContent = rid;
+            
+            if (meta) {
+                const small = document.createElement('span');
+                small.className = 'text-gray-500';
+                small.textContent = ` (${meta.name ?? 'file'}, ${formatFileSize(meta.size ?? 0)})`;
+                pill.appendChild(small);
+            }
+            
+            if (onRemove) {
+                const x = document.createElement('button');
+                x.type = 'button';
+                x.className = 'bg-red-500 hover:bg-red-600 text-white text-xs px-1.5 py-0.5 rounded ml-1.5';
+                x.textContent = '×';
+                x.addEventListener('click', () => onRemove(rid));
+                pill.appendChild(x);
+            }
+            
+            container.appendChild(pill);
+        });
+    }
+
+    function renderElement(element, ctx, options = {}) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'mb-6';
+        
+        const label = document.createElement('div');
+        label.className = 'flex items-center mb-2';
+        const title = document.createElement('label');
+        title.className = 'text-sm font-medium text-gray-900';
+        title.textContent = element.label || element.key;
+        if (element.required) {
+            const req = document.createElement('span');
+            req.className = 'text-red-500 ml-1';
+            req.textContent = '*';
+            title.appendChild(req);
+        }
+        label.appendChild(title);
+        wrapper.appendChild(label);
+
+        const pathKey = pathJoin(ctx.path, element.key);
+
+        switch (element.type) {
+            case 'text': {
+                const input = document.createElement('input');
+                input.type = 'text';
+                input.name = pathKey;
+                input.dataset.type = 'text';
+                input.className = 'w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500';
+                setTextValueFromPrefill(input, element, ctx.prefill, element.key);
+                input.addEventListener('input', () => markValidity(input, null));
+                wrapper.appendChild(input);
+                wrapper.appendChild(makeFieldHint(element));
+                break;
+            }
+            case 'textarea': {
+                const ta = document.createElement('textarea');
+                ta.name = pathKey;
+                ta.rows = 4;
+                ta.dataset.type = 'textarea';
+                ta.className = 'w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none';
+                setTextValueFromPrefill(ta, element, ctx.prefill, element.key);
+                ta.addEventListener('input', () => markValidity(ta, null));
+                wrapper.appendChild(ta);
+                wrapper.appendChild(makeFieldHint(element));
+                break;
+            }
+            case 'number': {
+                const input = document.createElement('input');
+                input.type = 'number';
+                input.name = pathKey;
+                input.dataset.type = 'number';
+                input.className = 'w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500';
+                if (element.step != null) input.step = String(element.step);
+                if (element.min != null) input.min = String(element.min);
+                if (element.max != null) input.max = String(element.max);
+                setNumberFromPrefill(input, element, ctx.prefill, element.key);
+                input.addEventListener('blur', () => {
+                    if (input.value === '') return;
+                    const v = parseFloat(input.value);
+                    if (Number.isFinite(v) && Number.isInteger(element.decimals ?? 0)) {
+                        input.value = String(Number(v.toFixed(element.decimals)));
+                    }
+                });
+                input.addEventListener('input', () => markValidity(input, null));
+                wrapper.appendChild(input);
+                wrapper.appendChild(makeFieldHint(element, `decimals=${element.decimals ?? 0}`));
+                break;
+            }
+            case 'select': {
+                const sel = document.createElement('select');
+                sel.name = pathKey;
+                sel.dataset.type = 'select';
+                sel.className = 'w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500';
+                
+                if (!element.required) {
+                    const opt = document.createElement('option');
+                    opt.value = '';
+                    opt.textContent = '—';
+                    sel.appendChild(opt);
+                }
+                
+                element.options.forEach(o => {
+                    const opt = document.createElement('option');
+                    opt.value = String(o.value);
+                    opt.textContent = o.label ?? String(o.value);
+                    sel.appendChild(opt);
+                });
+                
+                setSelectFromPrefill(sel, element, ctx.prefill, element.key);
+                sel.addEventListener('input', () => markValidity(sel, null));
+                wrapper.appendChild(sel);
+                break;
+            }
+            case 'file': {
+                const hid = document.createElement('input');
+                hid.type = 'hidden';
+                hid.name = pathKey;
+                hid.dataset.type = 'file';
+                
+                const container = document.createElement('div');
+                container.className = 'file-container';
+                
+                // Preview container
+                const previewContainer = document.createElement('div');
+                previewContainer.className = 'aspect-square w-full max-w-xs bg-gray-100 rounded-lg overflow-hidden border-2 border-dashed border-gray-300 hover:border-gray-400 transition-colors relative group cursor-pointer mb-3';
+                previewContainer.onclick = () => picker.click();
+                
+                const picker = document.createElement('input');
+                picker.type = 'file';
+                if (element.accept?.extensions) {
+                    picker.accept = element.accept.extensions.map(ext => `.${ext}`).join(',');
+                }
+                
+                const handleFileSelect = async (file) => {
+                    const err = fileValidationError(element, file);
+                    if (err) {
+                        markValidity(picker, err);
+                        return;
+                    }
+                    
+                    try {
+                        let resourceId;
+                        
+                        // Use custom upload function if provided
+                        if (config.uploadFile && typeof config.uploadFile === 'function') {
+                            resourceId = await config.uploadFile(file);
+                        } else {
+                            // Fallback to simulated resource ID
+                            resourceId = await makeResourceIdFromFile(file);
+                            resourceIndex.set(resourceId, { name: file.name, type: file.type, size: file.size });
+                        }
+                        
+                        hid.value = resourceId;
+                        await renderFilePreview(previewContainer, resourceId, file.name, file.type);
+                        markValidity(picker, null);
+                    } catch (error) {
+                        markValidity(picker, `Upload failed: ${error.message}`);
+                    }
+                };
+                
+                picker.addEventListener('change', async () => {
+                    if (picker.files && picker.files[0]) {
+                        await handleFileSelect(picker.files[0]);
+                    }
+                });
+                
+                // Handle prefilled values
+                const pv = ctx.prefill && ctx.prefill[element.key];
+                if (typeof pv === 'string' && pv) {
+                    hid.value = pv;
+                    // Try to render preview for existing resource
+                    const fileName = `file_${pv.slice(-8)}`;
+                    renderFilePreview(previewContainer, pv, fileName, 'application/octet-stream');
+                } else {
+                    // Show upload prompt
+                    previewContainer.innerHTML = '<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">📁</div><div class="text-sm">Click to upload</div></div>';
+                }
+                
+                const helpText = document.createElement('p');
+                helpText.className = 'text-xs text-gray-600 mt-2 text-center';
+                helpText.innerHTML = '<span class="underline cursor-pointer">Upload</span> or drag and drop file';
+                helpText.onclick = () => picker.click();
+                
+                container.appendChild(previewContainer);
+                container.appendChild(helpText);
+                container.appendChild(picker);
+                container.appendChild(hid);
+                
+                wrapper.appendChild(container);
+                wrapper.appendChild(makeFieldHint(element, 'Returns resource ID for download/submission'));
+                break;
+            }
+            case 'files': {
+                const hid = document.createElement('input');
+                hid.type = 'hidden';
+                hid.name = pathKey;
+                hid.dataset.type = 'files';
+                
+                const list = document.createElement('div');
+                list.className = 'flex flex-wrap gap-1.5 mt-2';
+                
+                const picker = document.createElement('input');
+                picker.type = 'file';
+                picker.multiple = true;
+                if (element.accept?.extensions) {
+                    picker.accept = element.accept.extensions.map(ext => `.${ext}`).join(',');
+                }
+                
+                picker.addEventListener('change', async () => {
+                    let arr = parseJSONSafe(hid.value, []);
+                    if (!Array.isArray(arr)) arr = [];
+                    
+                    if (picker.files && picker.files.length) {
+                        for (const file of picker.files) {
+                            const err = fileValidationError(element, file);
+                            if (err) {
+                                markValidity(picker, err);
+                                return;
+                            }
+                        }
+                        
+                        for (const file of picker.files) {
+                            const rid = await makeResourceIdFromFile(file);
+                            resourceIndex.set(rid, { name: file.name, type: file.type, size: file.size });
+                            arr.push(rid);
+                        }
+                        
+                        hid.value = JSON.stringify(arr);
+                        renderResourcePills(list, arr, (ridToRemove) => {
+                            const next = arr.filter(x => x !== ridToRemove);
+                            hid.value = JSON.stringify(next);
+                            arr = next;
+                            renderResourcePills(list, next, arguments.callee);
+                        });
+                        markValidity(picker, null);
+                    }
+                });
+                
+                const pv = ctx.prefill && ctx.prefill[element.key];
+                let initial = Array.isArray(pv) ? pv.filter(Boolean) : [];
+                if (initial.length) {
+                    hid.value = JSON.stringify(initial);
+                    renderResourcePills(list, initial, (ridToRemove) => {
+                        const next = initial.filter(x => x !== ridToRemove);
+                        hid.value = JSON.stringify(next);
+                        initial = next;
+                        renderResourcePills(list, next, arguments.callee);
+                    });
+                }
+                
+                wrapper.appendChild(picker);
+                wrapper.appendChild(list);
+                wrapper.appendChild(hid);
+                wrapper.appendChild(makeFieldHint(element, 'Multiple files return resource ID array'));
+                break;
+            }
+            case 'group': {
+                wrapper.dataset.group = element.key;
+                wrapper.dataset.groupPath = pathKey;
+                
+                const groupWrap = document.createElement('div');
+                
+                // Group title (above the whole group)
+                const groupTitle = document.createElement('div');
+                groupTitle.className = 'text-lg font-semibold text-gray-900 mb-4';
+                groupTitle.textContent = element.label || element.key;
+                groupWrap.appendChild(groupTitle);
+                
+                const header = document.createElement('div');
+                header.className = 'flex items-center justify-between my-2 pb-2 border-b border-gray-200';
+                
+                const left = document.createElement('div');
+                header.appendChild(left);
+                
+                const right = document.createElement('div');
+                groupWrap.appendChild(header);
+                
+                const itemsWrap = document.createElement('div');
+                itemsWrap.dataset.itemsFor = element.key;
+
+                if (element.repeat && isPlainObject(element.repeat)) {
+                    const min = element.repeat.min ?? 0;
+                    const max = element.repeat.max ?? Infinity;
+                    const pre = Array.isArray(ctx.prefill?.[element.key]) ? ctx.prefill[element.key] : null;
+                    
+                    const addBtn = document.createElement('button');
+                    addBtn.type = 'button';
+                    addBtn.className = 'bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded-md text-sm font-medium transition-colors';
+                    addBtn.textContent = 'Add';
+                    right.appendChild(addBtn);
+                    header.appendChild(right);
+
+                    const countItems = () => itemsWrap.querySelectorAll(':scope > .groupItem').length;
+                    const refreshControls = () => {
+                        const n = countItems();
+                        addBtn.disabled = n >= max;
+                        left.innerHTML = `<span class="text-sm text-gray-600">Items: ${n} / ${max === Infinity ? '∞' : max} (min: ${min})</span>`;
+                    };
+
+                    const updateItemIndexes = () => {
+                        const items = itemsWrap.querySelectorAll(':scope > .groupItem');
+                        items.forEach((item, index) => {
+                            const titleElement = item.querySelector('h4');
+                            if (titleElement) {
+                                let labelText;
+                                if (element.element_label) {
+                                    labelText = element.element_label.replace('$index', index + 1);
+                                } else {
+                                    labelText = `${element.label || element.key} #${index + 1}`;
+                                }
+                                titleElement.textContent = labelText;
+                            }
+                        });
+                    };
+
+                    const addItem = (prefillObj) => {
+                        const itemIndex = countItems() + 1;
+                        const item = document.createElement('div');
+                        item.className = 'groupItem border border-dashed border-gray-300 rounded-lg p-4 mb-3 bg-blue-50/30';
+                        
+                        // Individual item title with index
+                        const itemTitle = document.createElement('div');
+                        itemTitle.className = 'flex items-center justify-between mb-4 pb-2 border-b border-gray-300';
+                        
+                        const itemLabel = document.createElement('h4');
+                        itemLabel.className = 'text-md font-medium text-gray-800';
+                        
+                        // Use element_label if provided, with $index placeholder support
+                        let labelText;
+                        if (element.element_label) {
+                            labelText = element.element_label.replace('$index', itemIndex);
+                        } else {
+                            labelText = `${element.label || element.key} #${itemIndex}`;
+                        }
+                        itemLabel.textContent = labelText;
+                        itemTitle.appendChild(itemLabel);
+                        
+                        // Add remove button to title
+                        const rem = document.createElement('button');
+                        rem.type = 'button';
+                        rem.className = 'bg-red-500 hover:bg-red-600 text-white px-2 py-1 rounded text-xs font-medium transition-colors';
+                        rem.textContent = 'Remove';
+                        rem.addEventListener('click', () => {
+                            if (countItems() <= (element.repeat.min ?? 0)) return;
+                            itemsWrap.removeChild(item);
+                            refreshControls();
+                            // Re-index remaining items
+                            updateItemIndexes();
+                        });
+                        itemTitle.appendChild(rem);
+                        
+                        const subCtx = { 
+                            path: pathJoin(ctx.path, element.key + `[${countItems()}]`), 
+                            prefill: prefillObj || {} 
+                        };
+                        
+                        item.appendChild(itemTitle);
+                        element.elements.forEach(child => item.appendChild(renderElement(child, subCtx, options)));
+                        itemsWrap.appendChild(item);
+                        refreshControls();
+                    };
+
+                    groupWrap.appendChild(itemsWrap);
+                    
+                    if (pre && pre.length) {
+                        const n = Math.min(max, Math.max(min, pre.length));
+                        for (let i = 0; i < n; i++) addItem(pre[i]);
+                    } else {
+                        const n = Math.max(min, 0);
+                        for (let i = 0; i < n; i++) addItem(null);
+                    }
+                    
+                    addBtn.addEventListener('click', () => addItem(null));
+                } else {
+                    // Single object group
+                    const subCtx = { 
+                        path: pathJoin(ctx.path, element.key), 
+                        prefill: ctx.prefill?.[element.key] || {} 
+                    };
+                    element.elements.forEach(child => itemsWrap.appendChild(renderElement(child, subCtx, options)));
+                    groupWrap.appendChild(itemsWrap);
+                }
+
+                wrapper.innerHTML = '';
+                wrapper.appendChild(groupWrap);
+                break;
+            }
+            default:
+                wrapper.appendChild(document.createTextNode(`Unsupported type: ${element.type}`));
+        }
+        
+        return wrapper;
+    }
+
+    // Form data collection and validation
+    function collectAndValidate(schema, formRoot, skipValidation = false) {
+        const errors = [];
+
+        function collectElement(element, scopeRoot, elementPath = '') {
+            const key = element.key;
+            const fullPath = elementPath ? `${elementPath}.${key}` : key;
+            
+            switch (element.type) {
+                case 'text':
+                case 'textarea': {
+                    const input = scopeRoot.querySelector(`[name$="${key}"]`);
+                    const val = (input?.value ?? '').trim();
+                    if (!skipValidation && element.required && val === '') {
+                        errors.push(`Field "${fullPath}" is required`);
+                        markValidity(input, 'required');
+                    } else if (!skipValidation && val !== '') {
+                        if (element.minLength != null && val.length < element.minLength) {
+                            errors.push(`Field "${fullPath}" must be at least ${element.minLength} characters`);
+                            markValidity(input, `minLength=${element.minLength}`);
+                        }
+                        if (element.maxLength != null && val.length > element.maxLength) {
+                            errors.push(`Field "${fullPath}" must be at most ${element.maxLength} characters`);
+                            markValidity(input, `maxLength=${element.maxLength}`);
+                        }
+                        if (element.pattern) {
+                            try {
+                                const re = new RegExp(element.pattern);
+                                if (!re.test(val)) {
+                                    errors.push(`Field "${fullPath}" does not match required format`);
+                                    markValidity(input, 'pattern mismatch');
+                                }
+                            } catch {
+                                errors.push(`Field "${fullPath}" has invalid validation pattern`);
+                                markValidity(input, 'invalid pattern');
+                            }
+                        }
+                    } else if (skipValidation) {
+                        markValidity(input, null);
+                    } else {
+                        markValidity(input, null);
+                    }
+                    return val;
+                }
+                case 'number': {
+                    const input = scopeRoot.querySelector(`[name$="${key}"]`);
+                    const raw = input?.value ?? '';
+                    if (!skipValidation && element.required && raw === '') {
+                        errors.push(`${key}: required`);
+                        markValidity(input, 'required');
+                        return null;
+                    }
+                    if (raw === '') {
+                        markValidity(input, null);
+                        return null;
+                    }
+                    const v = parseFloat(raw);
+                    if (!skipValidation && !Number.isFinite(v)) {
+                        errors.push(`${key}: not a number`);
+                        markValidity(input, 'not a number');
+                        return null;
+                    }
+                    if (!skipValidation && element.min != null && v < element.min) {
+                        errors.push(`${key}: < min=${element.min}`);
+                        markValidity(input, `< min=${element.min}`);
+                    }
+                    if (!skipValidation && element.max != null && v > element.max) {
+                        errors.push(`${key}: > max=${element.max}`);
+                        markValidity(input, `> max=${element.max}`);
+                    }
+                    const d = Number.isInteger(element.decimals ?? 0) ? element.decimals : 0;
+                    const r = Number(v.toFixed(d));
+                    input.value = String(r);
+                    markValidity(input, null);
+                    return r;
+                }
+                case 'select': {
+                    const sel = scopeRoot.querySelector(`select[name$="${key}"]`);
+                    const val = sel?.value ?? '';
+                    const values = new Set(element.options.map(o => String(o.value)));
+                    if (!skipValidation && element.required && val === '') {
+                        errors.push(`${key}: required`);
+                        markValidity(sel, 'required');
+                        return '';
+                    }
+                    if (!skipValidation && val !== '' && !values.has(String(val))) {
+                        errors.push(`${key}: value not in options`);
+                        markValidity(sel, 'not in options');
+                    } else {
+                        markValidity(sel, null);
+                    }
+                    return val === '' ? null : val;
+                }
+                case 'file': {
+                    const hid = scopeRoot.querySelector(`input[type="hidden"][name$="${key}"]`);
+                    const rid = hid?.value ?? '';
+                    if (!skipValidation && element.required && !rid) {
+                        errors.push(`${key}: required (file missing)`);
+                        const picker = hid?.previousElementSibling;
+                        if (picker) markValidity(picker, 'required');
+                    } else {
+                        if (hid?.previousElementSibling) markValidity(hid.previousElementSibling, null);
+                    }
+                    return rid || null;
+                }
+                case 'files': {
+                    const hid = scopeRoot.querySelector(`input[type="hidden"][name$="${key}"]`);
+                    const arr = parseJSONSafe(hid?.value ?? '[]', []);
+                    const count = Array.isArray(arr) ? arr.length : 0;
+                    if (!skipValidation && !Array.isArray(arr)) errors.push(`${key}: internal value corrupted`);
+                    if (!skipValidation && element.minCount != null && count < element.minCount) {
+                        errors.push(`${key}: < minCount=${element.minCount}`);
+                    }
+                    if (!skipValidation && element.maxCount != null && count > element.maxCount) {
+                        errors.push(`${key}: > maxCount=${element.maxCount}`);
+                    }
+                    if (hid?.previousElementSibling) markValidity(hid.previousElementSibling, null);
+                    return Array.isArray(arr) ? arr : [];
+                }
+                case 'group': {
+                    const groupWrapper = scopeRoot.querySelector(`[data-group="${key}"]`);
+                    if (!groupWrapper) {
+                        errors.push(`${key}: internal group wrapper not found`);
+                        return element.repeat ? [] : {};
+                    }
+                    const itemsWrap = groupWrapper.querySelector(`[data-items-for="${key}"]`);
+                    if (!itemsWrap) {
+                        errors.push(`${key}: internal items container not found`);
+                        return element.repeat ? [] : {};
+                    }
+
+                    if (element.repeat && isPlainObject(element.repeat)) {
+                        const items = itemsWrap.querySelectorAll(':scope > .groupItem');
+                        const out = [];
+                        const n = items.length;
+                        const min = element.repeat.min ?? 0;
+                        const max = element.repeat.max ?? Infinity;
+                        if (!skipValidation && n < min) errors.push(`${key}: count < min=${min}`);
+                        if (!skipValidation && n > max) errors.push(`${key}: count > max=${max}`);
+                        items.forEach((item, index) => {
+                            const obj = {};
+                            element.elements.forEach(child => {
+                                obj[child.key] = collectElement(child, item, `${fullPath}[${index}]`);
+                            });
+                            out.push(obj);
+                        });
+                        return out;
+                    } else {
+                        const obj = {};
+                        element.elements.forEach(child => {
+                            obj[child.key] = collectElement(child, itemsWrap, fullPath);
+                        });
+                        return obj;
+                    }
+                }
+                default:
+                    errors.push(`${key}: unsupported type ${element.type}`);
+                    return null;
+            }
+        }
+
+        const result = {};
+        schema.elements.forEach(element => {
+            result[element.key] = collectElement(element, formRoot, '');
+        });
+        
+        return { result, errors };
+    }
+
+    // Main form rendering function
+    function renderForm(schema, container, options = {}) {
+        const { 
+            prefill = {}, 
+            readonly = false, 
+            debug = false,
+            onSubmit, 
+            onDraft, 
+            onError,
+            buttons = {}
+        } = options;
+        
+        if (debug) {
+            console.log('[FormBuilder Debug] Rendering form with schema:', schema);
+            console.log('[FormBuilder Debug] Options:', options);
+        }
+        
+        // Validate schema first
+        const schemaErrors = validateSchema(schema);
+        if (schemaErrors.length > 0) {
+            if (onError) onError(schemaErrors);
+            throw new Error('Schema validation failed: ' + schemaErrors.join(', '));
+        }
+        
+        // Clear container
+        clear(container);
+        
+        // Create form element
+        const formEl = document.createElement('form');
+        formEl.addEventListener('submit', (e) => e.preventDefault());
+
+        const ctx = { path: '', prefill: prefill || {} };
+        schema.elements.forEach(element => {
+            const block = renderElement(element, ctx, { readonly });
+            formEl.appendChild(block);
+        });
+
+        // Add action buttons if not readonly
+        if (!readonly) {
+            const buttonContainer = document.createElement('div');
+            buttonContainer.className = 'flex gap-2 pt-4 border-t border-gray-200 mt-6';
+            
+            const submitBtn = document.createElement('button');
+            submitBtn.type = 'button';
+            submitBtn.className = 'bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors';
+            submitBtn.textContent = buttons.submit || 'Submit Form';
+            submitBtn.addEventListener('click', () => {
+                if (debug) console.log('[FormBuilder Debug] Submit button clicked');
+                const { result, errors } = collectAndValidate(schema, formEl, false);
+                if (debug) console.log('[FormBuilder Debug] Validation result:', { result, errors });
+                if (errors.length > 0) {
+                    if (onError) onError(errors);
+                } else {
+                    if (onSubmit) onSubmit(result);
+                }
+            });
+            
+            const draftBtn = document.createElement('button');
+            draftBtn.type = 'button';
+            draftBtn.className = 'bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition-colors';
+            draftBtn.textContent = buttons.draft || 'Save Draft';
+            draftBtn.addEventListener('click', () => {
+                if (debug) console.log('[FormBuilder Debug] Draft button clicked');
+                const { result } = collectAndValidate(schema, formEl, true); // Skip validation for drafts
+                if (debug) console.log('[FormBuilder Debug] Draft result:', result);
+                if (onDraft) onDraft(result);
+            });
+            
+            buttonContainer.appendChild(submitBtn);
+            buttonContainer.appendChild(draftBtn);
+            formEl.appendChild(buttonContainer);
+        }
+
+        container.appendChild(formEl);
+        return formEl;
+    }
+
+    // Configuration functions
+    function setConfig(newConfig) {
+        Object.assign(config, newConfig);
+    }
+
+    function setUploadHandler(uploadFn) {
+        config.uploadFile = uploadFn;
+    }
+
+    function setDownloadHandler(downloadFn) {
+        config.downloadFile = downloadFn;
+    }
+
+    function setThumbnailHandler(thumbnailFn) {
+        config.getThumbnail = thumbnailFn;
+    }
+
+    // Generate prefill template
+    function generatePrefillTemplate(schema) {
+        function walk(elements) {
+            const obj = {};
+            for (const el of elements) {
+                switch (el.type) {
+                    case 'text':
+                    case 'textarea':
+                    case 'select':
+                    case 'number':
+                        obj[el.key] = el.default ?? null;
+                        break;
+                    case 'file':
+                        obj[el.key] = null;
+                        break;
+                    case 'files':
+                        obj[el.key] = [];
+                        break;
+                    case 'group':
+                        if (el.repeat && isPlainObject(el.repeat)) {
+                            const sample = walk(el.elements);
+                            const n = Math.max(el.repeat.min ?? 0, 1);
+                            obj[el.key] = Array.from({ length: n }, () => deepClone(sample));
+                        } else {
+                            obj[el.key] = walk(el.elements);
+                        }
+                        break;
+                    default:
+                        obj[el.key] = null;
+                }
+            }
+            return obj;
+        }
+        return walk(schema.elements);
+    }
+
+    // Public API
+    exports.renderForm = renderForm;
+    exports.validateSchema = validateSchema;
+    exports.collectAndValidate = collectAndValidate;
+    exports.generatePrefillTemplate = generatePrefillTemplate;
+    exports.setConfig = setConfig;
+    exports.setUploadHandler = setUploadHandler;
+    exports.setDownloadHandler = setDownloadHandler;
+    exports.setThumbnailHandler = setThumbnailHandler;
+    exports.version = '0.1.5';
+
+}));