@dmitryvim/form-builder 0.1.9 → 0.1.12

package/dist/form-builder.js

@@ -1,1327 +1,1377 @@
-/**
- * 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' || el.type === 'videos')) {
-                    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 === 'videos') {
-                    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 = {
+// Form Builder Library - Core API
+// State management
+const state = { 
+    schema: null, 
+    formRoot: null, 
+    resourceIndex: new Map(),
+    version: '1.0.0',
+    config: {
+        // File upload configuration
         uploadFile: null,
         downloadFile: null,
         getThumbnail: null,
-        getPreviewUrl: null,
+        getDownloadUrl: null,
+        // Default implementations
         enableFilePreview: true,
-        maxPreviewSize: '200px'
-    };
-
-    // Lightweight preview modal
-    function ensurePreviewModal() {
-        let modal = document.getElementById('fb-preview-modal');
-        if (modal) return modal;
-        modal = document.createElement('div');
-        modal.id = 'fb-preview-modal';
-        modal.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.75);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;';
-        const inner = document.createElement('div');
-        inner.style.cssText = 'position:relative;max-width:90vw;max-height:90vh;background:#0b0b0b;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;';
-        const close = document.createElement('button');
-        close.textContent = '✕';
-        close.title = 'Close';
-        close.style.cssText = 'position:absolute;top:8px;right:8px;background:#111;color:#fff;border:1px solid #333;border-radius:6px;padding:4px 8px;cursor:pointer;';
-        close.addEventListener('click', () => hidePreviewModal());
-        const mediaWrap = document.createElement('div');
-        mediaWrap.style.cssText = 'display:flex;align-items:center;justify-content:center;max-height:70vh;';
-        const actions = document.createElement('div');
-        actions.style.cssText = 'display:flex;gap:8px;justify-content:flex-end;';
-        const downloadBtn = document.createElement('button');
-        downloadBtn.textContent = 'Download';
-        downloadBtn.style.cssText = 'background:#e5e7eb;color:#111;border-radius:8px;padding:6px 10px;border:0;cursor:pointer;';
-        actions.appendChild(downloadBtn);
-        inner.appendChild(close);
-        inner.appendChild(mediaWrap);
-        inner.appendChild(actions);
-        modal.appendChild(inner);
-        modal.addEventListener('click', (e) => { if (e.target === modal) hidePreviewModal(); });
-        document.addEventListener('keydown', (e) => { if (e.key === 'Escape') hidePreviewModal(); });
-        document.body.appendChild(modal);
-        modal._mediaWrap = mediaWrap;
-        modal._downloadBtn = downloadBtn;
-        return modal;
+        maxPreviewSize: '200px',
+        readonly: false
     }
+};
 
-    async function showPreviewModal(resourceId, fileName, fileType) {
-        const modal = ensurePreviewModal();
-        const wrap = modal._mediaWrap;
-        wrap.innerHTML = '';
-        let src = null;
-        if (config.getPreviewUrl && typeof config.getPreviewUrl === 'function') {
-            try { src = await config.getPreviewUrl(resourceId); } catch {}
-        }
-        if (!src && config.getThumbnail && typeof config.getThumbnail === 'function') {
-            try { src = await config.getThumbnail(resourceId); } catch {}
-        }
-        if (fileType?.startsWith?.('image/')) {
-            const img = document.createElement('img');
-            if (src) img.src = src;
-            img.alt = fileName || resourceId;
-            img.style.cssText = 'max-width:85vw;max-height:80vh;border-radius:8px;object-fit:contain;background:#111';
-            wrap.appendChild(img);
-        } else if (fileType?.startsWith?.('video/')) {
-            const video = document.createElement('video');
-            video.controls = true;
-            if (src) video.src = src;
-            video.style.cssText = 'max-width:85vw;max-height:80vh;border-radius:8px;background:#000';
-            wrap.appendChild(video);
-        } else {
-            const box = document.createElement('div');
-            box.style.cssText = 'color:#e5e7eb;padding:24px;';
-            box.textContent = fileName || resourceId;
-            wrap.appendChild(box);
-        }
-        modal._downloadBtn.onclick = async () => {
-            if (config.downloadFile && typeof config.downloadFile === 'function') {
-                try { await config.downloadFile(resourceId, fileName || 'file'); } catch {}
-            } else {
-                console.log('Download simulated:', resourceId, fileName || 'file');
-            }
-        };
-        modal.style.display = 'flex';
-    }
+// Utility functions
+function isPlainObject(obj) {
+    return obj && typeof obj === 'object' && obj.constructor === Object;
+}
 
-    function hidePreviewModal() {
-        const modal = document.getElementById('fb-preview-modal');
-        if (modal) modal.style.display = 'none';
-    }
+function pathJoin(base, key) {
+    return base ? `${base}.${key}` : key;
+}
 
-    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 pretty(obj) {
+    return JSON.stringify(obj, null, 2);
+}
 
-    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 clear(node) {
+    while (node.firstChild) node.removeChild(node.firstChild);
+}
 
-    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;
+// Schema validation
+function validateSchema(schema) {
+    const errors = [];
+    
+    if (!schema || typeof schema !== 'object') {
+        errors.push('Schema must be an object');
+        return errors;
     }
-
-    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);
-        }
+    
+    if (!schema.version) {
+        errors.push('Schema missing version');
     }
-
-    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}`);
-        }
-        if (element.type === 'videos') {
-            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;
+    
+    if (!Array.isArray(schema.elements)) {
+        errors.push('Schema missing elements array');
+        return errors;
     }
-
-    async function renderFilePreview(container, resourceId, fileName, fileType) {
-        container.innerHTML = '';
-        
-        const preview = document.createElement('div');
-        preview.className = 'flex items-center gap-3 p-2';
-        const isReadonly = container.closest('.file-container')?.dataset.readonly === 'true';
-        
-        // 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';
+    
+    function validateElements(elements, path) {
+        elements.forEach((element, index) => {
+            const elementPath = `${path}[${index}]`;
             
-            // 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);
+            if (!element.type) {
+                errors.push(`${elementPath}: missing type`);
             }
-        });
-        
-        actions.appendChild(downloadBtn);
-        // Open button (preview modal)
-        const openBtn = document.createElement('button');
-        openBtn.className = 'px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded transition-colors';
-        openBtn.textContent = 'Open';
-        openBtn.title = 'Open preview';
-        openBtn.addEventListener('click', async () => {
-            await showPreviewModal(resourceId, fileName, fileType);
-        });
-        actions.appendChild(openBtn);
-        if (!isReadonly) {
-            // Remove button (editable only)
-            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(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 (!element.key) {
+                errors.push(`${elementPath}: missing key`);
             }
             
-            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);
+            if (element.type === 'group' && element.elements) {
+                validateElements(element.elements, `${elementPath}.elements`);
             }
             
-            container.appendChild(pill);
+            if (element.type === 'select' && element.options) {
+                const defaultValue = element.default;
+                if (defaultValue !== undefined && defaultValue !== null && defaultValue !== '') {
+                    const hasMatchingOption = element.options.some(opt => opt.value === defaultValue);
+                    if (!hasMatchingOption) {
+                        errors.push(`${elementPath}: default "${defaultValue}" not in options`);
+                    }
+                }
+            }
         });
     }
+    
+    if (Array.isArray(schema.elements)) validateElements(schema.elements, 'elements');
+    return errors;
+}
+
+// Form rendering
+function renderForm(schema, prefill) {
+    const errors = validateSchema(schema);
+    if (errors.length > 0) {
+        console.error('Schema validation errors:', errors);
+        return;
+    }
+    
+    state.schema = schema;
+    if (!state.formRoot) {
+        console.error('No form root element set. Call setFormRoot() first.');
+        return;
+    }
+    
+    clear(state.formRoot);
+    
+    const formEl = document.createElement('div');
+    formEl.className = 'space-y-6';
+    
+    schema.elements.forEach(element => {
+        const block = renderElement(element, { 
+            path: '', 
+            prefill: prefill || {} 
+        });
+        formEl.appendChild(block);
+    });
 
-    function renderElement(element, ctx, options = {}) {
-        const wrapper = document.createElement('div');
-        wrapper.className = 'mb-6';
+    state.formRoot.appendChild(formEl);
+}
+
+function renderElement(element, ctx) {
+    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);
+    
+    // Add info button if there's description or hint
+    if (element.description || element.hint) {
+        const infoBtn = document.createElement('button');
+        infoBtn.type = 'button';
+        infoBtn.className = 'ml-2 text-gray-400 hover:text-gray-600';
+        infoBtn.innerHTML = '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>';
         
-        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);
+        // Create tooltip
+        const tooltipId = `tooltip-${element.key}-${Math.random().toString(36).substr(2, 9)}`;
+        const tooltip = document.createElement('div');
+        tooltip.id = tooltipId;
+        tooltip.className = 'hidden absolute z-50 bg-gray-200 text-gray-900 text-sm rounded-lg p-3 max-w-sm border border-gray-300 shadow-lg';
+        tooltip.style.position = 'fixed';
+        tooltip.textContent = element.description || element.hint || 'Field information';
+        document.body.appendChild(tooltip);
+        
+        infoBtn.onclick = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            showTooltip(tooltipId, infoBtn);
+        };
+        
+        label.appendChild(infoBtn);
+    }
+    
+    wrapper.appendChild(label);
 
-        const pathKey = pathJoin(ctx.path, element.key);
+    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);
+    switch (element.type) {
+        case 'text':
+            renderTextElement(element, ctx, wrapper, pathKey);
+            break;
+
+        case 'textarea':
+            renderTextareaElement(element, ctx, wrapper, pathKey);
+            break;
+
+        case 'number':
+            renderNumberElement(element, ctx, wrapper, pathKey);
+            break;
+
+        case 'select':
+            renderSelectElement(element, ctx, wrapper, pathKey);
+            break;
+
+        case 'file':
+            // TODO: Extract to renderFileElement() function
+            if (state.config.readonly) {
+                // Readonly mode: use common preview function
+                const initial = ctx.prefill[element.key] || element.default;
+                if (initial) {
+                    const filePreview = renderFilePreviewReadonly(initial);
+                    wrapper.appendChild(filePreview);
+                } else {
+                    const emptyState = document.createElement('div');
+                    emptyState.className = 'aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500';
+                    emptyState.innerHTML = '<div class="text-center">Нет файла</div>';
+                    wrapper.appendChild(emptyState);
                 }
+            } else {
+                // Edit mode: normal file input
+                const fileWrapper = document.createElement('div');
+                fileWrapper.className = 'space-y-2';
                 
-                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 picker = document.createElement('input');
+                picker.type = 'file';
+                picker.name = pathKey;
+                picker.style.display = 'none'; // Hide default input
+                if (element.accept) {
+                    if (element.accept.extensions) {
+                        picker.accept = element.accept.extensions.map(ext => `.${ext}`).join(',');
+                    }
+                }
                 
-                const container = document.createElement('div');
-                container.className = 'file-container';
+                const fileContainer = document.createElement('div');
+                fileContainer.className = 'file-preview-container w-full aspect-square max-w-xs bg-gray-100 rounded-lg overflow-hidden relative group cursor-pointer';
                 
-                // Preview container
-                const previewContainer = document.createElement('div');
-                if (options.readonly) {
-                    container.dataset.readonly = 'true';
-                    previewContainer.className = 'aspect-square w-full max-w-xs bg-gray-100 rounded-lg overflow-hidden border-2 border-gray-300 transition-colors relative mb-3';
+                const initial = ctx.prefill[element.key] || element.default;
+                if (initial) {
+                    renderFilePreview(fileContainer, initial, initial, '');
                 } else {
-                    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';
+                    fileContainer.innerHTML = `
+                        <div class="flex flex-col items-center justify-center h-full text-gray-400">
+                            <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+                            </svg>
+                            <div class="text-sm text-center">Нажмите или перетащите файл</div>
+                        </div>
+                    `;
                 }
                 
-                let picker = null;
-                if (!options.readonly) {
-                    picker = document.createElement('input');
-                    picker.type = 'file';
-                    if (element.accept?.extensions) {
-                        picker.accept = element.accept.extensions.map(ext => `.${ext}`).join(',');
+                fileContainer.onclick = () => picker.click();
+                setupDragAndDrop(fileContainer, (files) => {
+                    if (files.length > 0) {
+                        handleFileSelect(files[0], fileContainer, pathKey);
                     }
-                    previewContainer.onclick = () => picker.click();
-                }
+                });
                 
-                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.onchange = () => {
+                    if (picker.files.length > 0) {
+                        handleFileSelect(picker.files[0], fileContainer, pathKey);
                     }
                 };
                 
-                if (!options.readonly) {
-                    picker.addEventListener('change', async () => {
-                        if (picker.files && picker.files[0]) {
-                            await handleFileSelect(picker.files[0]);
-                        }
-                    });
-                }
+                fileWrapper.appendChild(fileContainer);
+                fileWrapper.appendChild(picker);
                 
-                // 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 (editable only)
-                    if (!options.readonly) {
-                        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>';
-                    } else {
-                        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">No file</div></div>';
-                    }
-                }
-                
-                let helpText = null;
-                if (!options.readonly) {
-                    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();
-                }
+                // Add upload text
+                const uploadText = document.createElement('p');
+                uploadText.className = 'text-xs text-gray-600 mt-2 text-center';
+                uploadText.innerHTML = `<span class="underline cursor-pointer">Загрузите</span> или перетащите файл`;
+                uploadText.querySelector('span').onclick = () => picker.click();
+                fileWrapper.appendChild(uploadText);
                 
-                container.appendChild(previewContainer);
-                if (helpText) container.appendChild(helpText);
-                if (picker) container.appendChild(picker);
-                container.appendChild(hid);
+                // Add hint
+                const fileHint = document.createElement('p');
+                fileHint.className = 'text-xs text-gray-500 mt-1 text-center';
+                fileHint.textContent = makeFieldHint(element);
+                fileWrapper.appendChild(fileHint);
                 
-                wrapper.appendChild(container);
-                wrapper.appendChild(makeFieldHint(element, options.readonly ? 'Read-only' : 'Returns resource ID for download/submission'));
-                break;
+                wrapper.appendChild(fileWrapper);
             }
-            case 'files': {
-                const hid = document.createElement('input');
-                hid.type = 'hidden';
-                hid.name = pathKey;
-                hid.dataset.type = 'files';
-                
-                const list = document.createElement('div');
-                list.className = options.readonly ? 'flex flex-col gap-2 mt-2' : 'flex flex-wrap gap-1.5 mt-2';
+            break;
+
+        case 'files':
+            // TODO: Extract to renderFilesElement() function
+            if (state.config.readonly) {
+                // Readonly mode: render as results list like in workflow-preview.html
+                const resultsWrapper = document.createElement('div');
+                resultsWrapper.className = 'space-y-4';
                 
-                let picker = null;
-                if (!options.readonly) {
-                    picker = document.createElement('input');
-                    picker.type = 'file';
-                    picker.multiple = true;
-                    if (element.accept?.extensions) {
-                        picker.accept = element.accept.extensions.map(ext => `.${ext}`).join(',');
-                    }
-                }
+                const initialFiles = ctx.prefill[element.key] || [];
                 
-                if (picker) {
-                    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) {
-                                try {
-                                    let resourceId;
-                                    if (config.uploadFile && typeof config.uploadFile === 'function') {
-                                        resourceId = await config.uploadFile(file);
-                                    } else {
-                                        resourceId = await makeResourceIdFromFile(file);
-                                    }
-                                    resourceIndex.set(resourceId, { name: file.name, type: file.type, size: file.size });
-                                    arr.push(resourceId);
-                                } catch (error) {
-                                    markValidity(picker, `Upload failed: ${error.message}`);
-                                    return;
-                                }
-                            }
-                            
-                            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);
-                        }
+                if (initialFiles.length > 0) {
+                    initialFiles.forEach(resourceId => {
+                        const filePreview = renderFilePreviewReadonly(resourceId);
+                        resultsWrapper.appendChild(filePreview);
                     });
+                } else {
+                    resultsWrapper.innerHTML = `<div class="aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500"><div class="text-center">Нет файлов</div></div>`;
                 }
                 
-                const pv = ctx.prefill && ctx.prefill[element.key];
-                let initial = Array.isArray(pv) ? pv.filter(Boolean) : [];
-                if (initial.length) {
-                    hid.value = JSON.stringify(initial);
-                    if (options.readonly) {
-                        // Render each as small preview with download
-                        list.innerHTML = '';
-                        for (const rid of initial) {
-                            const row = document.createElement('div');
-                            row.className = 'file-container';
-                            row.dataset.readonly = 'true';
-                            const itemPreview = document.createElement('div');
-                            row.appendChild(itemPreview);
-                            renderFilePreview(itemPreview, rid, `file_${rid.slice(-8)}`, 'application/octet-stream');
-                            list.appendChild(row);
-                        }
-                    } else {
-                        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(resultsWrapper);
+            } else {
+                // Edit mode: normal files input
+                const filesWrapper = document.createElement('div');
+                filesWrapper.className = 'space-y-2';
+                
+                const filesPicker = document.createElement('input');
+                filesPicker.type = 'file';
+                filesPicker.name = pathKey;
+                filesPicker.multiple = true;
+                filesPicker.style.display = 'none'; // Hide default input
+                if (element.accept) {
+                    if (element.accept.extensions) {
+                        filesPicker.accept = element.accept.extensions.map(ext => `.${ext}`).join(',');
                     }
                 }
                 
-                if (picker) wrapper.appendChild(picker);
-                wrapper.appendChild(list);
-                wrapper.appendChild(hid);
-                wrapper.appendChild(makeFieldHint(element, options.readonly ? 'Read-only' : 'Multiple files return resource ID array'));
-                break;
-            }
-            case 'videos': {
-                const hid = document.createElement('input');
-                hid.type = 'hidden';
-                hid.name = pathKey;
-                hid.dataset.type = 'videos';
+                // Create container with border like in workflow-preview
+                const filesContainer = document.createElement('div');
+                filesContainer.className = 'border-2 border-dashed border-gray-300 rounded-lg p-3 hover:border-gray-400 transition-colors';
                 
                 const list = document.createElement('div');
-                list.className = 'flex flex-col gap-3 mt-2';
+                list.className = 'files-list';
                 
-                const picker = document.createElement('input');
-                picker.type = 'file';
-                picker.multiple = true;
-                {
-                    const acc = [];
-                    if (element.accept?.mime && Array.isArray(element.accept.mime) && element.accept.mime.length) {
-                        acc.push(...element.accept.mime);
-                    }
-                    if (element.accept?.extensions && Array.isArray(element.accept.extensions) && element.accept.extensions.length) {
-                        acc.push(...element.accept.extensions.map(ext => `.${ext}`));
-                    }
-                    picker.accept = acc.length ? acc.join(',') : 'video/*';
-                }
+                const initialFiles = ctx.prefill[element.key] || [];
                 
-                const renderVideos = (rids) => {
-                    list.innerHTML = '';
-                    rids.forEach(rid => {
-                        const meta = resourceIndex.get(rid) || {};
-                        const row = document.createElement('div');
-                        row.className = 'flex items-start gap-3';
-                        const video = document.createElement('video');
-                        video.controls = true;
-                        video.className = 'w-48 max-w-full rounded border border-gray-300';
-                        // Use thumbnail as poster instead of loading video src
-                        if (config.getThumbnail) {
-                            Promise.resolve(config.getThumbnail(rid)).then(url => {
-                                if (url) {
-                                    video.poster = url;
-                                }
-                            }).catch(() => {});
+                function updateFilesList() {
+                    renderResourcePills(list, initialFiles, (ridToRemove) => {
+                        const index = initialFiles.indexOf(ridToRemove);
+                        if (index > -1) {
+                            initialFiles.splice(index, 1);
                         }
-                        const info = document.createElement('div');
-                        info.className = 'flex-1 text-sm text-gray-700';
-                        info.textContent = `${meta.name || 'video'} (${formatFileSize(meta.size || 0)})`;
-                        const actions = document.createElement('div');
-                        actions.className = 'flex items-center gap-2';
-                        const downloadBtn = document.createElement('button');
-                        downloadBtn.type = 'button';
-                        downloadBtn.className = 'px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded';
-                        downloadBtn.textContent = 'Download';
-                        downloadBtn.addEventListener('click', async () => {
-                            if (config.downloadFile && typeof config.downloadFile === 'function') {
-                                try { await config.downloadFile(rid, meta.name || 'video'); } catch(_) {}
-                            } else {
-                                console.log('Download simulated:', rid, meta.name || 'video');
-                            }
-                        });
-                        const remove = document.createElement('button');
-                        remove.type = 'button';
-                        remove.className = 'px-2 py-1 text-xs bg-red-500 hover:bg-red-600 text-white rounded';
-                        remove.textContent = 'Remove';
-                        remove.addEventListener('click', () => {
-                            const arr = parseJSONSafe(hid.value, []);
-                            const next = Array.isArray(arr) ? arr.filter(x => x !== rid) : [];
-                            hid.value = JSON.stringify(next);
-                            renderVideos(next);
-                        });
-                        row.appendChild(video);
-                        row.appendChild(info);
-                        actions.appendChild(downloadBtn);
-                        actions.appendChild(remove);
-                        row.appendChild(actions);
-                        list.appendChild(row);
+                        updateFilesList(); // Re-render after removal
                     });
-                };
+                }
                 
-                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;
-                            }
-                            // additionally ensure it's a video
-                            if (!file.type.startsWith('video/')) {
-                                markValidity(picker, 'mime not allowed: ' + file.type);
-                                return;
+                // Initial render
+                updateFilesList();
+                
+                setupDragAndDrop(filesContainer, async (files) => {
+                    const arr = Array.from(files);
+                    for (const file of arr) {
+                        let rid;
+                        
+                        // If uploadHandler is configured, use it to upload the file
+                        if (state.config.uploadFile) {
+                            try {
+                                rid = await state.config.uploadFile(file);
+                                if (typeof rid !== 'string') {
+                                    throw new Error('Upload handler must return a string resource ID');
+                                }
+                            } catch (error) {
+                                throw new Error(`File upload failed: ${error.message}`);
                             }
+                        } else {
+                            throw new Error('No upload handler configured. Set uploadHandler via FormBuilder.setUploadHandler()');
                         }
-                        for (const file of picker.files) {
+                        
+                        state.resourceIndex.set(rid, {
+                            name: file.name,
+                            type: file.type,
+                            size: file.size,
+                            file: null // Files are always uploaded, never stored locally
+                        });
+                        initialFiles.push(rid);
+                    }
+                    updateFilesList();
+                });
+                
+                filesPicker.onchange = async () => {
+                    for (const file of Array.from(filesPicker.files)) {
+                        let rid;
+                        
+                        // If uploadHandler is configured, use it to upload the file
+                        if (state.config.uploadFile) {
                             try {
-                                let resourceId;
-                                if (config.uploadFile && typeof config.uploadFile === 'function') {
-                                    resourceId = await config.uploadFile(file);
-                                } else {
-                                    resourceId = await makeResourceIdFromFile(file);
+                                rid = await state.config.uploadFile(file);
+                                if (typeof rid !== 'string') {
+                                    throw new Error('Upload handler must return a string resource ID');
                                 }
-                                resourceIndex.set(resourceId, { name: file.name, type: file.type, size: file.size });
-                                arr.push(resourceId);
                             } catch (error) {
-                                markValidity(picker, `Upload failed: ${error.message}`);
-                                return;
+                                throw new Error(`File upload failed: ${error.message}`);
                             }
+                        } else {
+                            throw new Error('No upload handler configured. Set uploadHandler via FormBuilder.setUploadHandler()');
                         }
-                        hid.value = JSON.stringify(arr);
-                        renderVideos(arr);
-                        markValidity(picker, null);
+                        
+                        state.resourceIndex.set(rid, {
+                            name: file.name,
+                            type: file.type,
+                            size: file.size,
+                            file: null // Files are always uploaded, never stored locally
+                        });
+                        initialFiles.push(rid);
                     }
-                });
+                    updateFilesList();
+                    // Clear the file input
+                    filesPicker.value = '';
+                };
                 
-                const pv = ctx.prefill && ctx.prefill[element.key];
-                let initial = Array.isArray(pv) ? pv.filter(Boolean) : [];
-                if (initial.length) {
-                    hid.value = JSON.stringify(initial);
-                    renderVideos(initial);
-                }
+                filesContainer.appendChild(list);
                 
-                wrapper.appendChild(picker);
-                wrapper.appendChild(list);
-                wrapper.appendChild(hid);
-                wrapper.appendChild(makeFieldHint(element, 'Multiple videos return resource ID array'));
-                break;
-            }
-            case 'group': {
-                wrapper.dataset.group = element.key;
-                wrapper.dataset.groupPath = pathKey;
+                filesWrapper.appendChild(filesContainer);
+                filesWrapper.appendChild(filesPicker);
                 
-                const groupWrap = document.createElement('div');
+                // Add hint
+                const filesHint = document.createElement('p');
+                filesHint.className = 'text-xs text-gray-500 mt-1 text-center';
+                filesHint.textContent = makeFieldHint(element);
+                filesWrapper.appendChild(filesHint);
                 
-                // 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);
+                wrapper.appendChild(filesWrapper);
+            }
+            break;
+
+        case 'group':
+            // TODO: Extract to renderGroupElement() function
+            const groupWrap = document.createElement('div');
+            groupWrap.className = 'border border-gray-200 rounded-lg p-4 bg-gray-50';
+            
+            const header = document.createElement('div');
+            header.className = 'flex justify-between items-center mb-4';
+            
+            const left = document.createElement('div');
+            left.className = 'flex-1';
+            
+            const right = document.createElement('div');
+            right.className = 'flex gap-2';
+            
+            const itemsWrap = document.createElement('div');
+            itemsWrap.className = 'space-y-4';
+            
+            groupWrap.appendChild(header);
+            header.appendChild(left);
+            header.appendChild(right);
+            
+            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 header = document.createElement('div');
-                header.className = 'flex items-center justify-between my-2 pb-2 border-b border-gray-200';
+                header.appendChild(right);
+
+                const countItems = () => itemsWrap.querySelectorAll(':scope > .groupItem').length;
+
+                const addItem = (prefillObj) => {
+                    const item = document.createElement('div');
+                    item.className = 'groupItem border border-dashed border-slate-300 dark:border-slate-600 rounded-lg p-3 mb-3 bg-blue-50/30 dark:bg-blue-900/10';
+                    const subCtx = { 
+                        path: pathJoin(ctx.path, element.key + `[${countItems()}]`), 
+                        prefill: prefillObj || {} 
+                    };
+                    element.elements.forEach(child => item.appendChild(renderElement(child, subCtx)));
+                    
+                    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 = 'Удалить';
+                    rem.addEventListener('click', () => {
+                        if (countItems() <= (element.repeat.min ?? 0)) return;
+                        itemsWrap.removeChild(item);
+                        refreshControls();
+                    });
+                    item.appendChild(rem);
+                    itemsWrap.appendChild(item);
+                    refreshControls();
+                };
+
+                groupWrap.appendChild(itemsWrap);
                 
-                const left = document.createElement('div');
-                header.appendChild(left);
+                // Add button after items
+                const addBtn = document.createElement('button');
+                addBtn.type = 'button';
+                addBtn.className = 'w-full py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 flex items-center justify-center mt-3';
+                addBtn.innerHTML = '<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>Добавить элемент';
+                groupWrap.appendChild(addBtn);
                 
-                const right = document.createElement('div');
-                groupWrap.appendChild(header);
+                const refreshControls = () => {
+                    const n = countItems();
+                    addBtn.disabled = n >= max;
+                    left.innerHTML = `<span>${element.label || element.key}</span> <span class="text-slate-500 dark:text-slate-400 text-xs">[${n} / ${max === Infinity ? '∞' : max}, min=${min}]</span>`;
+                };
+                
+                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);
+                }
                 
-                const itemsWrap = document.createElement('div');
-                itemsWrap.dataset.itemsFor = element.key;
+                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)));
+                groupWrap.appendChild(itemsWrap);
+                left.innerHTML = `<span>${element.label || element.key}</span>`;
+            }
+            
+            wrapper.appendChild(groupWrap);
+            break;
 
-                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);
+        default:
+            const unsupported = document.createElement('div');
+            unsupported.className = 'text-red-500 text-sm';
+            unsupported.textContent = `Unsupported field type: ${element.type}`;
+            wrapper.appendChild(unsupported);
+    }
 
-                    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>`;
-                    };
+    return wrapper;
+}
 
-                    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;
-                            }
-                        });
-                    };
+function makeFieldHint(element) {
+    const parts = [];
+    
+    if (element.required) {
+        parts.push('required');
+    } else {
+        parts.push('optional');
+    }
+    
+    if (element.minLength != null || element.maxLength != null) {
+        if (element.minLength != null && element.maxLength != null) {
+            parts.push(`length=${element.minLength}-${element.maxLength} characters`);
+        } else if (element.maxLength != null) {
+            parts.push(`max=${element.maxLength} characters`);
+        } else if (element.minLength != null) {
+            parts.push(`min=${element.minLength} characters`);
+        }
+    }
+    
+    if (element.min != null || element.max != null) {
+        if (element.min != null && element.max != null) {
+            parts.push(`range=${element.min}-${element.max}`);
+        } else if (element.max != null) {
+            parts.push(`max=${element.max}`);
+        } else if (element.min != null) {
+            parts.push(`min=${element.min}`);
+        }
+    }
+    
+    if (element.maxSizeMB) {
+        parts.push(`max_size=${element.maxSizeMB}MB`);
+    }
+    
+    if (element.accept && element.accept.extensions) {
+        parts.push(`formats=${element.accept.extensions.map(ext => ext.toUpperCase()).join(',')}`);
+    }
+    
+    if (element.pattern && !element.pattern.includes('А-Я')) {
+        parts.push('plain text only');
+    } else if (element.pattern && element.pattern.includes('А-Я')) {
+        parts.push('text with punctuation');
+    }
+    
+    return parts.join(' • ');
+}
 
-                    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();
+async function renderFilePreview(container, resourceId, fileName, fileType, isReadonly = false) {
+    // Don't change container className - preserve max-w-xs and other styling
+    
+    // Clear container content first
+    clear(container);
+    
+    if (isReadonly) {
+        container.classList.add('cursor-pointer');
+    }
+    
+    const img = document.createElement('img');
+    img.className = 'w-full h-full object-contain';
+    img.alt = fileName || 'Preview';
+    
+    // Use stored file from resourceIndex if available, or try getThumbnail
+    const meta = state.resourceIndex.get(resourceId);
+    if (meta && meta.file && meta.file instanceof File) {
+        // For local files, use FileReader to display preview
+        if (meta.type && meta.type.startsWith('image/')) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                img.src = e.target.result;
+            };
+            reader.readAsDataURL(meta.file);
+            container.appendChild(img);
+        } else {
+            // Non-image file
+            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">' + fileName + '</div></div>';
+        }
+    } else if (state.config.getThumbnail) {
+        // Try to get thumbnail from config for uploaded files
+        try {
+            const thumbnailUrl = await state.config.getThumbnail(resourceId);
+            if (thumbnailUrl) {
+                img.src = thumbnailUrl;
+                container.appendChild(img);
+            } else {
+                // Fallback to file icon
+                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">' + fileName + '</div></div>';
+            }
+        } catch (error) {
+            console.warn('Thumbnail loading failed:', error);
+            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">' + fileName + '</div></div>';
+        }
+    } else {
+        // No file and no getThumbnail config - fallback
+        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">' + fileName + '</div></div>';
+    }
+    
+    // Add overlay with download/remove buttons if needed
+    if (!isReadonly) {
+        const overlay = document.createElement('div');
+        overlay.className = 'absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center';
+        const buttonContainer = document.createElement('div');
+        buttonContainer.className = 'flex gap-2';
+        
+        const removeBtn = document.createElement('button');
+        removeBtn.className = 'bg-red-600 text-white px-2 py-1 rounded text-xs';
+        removeBtn.textContent = 'Удалить';
+        removeBtn.onclick = (e) => {
+            e.stopPropagation();
+            const hiddenInput = container.parentElement.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 or drop to upload</div></div>';
+        };
+        
+        buttonContainer.appendChild(removeBtn);
+        overlay.appendChild(buttonContainer);
+        container.appendChild(overlay);
+    } else if (isReadonly && state.config.downloadFile) {
+        // Add click handler for download in readonly mode
+        container.style.cursor = 'pointer';
+        container.onclick = () => {
+            if (state.config.downloadFile) {
+                state.config.downloadFile(resourceId, fileName);
+            }
+        };
+    }
+}
+        
+function renderResourcePills(container, rids, onRemove) {
+    clear(container);
+    
+    // Show empty placeholder if no files
+    if (!rids || rids.length === 0) {
+        container.innerHTML = `
+            <div class="grid grid-cols-4 gap-3 mb-3">
+                <div class="aspect-square bg-gray-100 border-2 border-dashed border-gray-300 rounded flex items-center justify-center cursor-pointer hover:border-gray-400 transition-colors">
+                    <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
+                        <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+                    </svg>
+                </div>
+                <div class="aspect-square bg-gray-100 border-2 border-dashed border-gray-300 rounded flex items-center justify-center cursor-pointer hover:border-gray-400 transition-colors">
+                    <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
+                        <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+                    </svg>
+                </div>
+                <div class="aspect-square bg-gray-100 border-2 border-dashed border-gray-300 rounded flex items-center justify-center cursor-pointer hover:border-gray-400 transition-colors">
+                    <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
+                        <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+                    </svg>
+                </div>
+                <div class="aspect-square bg-gray-100 border-2 border-dashed border-gray-300 rounded flex items-center justify-center cursor-pointer hover:border-gray-400 transition-colors">
+                    <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
+                        <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+                    </svg>
+                </div>
+            </div>
+            <div class="text-center text-xs text-gray-600">
+                <span class="underline cursor-pointer">Загрузите</span> или перетащите файлы
+            </div>
+        `;
+        // Add click handler to the entire placeholder
+        container.onclick = () => {
+            const fileInput = container.parentElement?.querySelector('input[type="file"]');
+            if (fileInput) fileInput.click();
+        };
+        
+        // Also add specific handler to the "Загрузите" link
+        const uploadLink = container.querySelector('span.underline');
+        if (uploadLink) {
+            uploadLink.onclick = (e) => {
+                e.stopPropagation(); // Prevent double trigger
+                const fileInput = container.parentElement?.querySelector('input[type="file"]');
+                if (fileInput) fileInput.click();
+            };
+        }
+        return;
+    }
+    
+    // Show files grid
+    container.className = 'grid grid-cols-4 gap-3 mt-2';
+    
+    // Calculate how many slots we need (at least 4, then expand by rows of 4)
+    const minSlots = 4;
+    const currentImagesCount = rids.length;
+    const slotsNeeded = Math.max(minSlots, Math.ceil((currentImagesCount + 1) / 4) * 4);
+    
+    // Add all slots (filled and empty)
+    for (let i = 0; i < slotsNeeded; i++) {
+        const slot = document.createElement('div');
+        
+        if (i < rids.length) {
+            // Filled slot with image preview
+            const rid = rids[i];
+            const meta = state.resourceIndex.get(rid);
+            slot.className = 'aspect-square bg-gray-100 rounded-lg overflow-hidden relative group border border-gray-300';
+            
+            // Add image or file content
+            if (meta && meta.type?.startsWith('image/')) {
+                if (meta.file && meta.file instanceof File) {
+                    // Use FileReader for local files
+                    const img = document.createElement('img');
+                    img.className = 'w-full h-full object-contain';
+                    img.alt = meta.name;
+                    
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        img.src = e.target.result;
                     };
-
-                    groupWrap.appendChild(itemsWrap);
+                    reader.readAsDataURL(meta.file);
+                    slot.appendChild(img);
+                } else if (state.config.getThumbnail) {
+                    // Use getThumbnail for uploaded files
+                    const img = document.createElement('img');
+                    img.className = 'w-full h-full object-contain';
+                    img.alt = meta.name;
                     
-                    if (pre && pre.length) {
-                        const n = Math.min(max, Math.max(min, pre.length));
-                        for (let i = 0; i < n; i++) addItem(pre[i]);
+                    const url = state.config.getThumbnail(rid);
+                    if (url) {
+                        img.src = url;
+                        slot.appendChild(img);
                     } else {
-                        const n = Math.max(min, 0);
-                        for (let i = 0; i < n; i++) addItem(null);
+                        slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
+                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+                            </svg>
+                        </div>`;
                     }
-                    
-                    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);
+                    slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
+                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+                        </svg>
+                    </div>`;
                 }
-
-                wrapper.innerHTML = '';
-                wrapper.appendChild(groupWrap);
-                break;
+            } else {
+                slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
+                    <div class="text-2xl mb-1">📁</div>
+                    <div class="text-xs">${meta?.name || 'File'}</div>
+                </div>`;
             }
-            default:
-                wrapper.appendChild(document.createTextNode(`Unsupported type: ${element.type}`));
+            
+            // Add remove button overlay (similar to file field)
+            if (onRemove) {
+                const overlay = document.createElement('div');
+                overlay.className = 'absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center';
+                
+                const removeBtn = document.createElement('button');
+                removeBtn.className = 'bg-red-600 text-white px-2 py-1 rounded text-xs';
+                removeBtn.textContent = 'Удалить';
+                removeBtn.onclick = (e) => {
+                    e.stopPropagation();
+                    onRemove(rid);
+                };
+                
+                overlay.appendChild(removeBtn);
+                slot.appendChild(overlay);
+            }
+        } else {
+            // Empty slot placeholder
+            slot.className = 'aspect-square bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center cursor-pointer hover:border-gray-400 transition-colors';
+            slot.innerHTML = '<svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>';
+            slot.onclick = () => {
+                const fileInput = container.parentElement?.querySelector('input[type="file"]');
+                if (fileInput) fileInput.click();
+            };
         }
         
-        return wrapper;
+        container.appendChild(slot);
     }
+}
 
-    // Form data collection and validation
-    function collectAndValidate(schema, formRoot, skipValidation = false) {
-        const errors = [];
+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(2)) + ' ' + sizes[i];
+}
 
-        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;
+function generateResourceId() {
+    return 'res_' + Math.random().toString(36).substr(2, 9) + Date.now().toString(36);
+}
+
+async function handleFileSelect(file, container, fieldName) {
+    let rid;
+    
+    // If uploadHandler is configured, use it to upload the file
+    if (state.config.uploadFile) {
+        try {
+            rid = await state.config.uploadFile(file);
+            if (typeof rid !== 'string') {
+                throw new Error('Upload handler must return a string resource ID');
+            }
+        } catch (error) {
+            throw new Error(`File upload failed: ${error.message}`);
+        }
+    } else {
+        throw new Error('No upload handler configured. Set uploadHandler via FormBuilder.setUploadHandler()');
+    }
+    
+    state.resourceIndex.set(rid, {
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        file: null // Files are always uploaded, never stored locally
+    });
+    
+    // Create hidden input to store the resource ID
+    let hiddenInput = container.parentElement.querySelector('input[type="hidden"]');
+    if (!hiddenInput) {
+        hiddenInput = document.createElement('input');
+        hiddenInput.type = 'hidden';
+        hiddenInput.name = fieldName;
+        container.parentElement.appendChild(hiddenInput);
+    }
+    hiddenInput.value = rid;
+    
+    renderFilePreview(container, rid, file.name, file.type);
+}
+
+function setupDragAndDrop(element, dropHandler) {
+    element.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        element.classList.add('border-blue-500', 'bg-blue-50');
+    });
+
+    element.addEventListener('dragleave', (e) => {
+        e.preventDefault();
+        element.classList.remove('border-blue-500', 'bg-blue-50');
+    });
+
+    element.addEventListener('drop', (e) => {
+        e.preventDefault();
+        element.classList.remove('border-blue-500', 'bg-blue-50');
+        dropHandler(e.dataTransfer.files);
+    });
+}
+
+function showTooltip(tooltipId, button) {
+    const tooltip = document.getElementById(tooltipId);
+    const isCurrentlyVisible = !tooltip.classList.contains('hidden');
+    
+    // Hide all tooltips first
+    document.querySelectorAll('[id^="tooltip-"]').forEach(t => {
+        t.classList.add('hidden');
+    });
+    
+    // If the tooltip was already visible, keep it hidden (toggle behavior)
+    if (isCurrentlyVisible) {
+        return;
+    }
+    
+    // Position the tooltip intelligently
+    const rect = button.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    
+    // Ensure tooltip is appended to body for proper positioning
+    if (tooltip && tooltip.parentElement !== document.body) {
+        document.body.appendChild(tooltip);
+    }
+    
+    // Show tooltip temporarily to measure its size
+    tooltip.style.visibility = 'hidden';
+    tooltip.style.position = 'fixed';
+    tooltip.classList.remove('hidden');
+    const tooltipRect = tooltip.getBoundingClientRect();
+    tooltip.classList.add('hidden');
+    tooltip.style.visibility = 'visible';
+    
+    let left = rect.left;
+    let top = rect.bottom + 5;
+    
+    // Adjust horizontal position if tooltip would go off-screen
+    if (left + tooltipRect.width > viewportWidth) {
+        left = rect.right - tooltipRect.width;
+    }
+    
+    // Adjust vertical position if tooltip would go off-screen
+    if (top + tooltipRect.height > viewportHeight) {
+        top = rect.top - tooltipRect.height - 5;
+    }
+    
+    // Ensure tooltip doesn't go off the left edge
+    if (left < 10) {
+        left = 10;
+    }
+    
+    // Ensure tooltip doesn't go off the top edge
+    if (top < 10) {
+        top = rect.bottom + 5;
+    }
+    
+    tooltip.style.left = left + 'px';
+    tooltip.style.top = top + 'px';
+    
+    // Show the tooltip
+    tooltip.classList.remove('hidden');
+    
+    // Hide after 25 seconds
+    setTimeout(() => {
+        tooltip.classList.add('hidden');
+    }, 25000);
+}
+
+// Close tooltips when clicking outside
+document.addEventListener('click', function(e) {
+    const isInfoButton = e.target.closest('button') && e.target.closest('button').onclick;
+    const isTooltip = e.target.closest('[id^="tooltip-"]');
+    
+    if (!isInfoButton && !isTooltip) {
+        document.querySelectorAll('[id^="tooltip-"]').forEach(tooltip => {
+            tooltip.classList.add('hidden');
+        });
+    }
+});
+
+// Form validation and data extraction
+function validateForm(skipValidation = false) {
+    if (!state.schema || !state.formRoot) return { valid: true, data: {} };
+    
+    const errors = [];
+    const data = {};
+    
+    function markValidity(input, errorMessage) {
+        if (!input) return;
+        if (errorMessage) {
+            input.classList.add('invalid');
+            input.title = errorMessage;
+        } else {
+            input.classList.remove('invalid');
+            input.title = '';
+        }
+    }
+    
+    function validateElement(element, ctx) {
+        const key = element.key;
+        const scopeRoot = state.formRoot;
+        
+        switch (element.type) {
+            case 'text':
+            case 'textarea': {
+                const input = scopeRoot.querySelector(`[name$="${key}"]`);
+                const val = input?.value ?? '';
+                if (!skipValidation && element.required && val === '') {
+                    errors.push(`${key}: required`);
+                    markValidity(input, 'required');
+                    return '';
                 }
-                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 && val) {
+                    if (element.minLength != null && val.length < element.minLength) {
+                        errors.push(`${key}: minLength=${element.minLength}`);
+                        markValidity(input, `minLength=${element.minLength}`);
                     }
-                    if (!skipValidation && element.min != null && v < element.min) {
-                        errors.push(`${key}: < min=${element.min}`);
-                        markValidity(input, `< min=${element.min}`);
+                    if (element.maxLength != null && val.length > element.maxLength) {
+                        errors.push(`${key}: maxLength=${element.maxLength}`);
+                        markValidity(input, `maxLength=${element.maxLength}`);
                     }
-                    if (!skipValidation && element.max != null && v > element.max) {
-                        errors.push(`${key}: > max=${element.max}`);
-                        markValidity(input, `> max=${element.max}`);
+                    if (element.pattern) {
+                        try {
+                            const re = new RegExp(element.pattern);
+                            if (!re.test(val)) {
+                                errors.push(`${key}: pattern mismatch`);
+                                markValidity(input, 'pattern mismatch');
+                            }
+                        } catch {
+                            errors.push(`${key}: invalid pattern`);
+                            markValidity(input, 'invalid pattern');
+                        }
                     }
-                    const d = Number.isInteger(element.decimals ?? 0) ? element.decimals : 0;
-                    const r = Number(v.toFixed(d));
-                    input.value = String(r);
+                } else if (skipValidation) {
+                    markValidity(input, null);
+                } else {
                     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;
+                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;
                 }
-                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;
+                if (raw === '') {
+                    markValidity(input, null);
+                    return 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 : [];
+                const v = parseFloat(raw);
+                if (!skipValidation && !Number.isFinite(v)) {
+                    errors.push(`${key}: not a number`);
+                    markValidity(input, 'not a number');
+                    return null;
                 }
-                case 'videos': {
-                    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 : [];
+                if (!skipValidation && element.min != null && v < element.min) {
+                    errors.push(`${key}: < min=${element.min}`);
+                    markValidity(input, `< min=${element.min}`);
                 }
-                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 = {};
+                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;
+                markValidity(input, null);
+                return Number(v.toFixed(d));
+            }
+            case 'select': {
+                const input = scopeRoot.querySelector(`[name$="${key}"]`);
+                const val = input?.value ?? '';
+                if (!skipValidation && element.required && val === '') {
+                    errors.push(`${key}: required`);
+                    markValidity(input, 'required');
+                    return '';
+                }
+                markValidity(input, null);
+                return val;
+            }
+            case 'file': {
+                const input = scopeRoot.querySelector(`input[name$="${key}"][type="hidden"]`);
+                const rid = input?.value ?? '';
+                if (!skipValidation && element.required && rid === '') {
+                    errors.push(`${key}: required`);
+                    return null;
+                }
+                return rid || null;
+            }
+            case 'files': {
+                // For files, we need to collect all resource IDs
+                const container = scopeRoot.querySelector(`[name$="${key}"]`)?.parentElement?.querySelector('.files-list');
+                const rids = [];
+                if (container) {
+                    // Extract resource IDs from the current state
+                    // This is a simplified approach - in practice you'd track this better
+                }
+                return rids;
+            }
+            case 'group': {
+                if (element.repeat && isPlainObject(element.repeat)) {
+                    const items = [];
+                    const itemElements = scopeRoot.querySelectorAll(`[name^="${key}["]`);
+                    const itemCount = Math.max(0, Math.floor(itemElements.length / element.elements.length));
+                    
+                    for (let i = 0; i < itemCount; i++) {
+                        const itemData = {};
                         element.elements.forEach(child => {
-                            obj[child.key] = collectElement(child, itemsWrap, fullPath);
+                            const childKey = `${key}[${i}].${child.key}`;
+                            itemData[child.key] = validateElement({...child, key: childKey}, ctx);
                         });
-                        return obj;
+                        items.push(itemData);
                     }
+                    return items;
+                } else {
+                    const groupData = {};
+                    element.elements.forEach(child => {
+                        const childKey = `${key}.${child.key}`;
+                        groupData[child.key] = validateElement({...child, key: childKey}, ctx);
+                    });
+                    return groupData;
                 }
-                default:
-                    errors.push(`${key}: unsupported type ${element.type}`);
-                    return null;
             }
+            default:
+                return null;
         }
-
-        const result = {};
-        schema.elements.forEach(element => {
-            result[element.key] = collectElement(element, formRoot, '');
-        });
-        
-        return { result, errors };
     }
+    
+    state.schema.elements.forEach(element => {
+        data[element.key] = validateElement(element, { path: '' });
+    });
+    
+    return {
+        valid: errors.length === 0,
+        errors,
+        data
+    };
+}
 
-    // 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);
+// Element rendering functions
+function renderTextElement(element, ctx, wrapper, pathKey) {
+    const textInput = document.createElement('input');
+    textInput.type = 'text';
+    textInput.className = 'w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500';
+    textInput.name = pathKey;
+    textInput.placeholder = element.placeholder || 'Введите текст';
+    textInput.value = ctx.prefill[element.key] || element.default || '';
+    textInput.readOnly = state.config.readonly;
+    wrapper.appendChild(textInput);
+    
+    // Add hint
+    const textHint = document.createElement('p');
+    textHint.className = 'text-xs text-gray-500 mt-1';
+    textHint.textContent = makeFieldHint(element);
+    wrapper.appendChild(textHint);
+}
+
+function renderTextareaElement(element, ctx, wrapper, pathKey) {
+    const textareaInput = document.createElement('textarea');
+    textareaInput.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';
+    textareaInput.name = pathKey;
+    textareaInput.placeholder = element.placeholder || 'Введите текст';
+    textareaInput.rows = element.rows || 4;
+    textareaInput.value = ctx.prefill[element.key] || element.default || '';
+    textareaInput.readOnly = state.config.readonly;
+    wrapper.appendChild(textareaInput);
+    
+    // Add hint
+    const textareaHint = document.createElement('p');
+    textareaHint.className = 'text-xs text-gray-500 mt-1';
+    textareaHint.textContent = makeFieldHint(element);
+    wrapper.appendChild(textareaHint);
+}
+
+function renderNumberElement(element, ctx, wrapper, pathKey) {
+    const numberInput = document.createElement('input');
+    numberInput.type = 'number';
+    numberInput.className = 'w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500';
+    numberInput.name = pathKey;
+    numberInput.placeholder = element.placeholder || '0';
+    if (element.min !== undefined) numberInput.min = element.min;
+    if (element.max !== undefined) numberInput.max = element.max;
+    if (element.step !== undefined) numberInput.step = element.step;
+    numberInput.value = ctx.prefill[element.key] || element.default || '';
+    numberInput.readOnly = state.config.readonly;
+    wrapper.appendChild(numberInput);
+    
+    // Add hint
+    const numberHint = document.createElement('p');
+    numberHint.className = 'text-xs text-gray-500 mt-1';
+    numberHint.textContent = makeFieldHint(element);
+    wrapper.appendChild(numberHint);
+}
+
+function renderSelectElement(element, ctx, wrapper, pathKey) {
+    const selectInput = document.createElement('select');
+    selectInput.className = 'w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500';
+    selectInput.name = pathKey;
+    selectInput.disabled = state.config.readonly;
+    
+    (element.options || []).forEach(option => {
+        const optionEl = document.createElement('option');
+        optionEl.value = option.value;
+        optionEl.textContent = option.label;
+        if ((ctx.prefill[element.key] || element.default) === option.value) {
+            optionEl.selected = true;
         }
-        
-        // Validate schema first
-        const schemaErrors = validateSchema(schema);
-        if (schemaErrors.length > 0) {
-            if (onError) onError(schemaErrors);
-            throw new Error('Schema validation failed: ' + schemaErrors.join(', '));
+        selectInput.appendChild(optionEl);
+    });
+    
+    wrapper.appendChild(selectInput);
+    
+    // Add hint
+    const selectHint = document.createElement('p');
+    selectHint.className = 'text-xs text-gray-500 mt-1';
+    selectHint.textContent = makeFieldHint(element);
+    wrapper.appendChild(selectHint);
+}
+
+// Common file preview rendering function for readonly mode
+function renderFilePreviewReadonly(resourceId, fileName) {
+    const meta = state.resourceIndex.get(resourceId);
+    const actualFileName = fileName || meta?.name || 'file';
+    
+    // Individual file result container
+    const fileResult = document.createElement('div');
+    fileResult.className = 'space-y-3';
+    
+    // Large preview container
+    const previewContainer = document.createElement('div');
+    previewContainer.className = 'bg-gray-100 rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity';
+    
+    // Check file type and render appropriate preview
+    if (meta?.type?.startsWith('image/') || actualFileName.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp)$/)) {
+        // Image preview
+        if (state.config.getThumbnail) {
+            const thumbnailUrl = state.config.getThumbnail(resourceId);
+            if (thumbnailUrl) {
+                previewContainer.innerHTML = `<img src="${thumbnailUrl}" alt="${actualFileName}" class="w-full h-auto">`;
+            } else {
+                previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🖼️</div><div class="text-sm">${actualFileName}</div></div></div>`;
+            }
+        } else {
+            previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🖼️</div><div class="text-sm">${actualFileName}</div></div></div>`;
         }
-        
-        // Clear container
-        clear(container);
-        
-        // Create form element
-        const formEl = document.createElement('form');
-        formEl.addEventListener('submit', (e) => e.preventDefault());
+    } else if (meta?.type?.startsWith('video/') || actualFileName.toLowerCase().match(/\.(mp4|webm|avi|mov)$/)) {
+        // Video preview
+        if (state.config.getThumbnail) {
+            const thumbnailUrl = state.config.getThumbnail(resourceId);
+            if (thumbnailUrl) {
+                previewContainer.innerHTML = `
+                    <div class="relative group">
+                        <video class="w-full h-auto" controls preload="auto" muted>
+                            <source src="${thumbnailUrl}" type="${meta?.type || 'video/mp4'}">
+                            Ваш браузер не поддерживает видео.
+                        </video>
+                        <div class="absolute inset-0 bg-black bg-opacity-20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center pointer-events-none">
+                            <div class="bg-white bg-opacity-90 rounded-full p-3">
+                                <svg class="w-8 h-8 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
+                                    <path d="M8 5v14l11-7z"/>
+                                </svg>
+                            </div>
+                        </div>
+                    </div>
+                `;
+            } else {
+                previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🎥</div><div class="text-sm">${actualFileName}</div></div></div>`;
+            }
+        } else {
+            previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🎥</div><div class="text-sm">${actualFileName}</div></div></div>`;
+        }
+    } else {
+        // Other file types
+        previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">📁</div><div class="text-sm">${actualFileName}</div></div></div>`;
+    }
+    
+    // File name
+    const fileNameElement = document.createElement('p');
+    fileNameElement.className = 'text-sm font-medium text-gray-900 text-center';
+    fileNameElement.textContent = actualFileName;
+    
+    // Download button
+    const downloadButton = document.createElement('button');
+    downloadButton.className = 'w-full px-3 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors';
+    downloadButton.textContent = 'Скачать';
+    downloadButton.onclick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (state.config.downloadFile) {
+            state.config.downloadFile(resourceId, actualFileName);
+        } else {
+            forceDownload(resourceId, actualFileName);
+        }
+    };
+    
+    fileResult.appendChild(previewContainer);
+    fileResult.appendChild(fileNameElement);
+    fileResult.appendChild(downloadButton);
+    
+    return fileResult;
+}
 
-        const ctx = { path: '', prefill: prefill || {} };
-        schema.elements.forEach(element => {
-            const block = renderElement(element, ctx, { readonly });
-            formEl.appendChild(block);
-        });
+// TODO: Extract large file, files, and group rendering logic to separate functions:
+// - renderFileElement(element, ctx, wrapper, pathKey)  
+// - renderFilesElement(element, ctx, wrapper, pathKey)
+// - renderGroupElement(element, ctx, wrapper, pathKey)
 
-        // 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);
+// Force download helper function
+function forceDownload(resourceId, fileName) {
+    // Try to get URL from thumbnail handler first
+    let fileUrl = null;
+    if (state.config.getThumbnail) {
+        fileUrl = state.config.getThumbnail(resourceId);
+    }
+    
+    if (fileUrl) {
+        // Always try to fetch and create blob for true download behavior
+        // This prevents files from opening in browser
+        const finalUrl = fileUrl.startsWith('http') ? fileUrl : new URL(fileUrl, window.location.href).href;
+        
+        fetch(finalUrl)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
                 }
+                return response.blob();
+            })
+            .then(blob => {
+                downloadBlob(blob, fileName);
+            })
+            .catch(error => {
+                throw new Error(`File download failed: ${error.message}`);
             });
-            
-            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;
+    } else {
+        console.warn('No download URL available for resource:', resourceId);
     }
+}
 
-    // Configuration functions
-    function setConfig(newConfig) {
-        Object.assign(config, newConfig);
+// Helper to download blob with proper cleanup
+function downloadBlob(blob, fileName) {
+    try {
+        const blobUrl = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = blobUrl;
+        link.download = fileName;
+        link.style.display = 'none';
+        
+        // Important: add to DOM, click, then remove
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        
+        // Clean up blob URL after download
+        setTimeout(() => {
+            URL.revokeObjectURL(blobUrl);
+        }, 100);
+        
+    } catch (error) {
+        throw new Error(`Blob download failed: ${error.message}`);
     }
+}
 
-    function setUploadHandler(uploadFn) {
-        config.uploadFile = uploadFn;
-    }
+// Public API
+function setFormRoot(element) {
+    state.formRoot = element;
+}
 
-    function setDownloadHandler(downloadFn) {
-        config.downloadFile = downloadFn;
-    }
+function configure(config) {
+    Object.assign(state.config, config);
+}
+
+function setUploadHandler(uploadFn) {
+    state.config.uploadFile = uploadFn;
+}
 
-    function setThumbnailHandler(thumbnailFn) {
-        config.getThumbnail = thumbnailFn;
+function setDownloadHandler(downloadFn) {
+    state.config.downloadFile = downloadFn;
+}
+
+function setThumbnailHandler(thumbnailFn) {
+    state.config.getThumbnail = thumbnailFn;
+}
+
+function setMode(mode) {
+    if (mode === 'readonly') {
+        state.config.readonly = true;
+    } else {
+        state.config.readonly = false;
     }
+}
 
-    // 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 'videos':
-                        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;
+function getFormData() {
+    return validateForm(false);
+}
+
+function submitForm() {
+    const result = validateForm(false);
+    if (result.valid) {
+        // Emit event for successful submission
+        if (typeof window !== 'undefined' && window.parent) {
+            window.parent.postMessage({
+                type: 'formSubmit',
+                data: result.data,
+                schema: state.schema
+            }, '*');
         }
-        return walk(schema.elements);
     }
+    return result;
+}
 
-    // 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';
+function saveDraft() {
+    const result = validateForm(true); // Skip validation for drafts
+    // Emit event for draft save
+    if (typeof window !== 'undefined' && window.parent) {
+        window.parent.postMessage({
+            type: 'formDraft',
+            data: result.data,
+            schema: state.schema
+        }, '*');
+    }
+    return result;
+}
 
-}));
+function clearForm() {
+    if (state.formRoot) {
+        clear(state.formRoot);
+    }
+}
+
+// Export the API
+if (typeof window !== 'undefined') {
+    window.FormBuilder = {
+        setFormRoot,
+        renderForm,
+        configure,
+        setUploadHandler,
+        setDownloadHandler,
+        setThumbnailHandler,
+        setMode,
+        getFormData,
+        submitForm,
+        saveDraft,
+        clearForm,
+        validateSchema,
+        pretty,
+        state
+    };
+}