@dmitryvim/form-builder 0.1.41 → 0.2.0

package/dist/form-builder.js

@@ -1,3399 +1,179 @@
-// Form Builder Library - Core API
-// State management
-const state = {
-  schema: null,
-  formRoot: null,
-  resourceIndex: new Map(),
-  externalActions: null, // Store external actions for the current form
-  version: "1.0.0",
-  config: {
-    // File upload configuration
-    uploadFile: null,
-    downloadFile: null,
-    getThumbnail: null,
-    getDownloadUrl: null,
-    // Action handler
-    actionHandler: null,
-    // Default implementations
-    enableFilePreview: true,
-    maxPreviewSize: "200px",
-    readonly: false,
-    // Internationalization
-    locale: "en",
-    translations: {
-      en: {
-        addElement: "Add Element",
-        removeElement: "Remove",
-        uploadText: "Upload",
-        dragDropText: "or drag and drop files",
-        dragDropTextSingle: "or drag and drop file",
-        clickDragText: "Click or drag file",
-        noFileSelected: "No file selected",
-        noFilesSelected: "No files selected",
-      },
-      ru: {
-        addElement: "Добавить элемент",
-        removeElement: "Удалить",
-        uploadText: "Загрузите",
-        dragDropText: "или перетащите файлы",
-        dragDropTextSingle: "или перетащите файл",
-        clickDragText: "Нажмите или перетащите файл",
-        noFileSelected: "Файл не выбран",
-        noFilesSelected: "Нет файлов",
-      },
-    },
-  },
-};
-
-// Utility functions
-function isPlainObject(obj) {
-  return obj && typeof obj === "object" && obj.constructor === Object;
-}
-
-function pathJoin(base, key) {
-  return base ? `${base}.${key}` : key;
-}
-
-function pretty(obj) {
-  return JSON.stringify(obj, null, 2);
-}
-
-function clear(node) {
-  while (node.firstChild) node.removeChild(node.firstChild);
-}
-
-// Translation function
-function t(key) {
-  const locale = state.config.locale || "en";
-  const translations =
-    state.config.translations[locale] || state.config.translations.en;
-  return translations[key] || key;
-}
-
-// Schema validation
-function validateSchema(schema) {
-  const errors = [];
-
-  if (!schema || typeof schema !== "object") {
-    errors.push("Schema must be an object");
-    return errors;
-  }
-
-  if (!schema.version) {
-    errors.push("Schema missing version");
-  }
-
-  if (!Array.isArray(schema.elements)) {
-    errors.push("Schema missing elements array");
-    return errors;
-  }
-
-  function validateElements(elements, path) {
-    elements.forEach((element, index) => {
-      const elementPath = `${path}[${index}]`;
-
-      if (!element.type) {
-        errors.push(`${elementPath}: missing type`);
-      }
-
-      if (!element.key) {
-        errors.push(`${elementPath}: missing key`);
-      }
-
-      if (element.type === "group" && element.elements) {
-        validateElements(element.elements, `${elementPath}.elements`);
-      }
-
-      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, actions) {
-  const errors = validateSchema(schema);
-  if (errors.length > 0) {
-    console.error("Schema validation errors:", errors);
-    return;
-  }
-
-  state.schema = schema;
-  state.externalActions = actions || null;
-
-  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, _index) => {
-    // Skip rendering hidden elements
-    if (element.hidden) {
-      return;
-    }
-    const block = renderElement(element, {
-      path: "",
-      prefill: prefill || {},
-    });
-    formEl.appendChild(block);
-  });
-
-  state.formRoot.appendChild(formEl);
-
-  // Render external actions after form is built (only in readonly mode)
-  if (
-    state.config.readonly &&
-    state.externalActions &&
-    Array.isArray(state.externalActions)
-  ) {
-    renderExternalActions();
-  }
-}
-
-function renderElement(element, ctx) {
-  const wrapper = document.createElement("div");
-  wrapper.className = "mb-6 fb-field-wrapper";
-
-  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>';
-
-    // 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);
-
-  switch (element.type) {
-    case "text":
-      if (element.multiple) {
-        renderMultipleTextElement(element, ctx, wrapper, pathKey);
-      } else {
-        renderTextElement(element, ctx, wrapper, pathKey);
-      }
-      break;
-
-    case "textarea":
-      if (element.multiple) {
-        renderMultipleTextareaElement(element, ctx, wrapper, pathKey);
-      } else {
-        renderTextareaElement(element, ctx, wrapper, pathKey);
-      }
-      break;
-
-    case "number":
-      if (element.multiple) {
-        renderMultipleNumberElement(element, ctx, wrapper, pathKey);
-      } else {
-        renderNumberElement(element, ctx, wrapper, pathKey);
-      }
-      break;
-
-    case "select":
-      if (element.multiple) {
-        renderMultipleSelectElement(element, ctx, wrapper, pathKey);
-      } else {
-        renderSelectElement(element, ctx, wrapper, pathKey);
-      }
-      break;
-
-    case "file":
-      // Handle multiple files with file type using multiple property
-      if (element.multiple) {
-        renderMultipleFileElement(element, ctx, wrapper, pathKey);
-      } else {
-        renderFileElement(element, ctx, wrapper, pathKey);
-      }
-      break;
-
-    case "files":
-      renderFilesElement(element, ctx, wrapper, pathKey);
-      break;
-
-    case "group":
-      renderGroupElement(element, ctx, wrapper, pathKey);
-      break;
-
-    case "container":
-      // Handle containers with multiple property like groups
-      if (element.multiple) {
-        renderMultipleContainerElement(element, ctx, wrapper, pathKey);
-      } else {
-        renderSingleContainerElement(element, ctx, wrapper, pathKey);
-      }
-      break;
-
-    default: {
-      const unsupported = document.createElement("div");
-      unsupported.className = "text-red-500 text-sm";
-      unsupported.textContent = `Unsupported field type: ${element.type}`;
-      wrapper.appendChild(unsupported);
-    }
-  }
-
-  // Actions are now only rendered via external actions system in renderExternalActions()
-  // element.actions are only used for label lookup, not direct rendering
-
-  return wrapper;
-}
-
-function makeFieldHint(element) {
-  const parts = [];
-
-  parts.push(element.required ? "required" : "optional");
-
-  addLengthHint(element, parts);
-  addRangeHint(element, parts);
-  addFileSizeHint(element, parts);
-  addFormatHint(element, parts);
-  addPatternHint(element, parts);
-
-  return parts.join(" • ");
-}
-
-function addLengthHint(element, parts) {
-  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`);
-    }
-  }
-}
-
-function addRangeHint(element, parts) {
-  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}`);
-    }
-  }
-}
-
-function addFileSizeHint(element, parts) {
-  if (element.maxSizeMB) {
-    parts.push(`max_size=${element.maxSizeMB}MB`);
-  }
-}
-
-function addFormatHint(element, parts) {
-  if (element.accept?.extensions) {
-    parts.push(
-      `formats=${element.accept.extensions.map((ext) => ext.toUpperCase()).join(",")}`,
-    );
-  }
-}
-
-function addPatternHint(element, parts) {
-  if (element.pattern && !element.pattern.includes("А-Я")) {
-    parts.push("plain text only");
-  } else if (element.pattern?.includes("А-Я")) {
-    parts.push("text with punctuation");
-  }
-}
-
-async function renderFilePreview(container, resourceId, options = {}) {
-  const { fileName = "", isReadonly = false, deps = null } = options;
-  // Runtime validation for dependencies when not in readonly mode
-  if (
-    !isReadonly &&
-    deps &&
-    (!deps.picker || !deps.fileUploadHandler || !deps.dragHandler)
-  ) {
-    throw new Error(
-      "renderFilePreview: missing deps {picker, fileUploadHandler, dragHandler}",
-    );
-  }
-  // 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 if (meta.type && meta.type.startsWith("video/")) {
-      // Video file - use object URL for preview
-      const videoUrl = URL.createObjectURL(meta.file);
-
-      // Remove all conflicting handlers to prevent interference with video controls
-      container.onclick = null;
-
-      // Remove drag and drop event listeners by cloning the element
-      const newContainer = container.cloneNode(false);
-      container.parentNode.replaceChild(newContainer, container);
-      container = newContainer;
-
-      container.innerHTML = `
+var FormBuilder=(function(F){"use strict";function ie(e,t){(e.minLength!==null||e.maxLength!==null)&&(e.minLength!==null&&e.maxLength!==null?t.push(`length=${e.minLength}-${e.maxLength} characters`):e.maxLength!==null?t.push(`max=${e.maxLength} characters`):e.minLength!==null&&t.push(`min=${e.minLength} characters`))}function se(e,t){(e.min!==null||e.max!==null)&&(e.min!==null&&e.max!==null?t.push(`range=${e.min}-${e.max}`):e.max!==null?t.push(`max=${e.max}`):e.min!==null&&t.push(`min=${e.min}`))}function ce(e,t){e.maxSizeMB&&t.push(`max_size=${e.maxSizeMB}MB`)}function de(e,t){var n;(n=e.accept)!=null&&n.extensions&&t.push(`formats=${e.accept.extensions.map(o=>o.toUpperCase()).join(",")}`)}function ue(e,t){var n;e.pattern&&!e.pattern.includes("\u0410-\u042F")?t.push("plain text only"):(n=e.pattern)!=null&&n.includes("\u0410-\u042F")&&t.push("text with punctuation")}function k(e){const t=[];return t.push(e.required?"required":"optional"),ie(e,t),se(e,t),ce(e,t),de(e,t),ue(e,t),t.join(" \u2022 ")}function M(e){const t=[];if(!e||typeof e!="object")return t.push("Schema must be an object"),t;if(e.version||t.push("Schema missing version"),!Array.isArray(e.elements))return t.push("Schema missing elements array"),t;function n(o,c){o.forEach((r,l)=>{const a=`${c}[${l}]`;if(r.type||t.push(`${a}: missing type`),r.key||t.push(`${a}: missing key`),r.type==="group"&&"elements"in r&&r.elements&&n(r.elements,`${a}.elements`),r.type==="container"&&r.elements&&n(r.elements,`${a}.elements`),r.type==="select"&&r.options){const i=r.default;i!=null&&i!==""&&(r.options.some(s=>s.value===i)||t.push(`${a}: default "${i}" not in options`))}})}return Array.isArray(e.elements)&&n(e.elements,"elements"),t}function T(e){return e&&typeof e=="object"&&e.constructor===Object}function L(e,t){return e?`${e}.${t}`:t}function N(e){for(;e.firstChild;)e.removeChild(e.firstChild)}function me(e,t,n,o){const c=t.state,r=document.createElement("input");if(r.type="text",r.className="w-full rounded-lg",r.style.cssText=`
+    padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
+    border: var(--fb-border-width) solid var(--fb-border-color);
+    border-radius: var(--fb-border-radius);
+    background-color: ${c.config.readonly?"var(--fb-background-readonly-color)":"var(--fb-background-color)"};
+    color: var(--fb-text-color);
+    font-size: var(--fb-font-size);
+    font-family: var(--fb-font-family);
+    transition: all var(--fb-transition-duration) ease-in-out;
+  `,r.name=o,r.placeholder=e.placeholder||"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442",r.value=t.prefill[e.key]||e.default||"",r.readOnly=c.config.readonly,c.config.readonly||(r.addEventListener("focus",()=>{r.style.borderColor="var(--fb-border-focus-color)",r.style.outline="var(--fb-focus-ring-width) solid var(--fb-focus-ring-color)",r.style.outlineOffset="0"}),r.addEventListener("blur",()=>{r.style.borderColor="var(--fb-border-color)",r.style.outline="none"}),r.addEventListener("mouseenter",()=>{document.activeElement!==r&&(r.style.borderColor="var(--fb-border-hover-color)")}),r.addEventListener("mouseleave",()=>{document.activeElement!==r&&(r.style.borderColor="var(--fb-border-color)")})),!c.config.readonly&&t.instance){const a=()=>{t.instance.triggerOnChange(o,r.value)};r.addEventListener("blur",a),r.addEventListener("input",a)}n.appendChild(r);const l=document.createElement("p");l.className="mt-1",l.style.cssText=`
+    font-size: var(--fb-font-size-small);
+    color: var(--fb-text-secondary-color);
+  `,l.textContent=k(e),n.appendChild(l)}function pe(e,t,n,o){var c,r;const l=t.state,a=t.prefill[e.key]||[],i=Array.isArray(a)?[...a]:[],s=(c=e.minCount)!=null?c:1,u=(r=e.maxCount)!=null?r:1/0;for(;i.length<s;)i.push(e.default||"");const d=document.createElement("div");d.className="space-y-2",n.appendChild(d);function h(){d.querySelectorAll(".multiple-text-item").forEach((x,g)=>{const y=x.querySelector("input");y&&(y.name=`${o}[${g}]`)})}function p(x="",g=-1){const y=document.createElement("div");y.className="multiple-text-item flex items-center gap-2";const f=document.createElement("input");if(f.type="text",f.className="flex-1",f.style.cssText=`
+      padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
+      border: var(--fb-border-width) solid var(--fb-border-color);
+      border-radius: var(--fb-border-radius);
+      background-color: ${l.config.readonly?"var(--fb-background-readonly-color)":"var(--fb-background-color)"};
+      color: var(--fb-text-color);
+      font-size: var(--fb-font-size);
+      font-family: var(--fb-font-family);
+      transition: all var(--fb-transition-duration) ease-in-out;
+    `,f.placeholder=e.placeholder||"Enter text",f.value=x,f.readOnly=l.config.readonly,l.config.readonly||(f.addEventListener("focus",()=>{f.style.borderColor="var(--fb-border-focus-color)",f.style.outline="var(--fb-focus-ring-width) solid var(--fb-focus-ring-color)",f.style.outlineOffset="0"}),f.addEventListener("blur",()=>{f.style.borderColor="var(--fb-border-color)",f.style.outline="none"}),f.addEventListener("mouseenter",()=>{document.activeElement!==f&&(f.style.borderColor="var(--fb-border-hover-color)")}),f.addEventListener("mouseleave",()=>{document.activeElement!==f&&(f.style.borderColor="var(--fb-border-color)")})),!l.config.readonly&&t.instance){const C=()=>{t.instance.triggerOnChange(f.name,f.value)};f.addEventListener("blur",C),f.addEventListener("input",C)}return y.appendChild(f),g===-1?d.appendChild(y):d.insertBefore(y,d.children[g]),h(),y}function m(){if(l.config.readonly)return;const x=d.querySelectorAll(".multiple-text-item"),g=x.length;x.forEach(y=>{let f=y.querySelector(".remove-item-btn");f||(f=document.createElement("button"),f.type="button",f.className="remove-item-btn px-2 py-1 rounded",f.style.cssText=`
+          color: var(--fb-error-color);
+          background-color: transparent;
+          transition: background-color var(--fb-transition-duration);
+        `,f.innerHTML="\u2715",f.addEventListener("mouseenter",()=>{f.style.backgroundColor="var(--fb-background-hover-color)"}),f.addEventListener("mouseleave",()=>{f.style.backgroundColor="transparent"}),f.onclick=()=>{const E=Array.from(d.children).indexOf(y);d.children.length>s&&(i.splice(E,1),y.remove(),h(),v(),m())},y.appendChild(f));const C=g<=s;f.disabled=C,f.style.opacity=C?"0.5":"1",f.style.pointerEvents=C?"none":"auto"})}function v(){const x=n.querySelector(".add-text-btn");if(x&&x.remove(),!l.config.readonly&&i.length<u){const g=document.createElement("button");g.type="button",g.className="add-text-btn mt-2 px-3 py-1 rounded",g.style.cssText=`
+        color: var(--fb-primary-color);
+        border: var(--fb-border-width) solid var(--fb-primary-color);
+        background-color: transparent;
+        font-size: var(--fb-font-size);
+        transition: all var(--fb-transition-duration);
+      `,g.textContent=`+ Add ${e.label||"Text"}`,g.addEventListener("mouseenter",()=>{g.style.backgroundColor="var(--fb-background-hover-color)"}),g.addEventListener("mouseleave",()=>{g.style.backgroundColor="transparent"}),g.onclick=()=>{i.push(e.default||""),p(e.default||""),v(),m()},n.appendChild(g)}}i.forEach(x=>p(x)),v(),m();const b=document.createElement("p");b.className="mt-1",b.style.cssText=`
+    font-size: var(--fb-font-size-small);
+    color: var(--fb-text-secondary-color);
+  `,b.textContent=k(e),n.appendChild(b)}function I(e,t,n){var o,c,r;const l=[],{scopeRoot:a,skipValidation:i}=n,s=(d,h)=>{var p,m;if(!d)return;const v=`error-${d.getAttribute("name")||Math.random().toString(36).substring(7)}`;let b=document.getElementById(v);h?(d.classList.add("invalid"),d.title=h,b||(b=document.createElement("div"),b.id=v,b.className="error-message",b.style.cssText=`
+          color: var(--fb-error-color);
+          font-size: var(--fb-font-size-small);
+          margin-top: 0.25rem;
+        `,d.nextSibling?(p=d.parentNode)==null||p.insertBefore(b,d.nextSibling):(m=d.parentNode)==null||m.appendChild(b)),b.textContent=h,b.style.display="block"):(d.classList.remove("invalid"),d.title="",b&&b.remove())},u=(d,h,p)=>{let m=!1;if(!i&&h){if(e.minLength!==void 0&&e.minLength!==null&&h.length<e.minLength)l.push(`${p}: minLength=${e.minLength}`),s(d,`minLength=${e.minLength}`),m=!0;else if(e.maxLength!==void 0&&e.maxLength!==null&&h.length>e.maxLength)l.push(`${p}: maxLength=${e.maxLength}`),s(d,`maxLength=${e.maxLength}`),m=!0;else if(e.pattern)try{new RegExp(e.pattern).test(h)||(l.push(`${p}: pattern mismatch`),s(d,"pattern mismatch"),m=!0)}catch(v){l.push(`${p}: invalid pattern`),s(d,"invalid pattern"),m=!0}}m||s(d,null)};if(e.multiple){const d=a.querySelectorAll(`[name^="${t}["]`),h=[];if(d.forEach((p,m)=>{var v;const b=(v=p==null?void 0:p.value)!=null?v:"";h.push(b),u(p,b,`${t}[${m}]`)}),!i){const p=(o=e.minCount)!=null?o:1,m=(c=e.maxCount)!=null?c:1/0,v=h.filter(b=>b.trim()!=="");e.required&&v.length===0&&l.push(`${t}: required`),v.length<p&&l.push(`${t}: minimum ${p} items required`),v.length>m&&l.push(`${t}: maximum ${m} items allowed`)}return{value:h,errors:l}}else{const d=a.querySelector(`[name$="${t}"]`),h=(r=d==null?void 0:d.value)!=null?r:"";return!i&&e.required&&h===""?(l.push(`${t}: required`),s(d,"required"),{value:"",errors:l}):(u(d,h,t),{value:h,errors:l})}}function O(e,t,n,o){const{scopeRoot:c}=o;if(e.multiple){if(!Array.isArray(n)){console.warn(`updateTextField: Expected array for multiple field "${t}", got ${typeof n}`);return}const r=c.querySelectorAll(`[name^="${t}["]`);r.forEach((l,a)=>{a<n.length&&(l.value=n[a]!=null?String(n[a]):"",l.classList.remove("invalid"),l.title="")}),n.length!==r.length&&console.warn(`updateTextField: Multiple field "${t}" has ${r.length} inputs but received ${n.length} values. Consider re-rendering for add/remove.`)}else{const r=c.querySelector(`[name="${t}"]`);r&&(r.value=n!=null?String(n):"",r.classList.remove("invalid"),r.title="")}}function fe(e,t,n,o){const c=t.state,r=document.createElement("textarea");if(r.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",r.name=o,r.placeholder=e.placeholder||"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442",r.rows=e.rows||4,r.value=t.prefill[e.key]||e.default||"",r.readOnly=c.config.readonly,!c.config.readonly&&t.instance){const a=()=>{t.instance.triggerOnChange(o,r.value)};r.addEventListener("blur",a),r.addEventListener("input",a)}n.appendChild(r);const l=document.createElement("p");l.className="text-xs text-gray-500 mt-1",l.textContent=k(e),n.appendChild(l)}function he(e,t,n,o){var c,r;const l=t.state,a=t.prefill[e.key]||[],i=Array.isArray(a)?[...a]:[],s=(c=e.minCount)!=null?c:1,u=(r=e.maxCount)!=null?r:1/0;for(;i.length<s;)i.push(e.default||"");const d=document.createElement("div");d.className="space-y-2",n.appendChild(d);function h(){d.querySelectorAll(".multiple-textarea-item").forEach((x,g)=>{const y=x.querySelector("textarea");y&&(y.name=`${o}[${g}]`)})}function p(x="",g=-1){const y=document.createElement("div");y.className="multiple-textarea-item";const f=document.createElement("textarea");if(f.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",f.placeholder=e.placeholder||"Enter text",f.rows=e.rows||4,f.value=x,f.readOnly=l.config.readonly,!l.config.readonly&&t.instance){const C=()=>{t.instance.triggerOnChange(f.name,f.value)};f.addEventListener("blur",C),f.addEventListener("input",C)}return y.appendChild(f),g===-1?d.appendChild(y):d.insertBefore(y,d.children[g]),h(),y}function m(){if(l.config.readonly)return;const x=d.querySelectorAll(".multiple-textarea-item"),g=x.length;x.forEach(y=>{let f=y.querySelector(".remove-item-btn");f||(f=document.createElement("button"),f.type="button",f.className="remove-item-btn mt-1 px-2 py-1 text-red-600 hover:bg-red-50 rounded text-sm",f.innerHTML="\u2715 Remove",f.onclick=()=>{const E=Array.from(d.children).indexOf(y);d.children.length>s&&(i.splice(E,1),y.remove(),h(),v(),m())},y.appendChild(f));const C=g<=s;f.disabled=C,f.style.opacity=C?"0.5":"1",f.style.pointerEvents=C?"none":"auto"})}function v(){const x=n.querySelector(".add-textarea-btn");if(x&&x.remove(),!l.config.readonly&&i.length<u){const g=document.createElement("button");g.type="button",g.className="add-textarea-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm",g.textContent=`+ Add ${e.label||"Textarea"}`,g.onclick=()=>{i.push(e.default||""),p(e.default||""),v(),m()},n.appendChild(g)}}i.forEach(x=>p(x)),v(),m();const b=document.createElement("p");b.className="text-xs text-gray-500 mt-1",b.textContent=k(e),n.appendChild(b)}function ve(e,t,n){return I(e,t,n)}function ge(e,t,n,o){O(e,t,n,o)}function ye(e,t,n,o){const c=t.state,r=document.createElement("input");if(r.type="number",r.className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",r.name=o,r.placeholder=e.placeholder||"0",e.min!==void 0&&(r.min=e.min.toString()),e.max!==void 0&&(r.max=e.max.toString()),e.step!==void 0&&(r.step=e.step.toString()),r.value=t.prefill[e.key]||e.default||"",r.readOnly=c.config.readonly,!c.config.readonly&&t.instance){const a=()=>{const i=r.value?parseFloat(r.value):null;t.instance.triggerOnChange(o,i)};r.addEventListener("blur",a),r.addEventListener("input",a)}n.appendChild(r);const l=document.createElement("p");l.className="text-xs text-gray-500 mt-1",l.textContent=k(e),n.appendChild(l)}function be(e,t,n,o){var c,r;const l=t.state,a=t.prefill[e.key]||[],i=Array.isArray(a)?[...a]:[],s=(c=e.minCount)!=null?c:1,u=(r=e.maxCount)!=null?r:1/0;for(;i.length<s;)i.push(e.default||"");const d=document.createElement("div");d.className="space-y-2",n.appendChild(d);function h(){d.querySelectorAll(".multiple-number-item").forEach((x,g)=>{const y=x.querySelector("input");y&&(y.name=`${o}[${g}]`)})}function p(x="",g=-1){const y=document.createElement("div");y.className="multiple-number-item flex items-center gap-2";const f=document.createElement("input");if(f.type="number",f.className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",f.placeholder=e.placeholder||"0",e.min!==void 0&&(f.min=e.min.toString()),e.max!==void 0&&(f.max=e.max.toString()),e.step!==void 0&&(f.step=e.step.toString()),f.value=x.toString(),f.readOnly=l.config.readonly,!l.config.readonly&&t.instance){const C=()=>{const E=f.value?parseFloat(f.value):null;t.instance.triggerOnChange(f.name,E)};f.addEventListener("blur",C),f.addEventListener("input",C)}return y.appendChild(f),g===-1?d.appendChild(y):d.insertBefore(y,d.children[g]),h(),y}function m(){if(l.config.readonly)return;const x=d.querySelectorAll(".multiple-number-item"),g=x.length;x.forEach(y=>{let f=y.querySelector(".remove-item-btn");f||(f=document.createElement("button"),f.type="button",f.className="remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded",f.innerHTML="\u2715",f.onclick=()=>{const E=Array.from(d.children).indexOf(y);d.children.length>s&&(i.splice(E,1),y.remove(),h(),v(),m())},y.appendChild(f));const C=g<=s;f.disabled=C,f.style.opacity=C?"0.5":"1",f.style.pointerEvents=C?"none":"auto"})}function v(){const x=n.querySelector(".add-number-btn");if(x&&x.remove(),!l.config.readonly&&i.length<u){const g=document.createElement("button");g.type="button",g.className="add-number-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm",g.textContent=`+ Add ${e.label||"Number"}`,g.onclick=()=>{i.push(e.default||""),p(e.default||""),v(),m()},n.appendChild(g)}}i.forEach(x=>p(x)),v(),m();const b=document.createElement("p");b.className="text-xs text-gray-500 mt-1",b.textContent=k(e),n.appendChild(b)}function xe(e,t,n){var o,c,r,l,a;const i=[],{scopeRoot:s,skipValidation:u}=n,d=(p,m)=>{var v,b;if(!p)return;const x=`error-${p.getAttribute("name")||Math.random().toString(36).substring(7)}`;let g=document.getElementById(x);m?(p.classList.add("invalid"),p.title=m,g||(g=document.createElement("div"),g.id=x,g.className="error-message",g.style.cssText=`
+          color: var(--fb-error-color);
+          font-size: var(--fb-font-size-small);
+          margin-top: 0.25rem;
+        `,p.nextSibling?(v=p.parentNode)==null||v.insertBefore(g,p.nextSibling):(b=p.parentNode)==null||b.appendChild(g)),g.textContent=m,g.style.display="block"):(p.classList.remove("invalid"),p.title="",g&&g.remove())},h=(p,m,v)=>{let b=!1;!u&&e.min!==void 0&&e.min!==null&&m<e.min?(i.push(`${v}: < min=${e.min}`),d(p,`< min=${e.min}`),b=!0):!u&&e.max!==void 0&&e.max!==null&&m>e.max&&(i.push(`${v}: > max=${e.max}`),d(p,`> max=${e.max}`),b=!0),b||d(p,null)};if(e.multiple){const p=s.querySelectorAll(`[name^="${t}["]`),m=[];if(p.forEach((v,b)=>{var x,g,y;const f=(x=v==null?void 0:v.value)!=null?x:"";if(f===""){m.push(null),d(v,null);return}const C=parseFloat(f);if(!u&&!Number.isFinite(C)){i.push(`${t}[${b}]: not a number`),d(v,"not a number"),m.push(null);return}h(v,C,`${t}[${b}]`);const E=Number.isInteger((g=e.decimals)!=null?g:0)&&(y=e.decimals)!=null?y:0;m.push(Number(C.toFixed(E)))}),!u){const v=(o=e.minCount)!=null?o:1,b=(c=e.maxCount)!=null?c:1/0,x=m.filter(g=>g!==null);e.required&&x.length===0&&i.push(`${t}: required`),x.length<v&&i.push(`${t}: minimum ${v} items required`),x.length>b&&i.push(`${t}: maximum ${b} items allowed`)}return{value:m,errors:i}}else{const p=s.querySelector(`[name$="${t}"]`),m=(r=p==null?void 0:p.value)!=null?r:"";if(!u&&e.required&&m==="")return i.push(`${t}: required`),d(p,"required"),{value:null,errors:i};if(m==="")return d(p,null),{value:null,errors:i};const v=parseFloat(m);if(!u&&!Number.isFinite(v))return i.push(`${t}: not a number`),d(p,"not a number"),{value:null,errors:i};h(p,v,t);const b=Number.isInteger((l=e.decimals)!=null?l:0)&&(a=e.decimals)!=null?a:0;return{value:Number(v.toFixed(b)),errors:i}}}function Ce(e,t,n,o){const{scopeRoot:c}=o;if(e.multiple){if(!Array.isArray(n)){console.warn(`updateNumberField: Expected array for multiple field "${t}", got ${typeof n}`);return}const r=c.querySelectorAll(`[name^="${t}["]`);r.forEach((l,a)=>{a<n.length&&(l.value=n[a]!=null?String(n[a]):"",l.classList.remove("invalid"),l.title="")}),n.length!==r.length&&console.warn(`updateNumberField: Multiple field "${t}" has ${r.length} inputs but received ${n.length} values. Consider re-rendering for add/remove.`)}else{const r=c.querySelector(`[name="${t}"]`);r&&(r.value=n!=null?String(n):"",r.classList.remove("invalid"),r.title="")}}function Ee(e,t,n,o){const c=t.state,r=document.createElement("select");if(r.className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",r.name=o,r.disabled=c.config.readonly,(e.options||[]).forEach(a=>{const i=document.createElement("option");i.value=a.value,i.textContent=a.label,(t.prefill[e.key]||e.default)===a.value&&(i.selected=!0),r.appendChild(i)}),!c.config.readonly&&t.instance){const a=()=>{t.instance.triggerOnChange(o,r.value)};r.addEventListener("change",a)}n.appendChild(r);const l=document.createElement("p");l.className="text-xs text-gray-500 mt-1",l.textContent=k(e),n.appendChild(l)}function we(e,t,n,o){var c,r,l,a;const i=t.state,s=t.prefill[e.key]||[],u=Array.isArray(s)?[...s]:[],d=(c=e.minCount)!=null?c:1,h=(r=e.maxCount)!=null?r:1/0;for(;u.length<d;)u.push(e.default||((a=(l=e.options)==null?void 0:l[0])==null?void 0:a.value)||"");const p=document.createElement("div");p.className="space-y-2",n.appendChild(p);function m(){p.querySelectorAll(".multiple-select-item").forEach((y,f)=>{const C=y.querySelector("select");C&&(C.name=`${o}[${f}]`)})}function v(y="",f=-1){const C=document.createElement("div");C.className="multiple-select-item flex items-center gap-2";const E=document.createElement("select");if(E.className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",E.disabled=i.config.readonly,(e.options||[]).forEach(w=>{const S=document.createElement("option");S.value=w.value,S.textContent=w.label,y===w.value&&(S.selected=!0),E.appendChild(S)}),!i.config.readonly&&t.instance){const w=()=>{t.instance.triggerOnChange(E.name,E.value)};E.addEventListener("change",w)}return C.appendChild(E),f===-1?p.appendChild(C):p.insertBefore(C,p.children[f]),m(),C}function b(){if(i.config.readonly)return;const y=p.querySelectorAll(".multiple-select-item"),f=y.length;y.forEach(C=>{let E=C.querySelector(".remove-item-btn");E||(E=document.createElement("button"),E.type="button",E.className="remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded",E.innerHTML="\u2715",E.onclick=()=>{const S=Array.from(p.children).indexOf(C);p.children.length>d&&(u.splice(S,1),C.remove(),m(),x(),b())},C.appendChild(E));const w=f<=d;E.disabled=w,E.style.opacity=w?"0.5":"1",E.style.pointerEvents=w?"none":"auto"})}function x(){const y=n.querySelector(".add-select-btn");if(y&&y.remove(),!i.config.readonly&&u.length<h){const f=document.createElement("button");f.type="button",f.className="add-select-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm",f.textContent=`+ Add ${e.label||"Selection"}`,f.onclick=()=>{var C,E;const w=e.default||((E=(C=e.options)==null?void 0:C[0])==null?void 0:E.value)||"";u.push(w),v(w),x(),b()},n.appendChild(f)}}u.forEach(y=>v(y)),x(),b();const g=document.createElement("p");g.className="text-xs text-gray-500 mt-1",g.textContent=k(e),n.appendChild(g)}function $e(e,t,n){var o;const c=[],{scopeRoot:r,skipValidation:l}=n,a=(s,u)=>{var d,h;if(!s)return;const p=`error-${s.getAttribute("name")||Math.random().toString(36).substring(7)}`;let m=document.getElementById(p);u?(s.classList.add("invalid"),s.title=u,m||(m=document.createElement("div"),m.id=p,m.className="error-message",m.style.cssText=`
+          color: var(--fb-error-color);
+          font-size: var(--fb-font-size-small);
+          margin-top: 0.25rem;
+        `,s.nextSibling?(d=s.parentNode)==null||d.insertBefore(m,s.nextSibling):(h=s.parentNode)==null||h.appendChild(m)),m.textContent=u,m.style.display="block"):(s.classList.remove("invalid"),s.title="",m&&m.remove())},i=(s,u,d,h)=>{var p,m;if(l)return;const v=u.filter(h),b="minCount"in d&&(p=d.minCount)!=null?p:1,x="maxCount"in d&&(m=d.maxCount)!=null?m:1/0;d.required&&v.length===0&&c.push(`${s}: required`),v.length<b&&c.push(`${s}: minimum ${b} items required`),v.length>x&&c.push(`${s}: maximum ${x} items allowed`)};if("multiple"in e&&e.multiple){const s=r.querySelectorAll(`[name^="${t}["]`),u=[];return s.forEach(d=>{var h;const p=(h=d==null?void 0:d.value)!=null?h:"";u.push(p),a(d,null)}),i(t,u,e,d=>d!==""),{value:u,errors:c}}else{const s=r.querySelector(`[name$="${t}"]`),u=(o=s==null?void 0:s.value)!=null?o:"";return!l&&e.required&&u===""?(c.push(`${t}: required`),a(s,"required"),{value:null,errors:c}):(a(s,null),{value:u===""?null:u,errors:c})}}function ke(e,t,n,o){const{scopeRoot:c}=o;if("multiple"in e&&e.multiple){if(!Array.isArray(n)){console.warn(`updateSelectField: Expected array for multiple field "${t}", got ${typeof n}`);return}const r=c.querySelectorAll(`[name^="${t}["]`);r.forEach((l,a)=>{a<n.length&&(l.value=n[a]!=null?String(n[a]):"",l.querySelectorAll("option").forEach(i=>{i.selected=i.value===String(n[a])}),l.classList.remove("invalid"),l.title="")}),n.length!==r.length&&console.warn(`updateSelectField: Multiple field "${t}" has ${r.length} selects but received ${n.length} values. Consider re-rendering for add/remove.`)}else{const r=c.querySelector(`[name="${t}"]`);r&&(r.value=n!=null?String(n):"",r.querySelectorAll("option").forEach(l=>{l.selected=l.value===String(n)}),r.classList.remove("invalid"),r.title="")}}function $(e,t){const n=t.config.locale||"en";return(t.config.translations[n]||t.config.translations.en)[e]||e}async function U(e,t,n,o={}){const{fileName:c="",isReadonly:r=!1,deps:l=null}=o;if(!r&&l&&(!l.picker||!l.fileUploadHandler||!l.dragHandler))throw new Error("renderFilePreview: missing deps {picker, fileUploadHandler, dragHandler}");N(e),r&&e.classList.add("cursor-pointer");const a=document.createElement("img");a.className="w-full h-full object-contain",a.alt=c||"Preview";const i=n.resourceIndex.get(t);if(i&&i.file&&i.file instanceof File){if(i.type&&i.type.startsWith("image/")){const s=new FileReader;s.onload=u=>{var d;a.src=((d=u.target)==null?void 0:d.result)||""},s.readAsDataURL(i.file),e.appendChild(a)}else if(i.type&&i.type.startsWith("video/")){const s=URL.createObjectURL(i.file);e.onclick=null;const u=e.cloneNode(!1);e.parentNode&&e.parentNode.replaceChild(u,e),e=u,e.innerHTML=`
         <div class="relative group h-full">
           <video class="w-full h-full object-contain" controls preload="auto" muted>
-            <source src="${videoUrl}" type="${meta.type}">
+            <source src="${s}" type="${i.type}">
             Your browser does not support the video tag.
           </video>
           <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10 flex gap-1">
             <button class="bg-red-600 bg-opacity-75 hover:bg-opacity-90 text-white p-1 rounded text-xs delete-file-btn">
-              ${t("removeElement")}
+              ${$("removeElement",n)}
             </button>
             <button class="bg-gray-800 bg-opacity-75 hover:bg-opacity-90 text-white p-1 rounded text-xs change-file-btn">
               Change
             </button>
           </div>
         </div>
-      `;
-
-      // Add click handlers to the custom buttons
-      const changeBtn = container.querySelector(".change-file-btn");
-      if (changeBtn) {
-        changeBtn.onclick = (e) => {
-          e.stopPropagation();
-          if (deps?.picker) {
-            deps.picker.click();
-          }
-        };
-      }
-
-      const deleteBtn = container.querySelector(".delete-file-btn");
-      if (deleteBtn) {
-        deleteBtn.onclick = (e) => {
-          e.stopPropagation();
-          // Clear the file
-          state.resourceIndex.delete(resourceId);
-          // Update hidden input
-          const hiddenInput = container.parentElement.querySelector(
-            'input[type="hidden"]',
-          );
-          if (hiddenInput) {
-            hiddenInput.value = "";
-          }
-          // Clear preview and show placeholder
-          if (deps?.fileUploadHandler) {
-            container.onclick = deps.fileUploadHandler;
-          }
-          if (deps?.dragHandler) {
-            setupDragAndDrop(container, deps.dragHandler);
-          }
-          container.innerHTML = `
+      `;const d=e.querySelector(".change-file-btn");d&&(d.onclick=p=>{p.stopPropagation(),l!=null&&l.picker&&l.picker.click()});const h=e.querySelector(".delete-file-btn");h&&(h.onclick=p=>{var m;p.stopPropagation(),n.resourceIndex.delete(t);const v=(m=e.parentElement)==null?void 0:m.querySelector('input[type="hidden"]');v&&(v.value=""),l!=null&&l.fileUploadHandler&&(e.onclick=l.fileUploadHandler),l!=null&&l.dragHandler&&z(e,l.dragHandler),e.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">${t("clickDragText")}</div>
+              <div class="text-sm text-center">${$("clickDragText",n)}</div>
             </div>
-          `;
-        };
-      }
-    } else {
-      // Non-image, non-video 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>`;
-    }
-
-    // Add delete button for edit mode (except for videos which have custom buttons)
-    if (!isReadonly && !(meta && meta.type && meta.type.startsWith("video/"))) {
-      addDeleteButton(container, () => {
-        // Clear the file
-        state.resourceIndex.delete(resourceId);
-        // Update hidden input
-        const hiddenInput = container.parentElement.querySelector(
-          'input[type="hidden"]',
-        );
-        if (hiddenInput) {
-          hiddenInput.value = "";
-        }
-        // Clear preview and show placeholder
-        container.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">${t("clickDragText")}</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>`;
-    }
-
-    // Add delete button for edit mode
-    if (!isReadonly) {
-      addDeleteButton(container, () => {
-        // Clear the file
-        state.resourceIndex.delete(resourceId);
-        // Update hidden input
-        const hiddenInput = container.parentElement.querySelector(
-          'input[type="hidden"]',
-        );
-        if (hiddenInput) {
-          hiddenInput.value = "";
-        }
-        // Clear preview and show placeholder
-        container.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">${t("clickDragText")}</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 click handler for download in readonly mode
-  if (isReadonly && state.config.downloadFile) {
-    container.style.cursor = "pointer";
-    container.onclick = () => {
-      if (state.config.downloadFile) {
-        state.config.downloadFile(resourceId, fileName);
-      }
-    };
-  }
-}
-
-function renderThumbnailForResource(slot, rid, meta) {
-  const url = state.config.getThumbnail(rid);
-  if (url) {
-    const img = document.createElement("img");
-    img.className = "w-full h-full object-contain";
-    img.alt = meta.name;
-    img.src = url;
-    slot.appendChild(img);
-  } else {
-    slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-                            <svg class="w-12 h-12" 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>`;
-  }
-}
-
-function renderResourcePills(container, rids, onRemove) {
-  clear(container);
-
-  // Show initial placeholder only if this is the first render (no previous grid)
-  // Check if container already has grid class to determine if this is initial render
-  const isInitialRender = !container.classList.contains("grid");
-
-  if ((!rids || rids.length === 0) && isInitialRender) {
-    // Create grid container
-    const gridContainer = document.createElement("div");
-    gridContainer.className = "grid grid-cols-4 gap-3 mb-3";
-
-    // Create 4 placeholder slots
-    for (let i = 0; i < 4; i++) {
-      const slot = document.createElement("div");
-      slot.className =
-        "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";
-
-      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-      svg.setAttribute("class", "w-12 h-12 text-gray-400");
-      svg.setAttribute("fill", "currentColor");
-      svg.setAttribute("viewBox", "0 0 24 24");
-
-      const path = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path",
-      );
-      path.setAttribute(
-        "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.appendChild(path);
-      slot.appendChild(svg);
-
-      // Add click handler to each slot
-      slot.onclick = () => {
-        // Look for file input - check parent containers that have space-y-2 class
-        let filesWrapper = container.parentElement;
-        while (filesWrapper && !filesWrapper.classList.contains("space-y-2")) {
-          filesWrapper = filesWrapper.parentElement;
-        }
-        // If no parent with space-y-2, container itself might be the wrapper
-        if (!filesWrapper && container.classList.contains("space-y-2")) {
-          filesWrapper = container;
-        }
-        const fileInput = filesWrapper?.querySelector('input[type="file"]');
-        if (fileInput) fileInput.click();
-      };
-
-      gridContainer.appendChild(slot);
-    }
-
-    // Create text container
-    const textContainer = document.createElement("div");
-    textContainer.className = "text-center text-xs text-gray-600";
-
-    const uploadLink = document.createElement("span");
-    uploadLink.className = "underline cursor-pointer";
-    uploadLink.textContent = t("uploadText");
-    uploadLink.onclick = (e) => {
-      e.stopPropagation();
-      // Look for file input - check parent containers that have space-y-2 class
-      let filesWrapper = container.parentElement;
-      while (filesWrapper && !filesWrapper.classList.contains("space-y-2")) {
-        filesWrapper = filesWrapper.parentElement;
-      }
-      // If no parent with space-y-2, container itself might be the wrapper
-      if (!filesWrapper && container.classList.contains("space-y-2")) {
-        filesWrapper = container;
-      }
-      const fileInput = filesWrapper?.querySelector('input[type="file"]');
-      if (fileInput) fileInput.click();
-    };
-
-    textContainer.appendChild(uploadLink);
-    textContainer.appendChild(document.createTextNode(` ${t("dragDropText")}`));
-
-    // Clear and append
-    container.appendChild(gridContainer);
-    container.appendChild(textContainer);
-    return;
-  }
-
-  // Always show files grid if we have files OR if this was already a grid
-  // This prevents shrinking when deleting the last file
-  // Preserve the original "files-list" class and add grid classes
-  container.className = "files-list grid grid-cols-4 gap-3 mt-2";
-
-  // Calculate how many slots we need (at least 4, then expand by rows of 4)
-  const currentImagesCount = rids ? rids.length : 0;
-  // Calculate rows needed: always show an extra slot for adding next file
-  // 0-3 files → 1 row (4 slots), 4-7 files → 2 rows (8 slots), 8-11 files → 3 rows (12 slots)
-  const rowsNeeded = Math.floor(currentImagesCount / 4) + 1;
-  const slotsNeeded = rowsNeeded * 4;
-
-  // Add all slots (filled and empty)
-  for (let i = 0; i < slotsNeeded; i++) {
-    const slot = document.createElement("div");
-
-    if (rids && i < rids.length) {
-      // Filled slot with image preview
-      const rid = rids[i];
-      const meta = state.resourceIndex.get(rid);
-      slot.className =
-        "resource-pill aspect-square bg-gray-100 rounded-lg overflow-hidden relative group border border-gray-300";
-      slot.dataset.resourceId = rid;
-
-      // Add image, video, 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;
-          };
-          reader.readAsDataURL(meta.file);
-          slot.appendChild(img);
-        } else if (state.config.getThumbnail) {
-          // Use getThumbnail for uploaded files
-          renderThumbnailForResource(slot, rid, meta);
-        } else {
-          slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-                        <svg class="w-12 h-12" 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>`;
-        }
-      } else if (meta && meta.type?.startsWith("video/")) {
-        if (meta.file && meta.file instanceof File) {
-          // Video file - use object URL for preview in thumbnail format
-          const videoUrl = URL.createObjectURL(meta.file);
-          slot.innerHTML = `
-            <div class="relative group h-full w-full">
-              <video class="w-full h-full object-contain" preload="metadata" muted>
-                <source src="${videoUrl}" type="${meta.type}">
+          `})}else e.innerHTML=`<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">\u{1F4C1}</div><div class="text-sm">${c}</div></div>`;!r&&!(i&&i.type&&i.type.startsWith("video/"))&&Le(e,n,()=>{var s;n.resourceIndex.delete(t);const u=(s=e.parentElement)==null?void 0:s.querySelector('input[type="hidden"]');u&&(u.value=""),e.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">${$("clickDragText",n)}</div>
+          </div>
+        `})}else if(n.config.getThumbnail)try{const s=await n.config.getThumbnail(t);s?(N(e),a.src=s,e.appendChild(a)):j(e,n)}catch(s){console.error("Failed to get thumbnail:",s),e.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">${c||"Preview unavailable"}</div>
+        </div>
+      `}else j(e,n)}async function B(e,t,n){var o,c;const r=t.resourceIndex.get(e),l=(r==null?void 0:r.name)||e.split("/").pop()||"file",a=l.toLowerCase().match(/\.psd$/),i=document.createElement("div");i.className=a?"space-y-2":"space-y-3";const s=document.createElement("div");a?s.className="bg-gray-100 rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity flex items-center p-3 max-w-sm":s.className="bg-gray-100 rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity";const u=!a&&(((o=r==null?void 0:r.type)==null?void 0:o.startsWith("image/"))||l.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp)$/)),d=((c=r==null?void 0:r.type)==null?void 0:c.startsWith("video/"))||l.toLowerCase().match(/\.(mp4|webm|avi|mov)$/);if(u)if(t.config.getThumbnail)try{const m=await t.config.getThumbnail(e);m?s.innerHTML=`<img src="${m}" alt="${l}" class="w-full h-auto">`:s.innerHTML=`<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">\u{1F5BC}\uFE0F</div><div class="text-sm">${l}</div></div></div>`}catch(m){console.warn("getThumbnail failed for",e,m),s.innerHTML=`<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">\u{1F5BC}\uFE0F</div><div class="text-sm">${l}</div></div></div>`}else s.innerHTML=`<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">\u{1F5BC}\uFE0F</div><div class="text-sm">${l}</div></div></div>`;else if(d)if(t.config.getThumbnail)try{const m=await t.config.getThumbnail(e);m?s.innerHTML=`
+            <div class="relative group">
+              <video class="w-full h-auto" controls preload="auto" muted>
+                <source src="${m}" type="${(r==null?void 0:r.type)||"video/mp4"}">
+                \u0412\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u0438\u0434\u0435\u043E.
               </video>
-              <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
-                <div class="bg-white bg-opacity-90 rounded-full p-1">
-                  <svg class="w-4 h-4 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
+              <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 if (state.config.getThumbnail) {
-          // Use getThumbnail for uploaded video files
-          const videoUrl = state.config.getThumbnail(rid);
-          if (videoUrl) {
-            slot.innerHTML = `
-              <div class="relative group h-full w-full">
-                <video class="w-full h-full object-contain" preload="metadata" muted>
-                  <source src="${videoUrl}" type="${meta.type}">
-                </video>
-                <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
-                  <div class="bg-white bg-opacity-90 rounded-full p-1">
-                    <svg class="w-4 h-4 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
-                      <path d="M8 5v14l11-7z"/>
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            `;
-          } else {
-            slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-                            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M8 5v14l11-7z"/>
-                            </svg>
-                            <div class="text-xs mt-1">${meta?.name || "Video"}</div>
-                        </div>`;
-          }
-        } else {
-          slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-                        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M8 5v14l11-7z"/>
-                        </svg>
-                        <div class="text-xs mt-1">${meta?.name || "Video"}</div>
-                    </div>`;
-        }
-      } 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>`;
-      }
-
-      // 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 = t("removeElement");
-        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-12 h-12 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 = () => {
-        // Look for file input - check parent containers that have space-y-2 class
-        let filesWrapper = container.parentElement;
-        while (filesWrapper && !filesWrapper.classList.contains("space-y-2")) {
-          filesWrapper = filesWrapper.parentElement;
-        }
-        // If no parent with space-y-2, container itself might be the wrapper
-        if (!filesWrapper && container.classList.contains("space-y-2")) {
-          filesWrapper = container;
-        }
-        const fileInput = filesWrapper?.querySelector('input[type="file"]');
-        if (fileInput) fileInput.click();
-      };
-    }
-
-    container.appendChild(slot);
-  }
-}
-
-// Utility functions (currently unused but may be needed in future)
-// 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 generateResourceId() {
-//   return (
-//     `res_${Math.random().toString(36).substr(2, 9)}${Date.now().toString(36)}`
-//   );
-// }
-
-async function handleFileSelect(file, container, fieldName, deps = null) {
-  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, // Store the file object for local preview
-  });
-
-  // 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, {
-    fileName: file.name,
-    isReadonly: false,
-    deps,
-  }).catch(console.error);
-}
-
-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 addDeleteButton(container, onDelete) {
-  // Remove existing overlay if any
-  const existingOverlay = container.querySelector(".delete-overlay");
-  if (existingOverlay) {
-    existingOverlay.remove();
-  }
-
-  // Create overlay with center delete button (like in files)
-  const overlay = document.createElement("div");
-  overlay.className =
-    "delete-overlay absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center";
-
-  const deleteBtn = document.createElement("button");
-  deleteBtn.className =
-    "bg-red-600 text-white px-3 py-1 rounded text-sm hover:bg-red-700 transition-colors";
-  deleteBtn.textContent = t("removeElement");
-  deleteBtn.onclick = (e) => {
-    e.stopPropagation();
-    onDelete();
-  };
-
-  overlay.appendChild(deleteBtn);
-  container.appendChild(overlay);
-}
-
-// JSON path resolution for external actions (currently unused but kept for future use)
-// eslint-disable-next-line no-unused-vars
-function resolveFieldPath(path, formData) {
-  // Remove leading $input_data. prefix if present
-  const cleanPath = path.replace(/^\$input_data\./, "");
-
-  // Split path into segments, handling array notation
-  const segments = cleanPath.split(/[.[\]]/).filter(Boolean);
-
-  // Try to find the corresponding form element
-  return findElementByPath(segments, formData);
-}
-
-function findElementByPath(segments, data, currentPath = "") {
-  if (segments.length === 0) return currentPath;
-
-  const [head, ...tail] = segments;
-
-  // Check if this is an array index
-  const isArrayIndex = /^\d+$/.test(head);
-
-  if (isArrayIndex) {
-    // Array index case: build path like "fieldName[index]"
-    const newPath = currentPath ? `${currentPath}[${head}]` : `[${head}]`;
-    return findElementByPath(tail, data, newPath);
-  } else {
-    // Regular field name
-    const newPath = currentPath ? `${currentPath}.${head}` : head;
-    return findElementByPath(tail, data, newPath);
-  }
-}
-
-function findFormElementByFieldPath(fieldPath) {
-  // Try to find the form element that corresponds to the field path
-  // This looks for elements with name attributes that match the path pattern
-
-  if (!state.formRoot) return null;
-
-  // In edit mode, try to find input elements with name attributes
-  if (!state.config.readonly) {
-    // Try exact match first
-    let element = state.formRoot.querySelector(`[name="${fieldPath}"]`);
-    if (element) return element;
-
-    // Try with array notation variations
-    const variations = [
-      fieldPath,
-      fieldPath.replace(/\[(\d+)\]/g, "[$1]"), // normalize array notation
-      fieldPath.replace(/\./g, "[") +
-        "]".repeat((fieldPath.match(/\./g) || []).length), // convert dots to brackets
-    ];
-
-    for (const variation of variations) {
-      element = state.formRoot.querySelector(`[name="${variation}"]`);
-      if (element) return element;
-    }
-  }
-
-  // In readonly mode, or if no input found, look for field wrappers using data attributes
-  // Find the schema element for this field path to match against rendered fields
-  const schemaElement = findSchemaElement(fieldPath);
-  if (!schemaElement) return null;
-
-  // Look for field wrappers that contain the field key
-  const fieldWrappers = state.formRoot.querySelectorAll('.fb-field-wrapper');
-  for (const wrapper of fieldWrappers) {
-    // Try to find a label or element that matches this field
-    const labelText = schemaElement.label || schemaElement.key;
-    const labelElement = wrapper.querySelector('label');
-    if (labelElement && (labelElement.textContent === labelText || labelElement.textContent === `${labelText}*`)) {
-      // Create a dummy element for the field so actions can attach
-      let fieldElement = wrapper.querySelector('.field-placeholder');
-      if (!fieldElement) {
-        fieldElement = document.createElement('div');
-        fieldElement.className = 'field-placeholder';
-        fieldElement.style.display = 'none';
-        wrapper.appendChild(fieldElement);
-      }
-      return fieldElement;
-    }
-  }
-
-  return null;
-}
-
-function renderExternalActions() {
-  if (!state.externalActions || !Array.isArray(state.externalActions)) return;
-
-  // Group actions by related_field (null for form-level actions)
-  const actionsByField = new Map();
-  const trueFormLevelActions = [];
-  const movedFormLevelActions = [];
-
-  state.externalActions.forEach((action) => {
-    if (!action.key || !action.value) return;
-
-    if (!action.related_field) {
-      // True form-level action
-      trueFormLevelActions.push(action);
-    } else {
-      // Field-level action
-      if (!actionsByField.has(action.related_field)) {
-        actionsByField.set(action.related_field, []);
-      }
-      actionsByField.get(action.related_field).push(action);
-    }
-  });
-
-  // Render field-level actions
-  actionsByField.forEach((actions, fieldPath) => {
-    // Find the form element for this related field
-    const fieldElement = findFormElementByFieldPath(fieldPath);
-    if (!fieldElement) {
-      console.warn(
-        `External action: Could not find form element for field "${fieldPath}", treating as form-level actions`,
-      );
-      // If field is not found, treat these actions as moved form-level actions
-      movedFormLevelActions.push(...actions);
-      return;
-    }
-
-    // Find the wrapper element that contains the field using stable class
-    let wrapper = fieldElement.closest(".fb-field-wrapper");
-    if (!wrapper) {
-      wrapper = fieldElement.parentElement;
-    }
-
-    if (!wrapper) {
-      console.warn(
-        `External action: Could not find wrapper for field "${fieldPath}"`,
-      );
-      return;
-    }
-
-    // Remove any existing actions container
-    const existingContainer = wrapper.querySelector(".external-actions-container");
-    if (existingContainer) {
-      existingContainer.remove();
-    }
-
-    // Create actions container
-    const actionsContainer = document.createElement("div");
-    actionsContainer.className =
-      "external-actions-container mt-3 flex flex-wrap gap-2";
-
-    // Find the corresponding schema element for label lookup
-    const schemaElement = findSchemaElement(fieldPath);
-
-    // Create action buttons
-    actions.forEach((action) => {
-      const actionBtn = document.createElement("button");
-      actionBtn.type = "button";
-      actionBtn.className =
-        "bg-white text-gray-700 border border-gray-200 px-3 py-2 text-sm rounded-lg hover:bg-gray-50 hover:border-gray-300 transition-all duration-200 shadow-sm";
-
-      // Resolve action label with priority:
-      // 1. Use explicit label from action if provided
-      // 2. Try to find label from schema element labels using key
-      // 3. Fall back to using key as label
-      const resolvedLabel = resolveActionLabel(action.key, action.label, schemaElement);
-      actionBtn.textContent = resolvedLabel;
-
-      actionBtn.addEventListener("click", (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        if (
-          state.config.actionHandler &&
-          typeof state.config.actionHandler === "function"
-        ) {
-          // Call with value, key, and related_field for the new actions system
-          state.config.actionHandler(action.value, action.key, action.related_field);
-        }
-      });
-
-      actionsContainer.appendChild(actionBtn);
-    });
-
-    wrapper.appendChild(actionsContainer);
-  });
-
-  // Render form-level actions at the bottom of the form
-  const allFormLevelActions = [...trueFormLevelActions, ...movedFormLevelActions];
-  if (allFormLevelActions.length > 0) {
-    renderFormLevelActions(allFormLevelActions, trueFormLevelActions);
-  }
-}
-
-function renderFormLevelActions(actions, trueFormLevelActions = []) {
-  if (!state.formRoot) return;
-
-  // Remove any existing form-level actions container
-  const existingContainer = state.formRoot.querySelector(".form-level-actions-container");
-  if (existingContainer) {
-    existingContainer.remove();
-  }
-
-  // Create form-level actions container
-  const actionsContainer = document.createElement("div");
-  actionsContainer.className =
-    "form-level-actions-container mt-6 pt-4 border-t border-gray-200 flex flex-wrap gap-3 justify-center";
-
-  // Create action buttons
-  actions.forEach((action) => {
-    const actionBtn = document.createElement("button");
-    actionBtn.type = "button";
-    actionBtn.className =
-      "bg-white text-gray-700 border border-gray-200 px-4 py-2 text-sm font-medium rounded-lg hover:bg-gray-50 hover:border-gray-300 transition-all duration-200 shadow-sm";
-
-    // Check if this is a true form-level action (no related_field originally)
-    const isTrueFormLevelAction = trueFormLevelActions.includes(action);
-
-    // Resolve action label with priority:
-    // 1. Use explicit label from action if provided
-    // 2. Try to find label from schema element labels using key (only for true form-level actions)
-    // 3. Fall back to using key as label
-    const resolvedLabel = resolveActionLabel(action.key, action.label, null, isTrueFormLevelAction);
-    actionBtn.textContent = resolvedLabel;
-
-    actionBtn.addEventListener("click", (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (
-        state.config.actionHandler &&
-        typeof state.config.actionHandler === "function"
-      ) {
-        // Call with value, key, and null related_field for form-level actions
-        state.config.actionHandler(action.value, action.key, null);
-      }
-    });
-
-    actionsContainer.appendChild(actionBtn);
-  });
-
-  // Append to form root
-  state.formRoot.appendChild(actionsContainer);
-}
-
-// Helper function to resolve action label
-function resolveActionLabel(actionKey, externalLabel, schemaElement, isTrueFormLevelAction = false) {
-  // 1. Try to find label from predefined actions in schema element using key (highest priority)
-  if (schemaElement && schemaElement.actions && Array.isArray(schemaElement.actions)) {
-    const predefinedAction = schemaElement.actions.find(a => a.key === actionKey);
-    if (predefinedAction && predefinedAction.label) {
-      return predefinedAction.label;
-    }
-  }
-
-  // 2. Try to find label from root-level schema actions (only for true form-level actions)
-  if (isTrueFormLevelAction && state.schema && state.schema.actions && Array.isArray(state.schema.actions)) {
-    const rootAction = state.schema.actions.find(a => a.key === actionKey);
-    if (rootAction && rootAction.label) {
-      return rootAction.label;
-    }
-  }
-
-  // 3. Use explicit label from external action if provided
-  if (externalLabel) {
-    return externalLabel;
-  }
-
-  // 4. Fall back to using key as label
-  return actionKey;
-}
-
-// Helper function to find schema element by field path
-function findSchemaElement(fieldPath) {
-  if (!state.schema || !state.schema.elements) return null;
-
-  let currentElements = state.schema.elements;
-  let foundElement = null;
-
-  // Handle paths like 'a.b' or 'a[0].b' by looking for keys in sequence
-  const keys = fieldPath.replace(/\[\d+\]/g, '').split('.').filter(Boolean);
-
-  for (const key of keys) {
-    foundElement = currentElements.find(el => el.key === key);
-    if (!foundElement) {
-      return null; // Key not found at this level
-    }
-    if (foundElement.elements) {
-      currentElements = foundElement.elements;
-    }
-  }
-
-  return foundElement;
-}
-
-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 (only in browser)
-if (typeof document !== "undefined") {
-  document.addEventListener("click", (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, customScopeRoot = null) {
-    const key = element.key;
-    const scopeRoot = customScopeRoot || state.formRoot;
-
-    switch (element.type) {
-      case "text":
-      case "textarea": {
-        if (element.multiple) {
-          // Handle multiple text/textarea fields
-          const inputs = scopeRoot.querySelectorAll(`[name^="${key}["]`);
-          const values = [];
-
-          inputs.forEach((input, index) => {
-            const val = input?.value ?? "";
-            values.push(val);
-
-            if (!skipValidation && val) {
-              if (
-                element.minLength !== null &&
-                val.length < element.minLength
-              ) {
-                errors.push(`${key}[${index}]: minLength=${element.minLength}`);
-                markValidity(input, `minLength=${element.minLength}`);
-              }
-              if (
-                element.maxLength !== null &&
-                val.length > element.maxLength
-              ) {
-                errors.push(`${key}[${index}]: maxLength=${element.maxLength}`);
-                markValidity(input, `maxLength=${element.maxLength}`);
-              }
-              if (element.pattern) {
-                try {
-                  const re = new RegExp(element.pattern);
-                  if (!re.test(val)) {
-                    errors.push(`${key}[${index}]: pattern mismatch`);
-                    markValidity(input, "pattern mismatch");
-                  }
-                } catch {
-                  errors.push(`${key}[${index}]: invalid pattern`);
-                  markValidity(input, "invalid pattern");
-                }
-              }
-            } else {
-              markValidity(input, null);
-            }
-          });
-
-          // Validate minCount/maxCount constraints
-          if (!skipValidation) {
-            const minCount = element.minCount ?? 1;
-            const maxCount = element.maxCount ?? 10;
-            const nonEmptyValues = values.filter((v) => v.trim() !== "");
-
-            if (element.required && nonEmptyValues.length === 0) {
-              errors.push(`${key}: required`);
-            }
-            if (nonEmptyValues.length < minCount) {
-              errors.push(`${key}: minimum ${minCount} items required`);
-            }
-            if (nonEmptyValues.length > maxCount) {
-              errors.push(`${key}: maximum ${maxCount} items allowed`);
-            }
-          }
-
-          return values;
-        } else {
-          // Handle single text/textarea field
-          const input = scopeRoot.querySelector(`[name$="${key}"]`);
-          const val = input?.value ?? "";
-          if (!skipValidation && element.required && val === "") {
-            errors.push(`${key}: required`);
-            markValidity(input, "required");
-            return "";
-          }
-          if (!skipValidation && val) {
-            if (element.minLength !== null && val.length < element.minLength) {
-              errors.push(`${key}: minLength=${element.minLength}`);
-              markValidity(input, `minLength=${element.minLength}`);
-            }
-            if (element.maxLength !== null && val.length > element.maxLength) {
-              errors.push(`${key}: maxLength=${element.maxLength}`);
-              markValidity(input, `maxLength=${element.maxLength}`);
-            }
-            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");
-              }
-            }
-          } else if (skipValidation) {
-            markValidity(input, null);
-          } else {
-            markValidity(input, null);
-          }
-          return val;
-        }
-      }
-      case "number": {
-        if (element.multiple) {
-          // Handle multiple number fields
-          const inputs = scopeRoot.querySelectorAll(`[name^="${key}["]`);
-          const values = [];
-
-          inputs.forEach((input, index) => {
-            const raw = input?.value ?? "";
-            if (raw === "") {
-              values.push(null);
-              markValidity(input, null);
-              return;
-            }
-
-            const v = parseFloat(raw);
-            if (!skipValidation && !Number.isFinite(v)) {
-              errors.push(`${key}[${index}]: not a number`);
-              markValidity(input, "not a number");
-              values.push(null);
-              return;
-            }
-
-            if (!skipValidation && element.min !== null && v < element.min) {
-              errors.push(`${key}[${index}]: < min=${element.min}`);
-              markValidity(input, `< min=${element.min}`);
-            }
-            if (!skipValidation && element.max !== null && v > element.max) {
-              errors.push(`${key}[${index}]: > max=${element.max}`);
-              markValidity(input, `> max=${element.max}`);
-            }
-
-            const d = Number.isInteger(element.decimals ?? 0)
-              ? element.decimals
-              : 0;
-            markValidity(input, null);
-            values.push(Number(v.toFixed(d)));
-          });
-
-          // Validate minCount/maxCount constraints
-          if (!skipValidation) {
-            const minCount = element.minCount ?? 1;
-            const maxCount = element.maxCount ?? 10;
-            const nonNullValues = values.filter((v) => v !== null);
-
-            if (element.required && nonNullValues.length === 0) {
-              errors.push(`${key}: required`);
-            }
-            if (nonNullValues.length < minCount) {
-              errors.push(`${key}: minimum ${minCount} items required`);
-            }
-            if (nonNullValues.length > maxCount) {
-              errors.push(`${key}: maximum ${maxCount} items allowed`);
-            }
-          }
-
-          return values;
-        } else {
-          // Handle single number field
-          const input = scopeRoot.querySelector(`[name$="${key}"]`);
-          const raw = input?.value ?? "";
-          if (!skipValidation && element.required && raw === "") {
-            errors.push(`${key}: required`);
-            markValidity(input, "required");
-            return null;
-          }
-          if (raw === "") {
-            markValidity(input, null);
-            return null;
-          }
-          const v = parseFloat(raw);
-          if (!skipValidation && !Number.isFinite(v)) {
-            errors.push(`${key}: not a number`);
-            markValidity(input, "not a number");
-            return null;
-          }
-          if (!skipValidation && element.min !== null && v < element.min) {
-            errors.push(`${key}: < min=${element.min}`);
-            markValidity(input, `< min=${element.min}`);
-          }
-          if (!skipValidation && element.max !== null && v > element.max) {
-            errors.push(`${key}: > max=${element.max}`);
-            markValidity(input, `> max=${element.max}`);
-          }
-          const d = Number.isInteger(element.decimals ?? 0)
-            ? element.decimals
-            : 0;
-          markValidity(input, null);
-          return Number(v.toFixed(d));
-        }
-      }
-      case "select": {
-        if (element.multiple) {
-          // Handle multiple select fields
-          const inputs = scopeRoot.querySelectorAll(`[name^="${key}["]`);
-          const values = [];
-
-          inputs.forEach((input) => {
-            const val = input?.value ?? "";
-            values.push(val);
-            markValidity(input, null);
-          });
-
-          // Validate minCount/maxCount constraints
-          if (!skipValidation) {
-            const minCount = element.minCount ?? 1;
-            const maxCount = element.maxCount ?? 10;
-            const nonEmptyValues = values.filter((v) => v !== "");
-
-            if (element.required && nonEmptyValues.length === 0) {
-              errors.push(`${key}: required`);
-            }
-            if (nonEmptyValues.length < minCount) {
-              errors.push(`${key}: minimum ${minCount} items required`);
-            }
-            if (nonEmptyValues.length > maxCount) {
-              errors.push(`${key}: maximum ${maxCount} items allowed`);
-            }
-          }
-
-          return values;
-        } else {
-          // Handle single select field
-          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": {
-        if (element.multiple) {
-          // Handle file with multiple property like files type
-          // Find the files list by locating the specific file input for this field
-          const fullKey = pathJoin(ctx.path, key);
-          const pickerInput = scopeRoot.querySelector(
-            `input[type="file"][name="${fullKey}"]`,
-          );
-          const filesWrapper = pickerInput?.closest(".space-y-2");
-          const container = filesWrapper?.querySelector(".files-list") || null;
-
-          const resourceIds = [];
-          if (container) {
-            const pills = container.querySelectorAll(".resource-pill");
-            pills.forEach((pill) => {
-              const resourceId = pill.dataset.resourceId;
-              if (resourceId) {
-                resourceIds.push(resourceId);
-              }
-            });
-          }
-
-          // Validate minCount/maxCount constraints
-          if (!skipValidation) {
-            const minFiles = element.minCount ?? 0;
-            const maxFiles = element.maxCount ?? Infinity;
-
-            if (element.required && resourceIds.length === 0) {
-              errors.push(`${key}: required`);
-            }
-            if (resourceIds.length < minFiles) {
-              errors.push(`${key}: minimum ${minFiles} files required`);
-            }
-            if (resourceIds.length > maxFiles) {
-              errors.push(`${key}: maximum ${maxFiles} files allowed`);
-            }
-          }
-
-          return resourceIds;
-        } else {
-          // Handle single 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
-        // Find the correct .files-list by looking for one that's associated with this field
-        let container = null;
-
-        // Strategy 1: Try to find via the input element
-        const nameElement = scopeRoot.querySelector(`[name="${key}"]`);
-        if (nameElement) {
-          // Look for .files-list in the input's parent container
-          container = nameElement.parentElement?.querySelector(".files-list");
-        }
-
-        // Strategy 2: If we have multiple .files-list elements, this gets tricky
-        // For now, let's use a simpler approach for the demo: just find the first .files-list
-        // that has resource pills (since our demo only has one files field)
-        if (!container) {
-          const allFilesLists = scopeRoot.querySelectorAll(".files-list");
-          for (const filesList of allFilesLists) {
-            const pillCount =
-              filesList.querySelectorAll(".resource-pill").length;
-            if (pillCount > 0) {
-              container = filesList;
-              break;
-            }
-          }
-        }
-
-        const rids = [];
-        if (container) {
-          const resourcePills = container.querySelectorAll(".resource-pill");
-          resourcePills.forEach((pill, _index) => {
-            const resourceId = pill.dataset.resourceId;
-            if (resourceId) {
-              rids.push(resourceId);
-            }
-          });
-        }
-
-        return rids;
-      }
-      case "group": {
-        if (element.repeat && isPlainObject(element.repeat)) {
-          const items = [];
-          // Use full path for nested group element search
-          const fullKey = pathJoin(ctx.path, key);
-          const itemElements = scopeRoot.querySelectorAll(
-            `[name^="${fullKey}["]`,
-          );
-
-          // Extract actual indices from DOM element names instead of assuming sequential numbering
-          const actualIndices = new Set();
-          itemElements.forEach((el) => {
-            const match = el.name.match(
-              new RegExp(
-                `^${fullKey.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\[(\\d+)\\]`,
-              ),
-            );
-            if (match) {
-              actualIndices.add(parseInt(match[1]));
-            }
-          });
-
-          const sortedIndices = Array.from(actualIndices).sort((a, b) => a - b);
-
-          sortedIndices.forEach((actualIndex) => {
-            const itemData = {};
-            // Find the specific group item container for scoped queries - use full path
-            const fullItemPath = `${fullKey}[${actualIndex}]`;
-            const itemContainer =
-              scopeRoot.querySelector(`[data-group-item="${fullItemPath}"]`) ||
-              scopeRoot;
-            element.elements.forEach((child) => {
-              if (child.hidden) {
-                // For hidden child elements, use their default value
-                itemData[child.key] =
-                  child.default !== undefined ? child.default : null;
-              } else {
-                const childKey = `${fullKey}[${actualIndex}].${child.key}`;
-                itemData[child.key] = validateElement(
-                  { ...child, key: childKey },
-                  ctx,
-                  itemContainer,
-                );
-              }
-            });
-            items.push(itemData);
-          });
-          return items;
-        } else {
-          const groupData = {};
-          // Find the specific group container for scoped queries
-          const groupContainer =
-            scopeRoot.querySelector(`[data-group="${key}"]`) || scopeRoot;
-          element.elements.forEach((child) => {
-            if (child.hidden) {
-              // For hidden child elements, use their default value
-              groupData[child.key] =
-                child.default !== undefined ? child.default : null;
-            } else {
-              const childKey = `${key}.${child.key}`;
-              groupData[child.key] = validateElement(
-                { ...child, key: childKey },
-                ctx,
-                groupContainer,
-              );
-            }
-          });
-          return groupData;
-        }
-      }
-      case "container": {
-        if (element.multiple) {
-          // Handle multiple containers like repeating groups
-          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 = {};
-            // Find the specific container item container for scoped queries
-            const itemContainer =
-              scopeRoot.querySelector(`[data-container-item="${key}[${i}]"]`) ||
-              scopeRoot;
-            element.elements.forEach((child) => {
-              if (child.hidden) {
-                // For hidden child elements, use their default value
-                itemData[child.key] =
-                  child.default !== undefined ? child.default : null;
-              } else {
-                const childKey = `${key}[${i}].${child.key}`;
-                itemData[child.key] = validateElement(
-                  { ...child, key: childKey },
-                  ctx,
-                  itemContainer,
-                );
-              }
-            });
-            items.push(itemData);
-          }
-
-          // Validate minCount/maxCount constraints
-          if (!skipValidation) {
-            const minItems = element.minCount ?? 0;
-            const maxItems = element.maxCount ?? Infinity;
-
-            if (element.required && items.length === 0) {
-              errors.push(`${key}: required`);
-            }
-            if (items.length < minItems) {
-              errors.push(`${key}: minimum ${minItems} items required`);
-            }
-            if (items.length > maxItems) {
-              errors.push(`${key}: maximum ${maxItems} items allowed`);
-            }
-          }
-
-          return items;
-        } else {
-          const containerData = {};
-          // Find the specific container container for scoped queries
-          const containerContainer =
-            scopeRoot.querySelector(`[data-container="${key}"]`) || scopeRoot;
-          element.elements.forEach((child) => {
-            if (child.hidden) {
-              // For hidden child elements, use their default value
-              containerData[child.key] =
-                child.default !== undefined ? child.default : null;
-            } else {
-              const childKey = `${key}.${child.key}`;
-              containerData[child.key] = validateElement(
-                { ...child, key: childKey },
-                ctx,
-                containerContainer,
-              );
-            }
-          });
-          return containerData;
-        }
-      }
-      default:
-        return null;
-    }
-  }
-
-  state.schema.elements.forEach((element) => {
-    // Handle hidden elements - use their default value instead of reading from DOM
-    if (element.hidden) {
-      // Use null as default for consistency with empty field behavior
-      // File fields, number fields, and other non-text fields return null when empty
-      data[element.key] = element.default !== undefined ? element.default : null;
-    } else {
-      data[element.key] = validateElement(element, { path: "" });
-    }
-  });
-
-  return {
-    valid: errors.length === 0,
-    errors,
-    data,
-  };
-}
-
-// 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 renderMultipleTextElement(element, ctx, wrapper, pathKey) {
-  const prefillValues = ctx.prefill[element.key] || [];
-  const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
-
-  // Ensure minimum count
-  const minCount = element.minCount ?? 1;
-  const maxCount = element.maxCount ?? 10;
-
-  while (values.length < minCount) {
-    values.push(element.default || "");
-  }
-
-  const container = document.createElement("div");
-  container.className = "space-y-2";
-  wrapper.appendChild(container);
-
-  function updateIndices() {
-    const items = container.querySelectorAll(".multiple-text-item");
-    items.forEach((item, index) => {
-      const input = item.querySelector("input");
-      if (input) {
-        input.name = `${pathKey}[${index}]`;
-      }
-    });
-  }
-
-  function addTextItem(value = "", index = -1) {
-    const itemWrapper = document.createElement("div");
-    itemWrapper.className = "multiple-text-item flex items-center gap-2";
-
-    const textInput = document.createElement("input");
-    textInput.type = "text";
-    textInput.className =
-      "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
-    textInput.placeholder = element.placeholder || "Enter text";
-    textInput.value = value;
-    textInput.readOnly = state.config.readonly;
-
-    itemWrapper.appendChild(textInput);
-
-    // Remove buttons are managed centrally via updateRemoveButtons()
-
-    if (index === -1) {
-      container.appendChild(itemWrapper);
-    } else {
-      container.insertBefore(itemWrapper, container.children[index]);
-    }
-
-    updateIndices();
-    return itemWrapper;
-  }
-
-  function updateRemoveButtons() {
-    if (state.config.readonly) return;
-    const items = container.querySelectorAll(".multiple-text-item");
-    const currentCount = items.length;
-    items.forEach((item) => {
-      let removeBtn = item.querySelector(".remove-item-btn");
-      if (!removeBtn) {
-        removeBtn = document.createElement("button");
-        removeBtn.type = "button";
-        removeBtn.className =
-          "remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded";
-        removeBtn.innerHTML = "✕";
-        removeBtn.onclick = () => {
-          const currentIndex = Array.from(container.children).indexOf(item);
-          if (container.children.length > minCount) {
-            values.splice(currentIndex, 1);
-            item.remove();
-            updateIndices();
-            updateAddButton();
-            updateRemoveButtons();
-          }
-        };
-        item.appendChild(removeBtn);
-      }
-      const disabled = currentCount <= minCount;
-      removeBtn.disabled = disabled;
-      removeBtn.style.opacity = disabled ? "0.5" : "1";
-      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
-    });
-  }
-
-  function updateAddButton() {
-    const existingAddBtn = wrapper.querySelector(".add-text-btn");
-    if (existingAddBtn) existingAddBtn.remove();
-
-    if (!state.config.readonly && values.length < maxCount) {
-      const addBtn = document.createElement("button");
-      addBtn.type = "button";
-      addBtn.className =
-        "add-text-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || "Text"}`;
-      addBtn.onclick = () => {
-        values.push(element.default || "");
-        addTextItem(element.default || "");
-        updateAddButton();
-        updateRemoveButtons();
-      };
-      wrapper.appendChild(addBtn);
-    }
-  }
-
-  // Render initial items
-  values.forEach((value) => addTextItem(value));
-  updateAddButton();
-  updateRemoveButtons();
-
-  // Add hint
-  const hint = document.createElement("p");
-  hint.className = "text-xs text-gray-500 mt-1";
-  hint.textContent = makeFieldHint(element);
-  wrapper.appendChild(hint);
-}
-
-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 renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
-  const prefillValues = ctx.prefill[element.key] || [];
-  const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
-
-  // Ensure minimum count
-  const minCount = element.minCount ?? 1;
-  const maxCount = element.maxCount ?? 10;
-
-  while (values.length < minCount) {
-    values.push(element.default || "");
-  }
-
-  const container = document.createElement("div");
-  container.className = "space-y-2";
-  wrapper.appendChild(container);
-
-  function updateIndices() {
-    const items = container.querySelectorAll(".multiple-textarea-item");
-    items.forEach((item, index) => {
-      const textarea = item.querySelector("textarea");
-      if (textarea) {
-        textarea.name = `${pathKey}[${index}]`;
-      }
-    });
-  }
-
-  function addTextareaItem(value = "", index = -1) {
-    const itemWrapper = document.createElement("div");
-    itemWrapper.className = "multiple-textarea-item";
-
-    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.placeholder = element.placeholder || "Enter text";
-    textareaInput.rows = element.rows || 4;
-    textareaInput.value = value;
-    textareaInput.readOnly = state.config.readonly;
-
-    itemWrapper.appendChild(textareaInput);
-
-    // Remove buttons are managed centrally via updateRemoveButtons()
-
-    if (index === -1) {
-      container.appendChild(itemWrapper);
-    } else {
-      container.insertBefore(itemWrapper, container.children[index]);
-    }
-
-    updateIndices();
-    return itemWrapper;
-  }
-
-  function updateRemoveButtons() {
-    if (state.config.readonly) return;
-    const items = container.querySelectorAll(".multiple-textarea-item");
-    const currentCount = items.length;
-    items.forEach((item) => {
-      let removeBtn = item.querySelector(".remove-item-btn");
-      if (!removeBtn) {
-        removeBtn = document.createElement("button");
-        removeBtn.type = "button";
-        removeBtn.className =
-          "remove-item-btn mt-1 px-2 py-1 text-red-600 hover:bg-red-50 rounded text-sm";
-        removeBtn.innerHTML = "✕ Remove";
-        removeBtn.onclick = () => {
-          const currentIndex = Array.from(container.children).indexOf(item);
-          if (container.children.length > minCount) {
-            values.splice(currentIndex, 1);
-            item.remove();
-            updateIndices();
-            updateAddButton();
-            updateRemoveButtons();
-          }
-        };
-        item.appendChild(removeBtn);
-      }
-      const disabled = currentCount <= minCount;
-      removeBtn.disabled = disabled;
-      removeBtn.style.opacity = disabled ? "0.5" : "1";
-      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
-    });
-  }
-
-  function updateAddButton() {
-    const existingAddBtn = wrapper.querySelector(".add-textarea-btn");
-    if (existingAddBtn) existingAddBtn.remove();
-
-    if (!state.config.readonly && values.length < maxCount) {
-      const addBtn = document.createElement("button");
-      addBtn.type = "button";
-      addBtn.className =
-        "add-textarea-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || "Textarea"}`;
-      addBtn.onclick = () => {
-        values.push(element.default || "");
-        addTextareaItem(element.default || "");
-        updateAddButton();
-        updateRemoveButtons();
-      };
-      wrapper.appendChild(addBtn);
-    }
-  }
-
-  // Render initial items
-  values.forEach((value) => addTextareaItem(value));
-  updateAddButton();
-  updateRemoveButtons();
-
-  // Add hint
-  const hint = document.createElement("p");
-  hint.className = "text-xs text-gray-500 mt-1";
-  hint.textContent = makeFieldHint(element);
-  wrapper.appendChild(hint);
-}
-
-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 renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
-  const prefillValues = ctx.prefill[element.key] || [];
-  const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
-
-  // Ensure minimum count
-  const minCount = element.minCount ?? 1;
-  const maxCount = element.maxCount ?? 10;
-
-  while (values.length < minCount) {
-    values.push(element.default || "");
-  }
-
-  const container = document.createElement("div");
-  container.className = "space-y-2";
-  wrapper.appendChild(container);
-
-  function updateIndices() {
-    const items = container.querySelectorAll(".multiple-number-item");
-    items.forEach((item, index) => {
-      const input = item.querySelector("input");
-      if (input) {
-        input.name = `${pathKey}[${index}]`;
-      }
-    });
-  }
-
-  function addNumberItem(value = "", index = -1) {
-    const itemWrapper = document.createElement("div");
-    itemWrapper.className = "multiple-number-item flex items-center gap-2";
-
-    const numberInput = document.createElement("input");
-    numberInput.type = "number";
-    numberInput.className =
-      "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
-    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 = value;
-    numberInput.readOnly = state.config.readonly;
-
-    itemWrapper.appendChild(numberInput);
-
-    // Remove buttons are managed centrally via updateRemoveButtons()
-
-    if (index === -1) {
-      container.appendChild(itemWrapper);
-    } else {
-      container.insertBefore(itemWrapper, container.children[index]);
-    }
-
-    updateIndices();
-    return itemWrapper;
-  }
-
-  function updateRemoveButtons() {
-    if (state.config.readonly) return;
-    const items = container.querySelectorAll(".multiple-number-item");
-    const currentCount = items.length;
-    items.forEach((item) => {
-      let removeBtn = item.querySelector(".remove-item-btn");
-      if (!removeBtn) {
-        removeBtn = document.createElement("button");
-        removeBtn.type = "button";
-        removeBtn.className =
-          "remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded";
-        removeBtn.innerHTML = "✕";
-        removeBtn.onclick = () => {
-          const currentIndex = Array.from(container.children).indexOf(item);
-          if (container.children.length > minCount) {
-            values.splice(currentIndex, 1);
-            item.remove();
-            updateIndices();
-            updateAddButton();
-            updateRemoveButtons();
-          }
-        };
-        item.appendChild(removeBtn);
-      }
-      const disabled = currentCount <= minCount;
-      removeBtn.disabled = disabled;
-      removeBtn.style.opacity = disabled ? "0.5" : "1";
-      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
-    });
-  }
-
-  function updateAddButton() {
-    const existingAddBtn = wrapper.querySelector(".add-number-btn");
-    if (existingAddBtn) existingAddBtn.remove();
-
-    if (!state.config.readonly && values.length < maxCount) {
-      const addBtn = document.createElement("button");
-      addBtn.type = "button";
-      addBtn.className =
-        "add-number-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || "Number"}`;
-      addBtn.onclick = () => {
-        values.push(element.default || "");
-        addNumberItem(element.default || "");
-        updateAddButton();
-        updateRemoveButtons();
-      };
-      wrapper.appendChild(addBtn);
-    }
-  }
-
-  // Render initial items
-  values.forEach((value) => addNumberItem(value));
-  updateAddButton();
-  updateRemoveButtons();
-
-  // Add hint
-  const hint = document.createElement("p");
-  hint.className = "text-xs text-gray-500 mt-1";
-  hint.textContent = makeFieldHint(element);
-  wrapper.appendChild(hint);
-}
-
-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;
-    }
-    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);
-}
-
-function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
-  const prefillValues = ctx.prefill[element.key] || [];
-  const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
-
-  // Ensure minimum count
-  const minCount = element.minCount ?? 1;
-  const maxCount = element.maxCount ?? 10;
-
-  while (values.length < minCount) {
-    values.push(element.default || element.options?.[0]?.value || "");
-  }
-
-  const container = document.createElement("div");
-  container.className = "space-y-2";
-  wrapper.appendChild(container);
-
-  function updateIndices() {
-    const items = container.querySelectorAll(".multiple-select-item");
-    items.forEach((item, index) => {
-      const select = item.querySelector("select");
-      if (select) {
-        select.name = `${pathKey}[${index}]`;
-      }
-    });
-  }
-
-  function addSelectItem(value = "", index = -1) {
-    const itemWrapper = document.createElement("div");
-    itemWrapper.className = "multiple-select-item flex items-center gap-2";
-
-    const selectInput = document.createElement("select");
-    selectInput.className =
-      "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
-    selectInput.disabled = state.config.readonly;
-
-    // Add options
-    (element.options || []).forEach((option) => {
-      const optionElement = document.createElement("option");
-      optionElement.value = option.value;
-      optionElement.textContent = option.label;
-      if (value === option.value) {
-        optionElement.selected = true;
-      }
-      selectInput.appendChild(optionElement);
-    });
-
-    itemWrapper.appendChild(selectInput);
-
-    // Remove buttons are managed centrally via updateRemoveButtons()
-
-    if (index === -1) {
-      container.appendChild(itemWrapper);
-    } else {
-      container.insertBefore(itemWrapper, container.children[index]);
-    }
-
-    updateIndices();
-    return itemWrapper;
-  }
-
-  function updateRemoveButtons() {
-    if (state.config.readonly) return;
-    const items = container.querySelectorAll(".multiple-select-item");
-    const currentCount = items.length;
-    items.forEach((item) => {
-      let removeBtn = item.querySelector(".remove-item-btn");
-      if (!removeBtn) {
-        removeBtn = document.createElement("button");
-        removeBtn.type = "button";
-        removeBtn.className =
-          "remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded";
-        removeBtn.innerHTML = "✕";
-        removeBtn.onclick = () => {
-          const currentIndex = Array.from(container.children).indexOf(item);
-          if (container.children.length > minCount) {
-            values.splice(currentIndex, 1);
-            item.remove();
-            updateIndices();
-            updateAddButton();
-            updateRemoveButtons();
-          }
-        };
-        item.appendChild(removeBtn);
-      }
-      const disabled = currentCount <= minCount;
-      removeBtn.disabled = disabled;
-      removeBtn.style.opacity = disabled ? "0.5" : "1";
-      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
-    });
-  }
-
-  function updateAddButton() {
-    const existingAddBtn = wrapper.querySelector(".add-select-btn");
-    if (existingAddBtn) existingAddBtn.remove();
-
-    if (!state.config.readonly && values.length < maxCount) {
-      const addBtn = document.createElement("button");
-      addBtn.type = "button";
-      addBtn.className =
-        "add-select-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || "Selection"}`;
-      addBtn.onclick = () => {
-        const defaultValue =
-          element.default || element.options?.[0]?.value || "";
-        values.push(defaultValue);
-        addSelectItem(defaultValue);
-        updateAddButton();
-        updateRemoveButtons();
-      };
-      wrapper.appendChild(addBtn);
-    }
-  }
-
-  // Render initial items
-  values.forEach((value) => addSelectItem(value));
-  updateAddButton();
-  updateRemoveButtons();
-
-  // Add hint
-  const hint = document.createElement("p");
-  hint.className = "text-xs text-gray-500 mt-1";
-  hint.textContent = makeFieldHint(element);
-  wrapper.appendChild(hint);
-}
-
-function renderFileElement(element, ctx, wrapper, pathKey) {
-  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">${t("noFileSelected")}</div>`;
-      wrapper.appendChild(emptyState);
-    }
-  } else {
-    // Edit mode: normal file input
-    const fileWrapper = document.createElement("div");
-    fileWrapper.className = "space-y-2";
-
-    const picker = document.createElement("input");
-    picker.type = "file";
-    picker.name = pathKey;
-    picker.style.display = "none"; // Hide default input
-    if (element.accept?.extensions) {
-      picker.accept = element.accept.extensions
-        .map((ext) => `.${ext}`)
-        .join(",");
-    }
-
-    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";
-
-    const initial = ctx.prefill[element.key] || element.default;
-
-    // Set up click and drag handlers
-    const fileUploadHandler = () => picker.click();
-    const dragHandler = (files) => {
-      if (files.length > 0) {
-        const deps = { picker, fileUploadHandler, dragHandler };
-        handleFileSelect(files[0], fileContainer, pathKey, deps);
-      }
-    };
-
-    // Handle initial prefill data
-    if (initial) {
-      handleInitialFileData(initial, fileContainer, pathKey, fileWrapper, {
-        picker,
-        fileUploadHandler,
-        dragHandler,
-      });
-    } else {
-      setEmptyFileContainer(fileContainer);
-    }
-
-    fileContainer.onclick = fileUploadHandler;
-    setupDragAndDrop(fileContainer, dragHandler);
-
-    picker.onchange = () => {
-      if (picker.files.length > 0) {
-        const deps = { picker, fileUploadHandler, dragHandler };
-        handleFileSelect(picker.files[0], fileContainer, pathKey, deps);
-      }
-    };
-
-    fileWrapper.appendChild(fileContainer);
-    fileWrapper.appendChild(picker);
-
-    // 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">${t("uploadText")}</span> ${t("dragDropTextSingle")}`;
-    uploadText.querySelector("span").onclick = () => picker.click();
-    fileWrapper.appendChild(uploadText);
-
-    // 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(fileWrapper);
-  }
-}
-
-function handleInitialFileData(
-  initial,
-  fileContainer,
-  pathKey,
-  fileWrapper,
-  deps,
-) {
-  // Add prefill data to resourceIndex so renderFilePreview can use it
-  if (!state.resourceIndex.has(initial)) {
-    // Extract filename from URL/path
-    const filename = initial.split("/").pop() || "file";
-    // Determine file type from extension
-    const extension = filename.split(".").pop()?.toLowerCase();
-    let fileType = "application/octet-stream";
-
-    if (extension) {
-      if (["jpg", "jpeg", "png", "gif", "webp"].includes(extension)) {
-        fileType = `image/${extension === "jpg" ? "jpeg" : extension}`;
-      } else if (["mp4", "webm", "mov", "avi"].includes(extension)) {
-        fileType = `video/${extension === "mov" ? "quicktime" : extension}`;
-      }
-    }
-
-    state.resourceIndex.set(initial, {
-      name: filename,
-      type: fileType,
-      size: 0,
-      file: null, // No local file for prefill data
-    });
-  }
-
-  renderFilePreview(fileContainer, initial, {
-    fileName: initial,
-    isReadonly: false,
-    deps,
-  }).catch(console.error);
-
-  // Create hidden input to store the prefilled resource ID
-  const hiddenInput = document.createElement("input");
-  hiddenInput.type = "hidden";
-  hiddenInput.name = pathKey;
-  hiddenInput.value = initial;
-  fileWrapper.appendChild(hiddenInput);
-}
-
-function setEmptyFileContainer(fileContainer) {
-  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">${t("clickDragText")}</div>
-    </div>
-  `;
-}
-
-function renderFilesElement(element, ctx, wrapper, pathKey) {
-  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";
-
-    const initialFiles = ctx.prefill[element.key] || [];
-
-    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">${t("noFilesSelected")}</div></div>`;
-    }
-
-    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?.extensions) {
-      filesPicker.accept = element.accept.extensions
-        .map((ext) => `.${ext}`)
-        .join(",");
-    }
-
-    // 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 = "files-list";
-
-    const initialFiles = ctx.prefill[element.key] || [];
-
-    // Add prefill files to resourceIndex so renderResourcePills can use them
-    addPrefillFilesToIndex(initialFiles);
-
-    function updateFilesList() {
-      renderResourcePills(list, initialFiles, (ridToRemove) => {
-        const index = initialFiles.indexOf(ridToRemove);
-        if (index > -1) {
-          initialFiles.splice(index, 1);
-        }
-        updateFilesList(); // Re-render after removal
-      });
-    }
-
-    // Initial render
-    updateFilesList();
-
-    setupFilesDropHandler(filesContainer, initialFiles, updateFilesList);
-    setupFilesPickerHandler(filesPicker, initialFiles, updateFilesList);
-
-    filesContainer.appendChild(list);
-    filesWrapper.appendChild(filesContainer);
-    filesWrapper.appendChild(filesPicker);
-
-    // 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);
-
-    wrapper.appendChild(filesWrapper);
-  }
-}
-
-function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
-  // Use the same logic as renderFilesElement but with minCount/maxCount from element properties
-  const minFiles = element.minCount ?? 0;
-  const maxFiles = element.maxCount ?? Infinity;
-
-  if (state.config.readonly) {
-    // Readonly mode: render as results list
-    const resultsWrapper = document.createElement("div");
-    resultsWrapper.className = "space-y-4";
-
-    const initialFiles = ctx.prefill[element.key] || [];
-
-    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">${t("noFilesSelected")}</div></div>`;
-    }
-
-    wrapper.appendChild(resultsWrapper);
-  } else {
-    // Edit mode: multiple file input with min/max validation
-    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?.extensions) {
-      filesPicker.accept = element.accept.extensions
-        .map((ext) => `.${ext}`)
-        .join(",");
-    }
-
-    const filesContainer = document.createElement("div");
-    filesContainer.className = "files-list space-y-2";
-
-    filesWrapper.appendChild(filesPicker);
-    filesWrapper.appendChild(filesContainer);
-
-    const initialFiles = Array.isArray(ctx.prefill[element.key])
-      ? [...ctx.prefill[element.key]]
-      : [];
-
-    // Add initial files to resource index
-    addPrefillFilesToIndex(initialFiles);
-
-    const updateFilesDisplay = () => {
-      renderResourcePills(filesContainer, initialFiles, (index) => {
-        initialFiles.splice(index, 1);
-        updateFilesDisplay();
-      });
-
-      // Show count and min/max info
-      const countInfo = document.createElement("div");
-      countInfo.className = "text-xs text-gray-500 mt-2";
-      const countText = `${initialFiles.length} file${initialFiles.length !== 1 ? "s" : ""}`;
-      const minMaxText =
-        minFiles > 0 || maxFiles < Infinity
-          ? ` (${minFiles}-${maxFiles} allowed)`
-          : "";
-      countInfo.textContent = countText + minMaxText;
-
-      // Remove previous count info
-      const existingCount = filesWrapper.querySelector(".file-count-info");
-      if (existingCount) existingCount.remove();
-
-      countInfo.className += " file-count-info";
-      filesWrapper.appendChild(countInfo);
-    };
-
-    // Set up drag and drop
-    setupFilesDropHandler(filesContainer, initialFiles, updateFilesDisplay);
-
-    // Set up file picker
-    setupFilesPickerHandler(filesPicker, initialFiles, updateFilesDisplay);
-
-    // Initial display
-    updateFilesDisplay();
-
-    wrapper.appendChild(filesWrapper);
-  }
-}
-
-function addPrefillFilesToIndex(initialFiles) {
-  if (initialFiles.length > 0) {
-    initialFiles.forEach((resourceId) => {
-      if (!state.resourceIndex.has(resourceId)) {
-        // Extract filename from URL/path
-        const filename = resourceId.split("/").pop() || "file";
-        // Determine file type from extension (excluding PSD from image types)
-        const extension = filename.split(".").pop()?.toLowerCase();
-        const fileType =
-          extension && ["jpg", "jpeg", "png", "gif", "webp"].includes(extension)
-            ? `image/${extension === "jpg" ? "jpeg" : extension}`
-            : "application/octet-stream";
-
-        state.resourceIndex.set(resourceId, {
-          name: filename,
-          type: fileType,
-          size: 0,
-          file: null, // No local file for prefill data
-        });
-      }
-    });
-  }
-}
-
-function setupFilesDropHandler(filesContainer, initialFiles, updateCallback) {
-  setupDragAndDrop(filesContainer, async (files) => {
-    const arr = Array.from(files);
-    for (const file of arr) {
-      const rid = await uploadSingleFile(file);
-      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);
-    }
-    updateCallback();
-  });
-}
-
-function setupFilesPickerHandler(filesPicker, initialFiles, updateCallback) {
-  filesPicker.onchange = async () => {
-    for (const file of Array.from(filesPicker.files)) {
-      const rid = await uploadSingleFile(file);
-      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);
-    }
-    updateCallback();
-    // Clear the file input
-    filesPicker.value = "";
-  };
-}
-
-async function uploadSingleFile(file) {
-  // If uploadHandler is configured, use it to upload the file
-  if (state.config.uploadFile) {
-    try {
-      const rid = await state.config.uploadFile(file);
-      if (typeof rid !== "string") {
-        throw new Error("Upload handler must return a string resource ID");
-      }
-      return rid;
-    } catch (error) {
-      throw new Error(`File upload failed: ${error.message}`);
-    }
-  } else {
-    throw new Error(
-      "No upload handler configured. Set uploadHandler via FormBuilder.setUploadHandler()",
-    );
-  }
-}
-
-function renderGroupElement(element, ctx, wrapper, _pathKey) {
-  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);
-  if (!state.config.readonly) {
-    header.appendChild(right);
-  }
-
-  if (element.repeat && isPlainObject(element.repeat)) {
-    renderRepeatableGroup(element, ctx, itemsWrap, left, groupWrap);
-  } else {
-    renderSingleGroup(element, ctx, itemsWrap, left, groupWrap);
-  }
-
-  wrapper.appendChild(groupWrap);
-}
-
-function renderRepeatableGroup(element, ctx, itemsWrap, left, groupWrap) {
-  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 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 itemIndex = countItems();
-    const fullPath = pathJoin(ctx.path, `${element.key}[${itemIndex}]`);
-    // Add data-group-item attribute for validation scoping - use full path
-    item.setAttribute("data-group-item", fullPath);
-    const subCtx = {
-      path: fullPath,
-      prefill: prefillObj || {},
-    };
-    element.elements.forEach((child) => {
-      // Skip rendering hidden child elements
-      if (!child.hidden) {
-        item.appendChild(renderElement(child, subCtx));
-      }
-    });
-
-    // Only add remove button in edit mode
-    if (!state.config.readonly) {
-      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 = t("removeElement");
-      rem.addEventListener("click", () => {
-        if (countItems() <= (element.repeat.min ?? 0)) return;
-        itemsWrap.removeChild(item);
-        refreshControls();
-      });
-      item.appendChild(rem);
-    }
-    itemsWrap.appendChild(item);
-    if (!state.config.readonly) {
-      refreshControls();
-    }
-  };
-
-  groupWrap.appendChild(itemsWrap);
-
-  // Only add button in edit mode
-  let addBtn;
-  if (!state.config.readonly) {
-    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>${t("addElement")}`;
-    groupWrap.appendChild(addBtn);
-  }
-
-  const refreshControls = () => {
-    if (state.config.readonly) return;
-    const n = countItems();
-    if (addBtn) 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);
-  }
-
-  if (!state.config.readonly) {
-    addBtn.addEventListener("click", () => addItem(null));
-  } else {
-    // In readonly mode, just show the label without count controls
-    left.innerHTML = `<span>${element.label || element.key}</span>`;
-  }
-}
-
-function renderSingleGroup(element, ctx, itemsWrap, left, groupWrap) {
-  // Single object group
-  const subCtx = {
-    path: pathJoin(ctx.path, element.key),
-    prefill: ctx.prefill?.[element.key] || {},
-  };
-  element.elements.forEach((child) => {
-    // Skip rendering hidden child elements
-    if (!child.hidden) {
-      itemsWrap.appendChild(renderElement(child, subCtx));
-    }
-  });
-  groupWrap.appendChild(itemsWrap);
-  left.innerHTML = `<span>${element.label || element.key}</span>`;
-}
-
-function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
-  // Same as renderSingleGroup but with updated naming
-  const containerWrap = document.createElement("div");
-  containerWrap.className = "border border-gray-200 rounded-lg p-4 bg-gray-50";
-  containerWrap.setAttribute("data-container", pathKey);
-
-  const header = document.createElement("div");
-  header.className = "flex justify-between items-center mb-4";
-
-  const left = document.createElement("div");
-  left.className = "flex-1";
-
-  const itemsWrap = document.createElement("div");
-  itemsWrap.className = "space-y-4";
-
-  containerWrap.appendChild(header);
-  header.appendChild(left);
-
-  // Single object container
-  const subCtx = {
-    path: pathJoin(ctx.path, element.key),
-    prefill: ctx.prefill?.[element.key] || {},
-  };
-  element.elements.forEach((child) => {
-    // Skip rendering hidden child elements
-    if (!child.hidden) {
-      itemsWrap.appendChild(renderElement(child, subCtx));
-    }
-  });
-  containerWrap.appendChild(itemsWrap);
-  left.innerHTML = `<span>${element.label || element.key}</span>`;
-
-  wrapper.appendChild(containerWrap);
-}
-
-function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
-  // Same as renderRepeatableGroup but with minCount/maxCount from element properties
-  const containerWrap = document.createElement("div");
-  containerWrap.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";
-
-  containerWrap.appendChild(header);
-  header.appendChild(left);
-  if (!state.config.readonly) {
-    header.appendChild(right);
-  }
-
-  const min = element.minCount ?? 0;
-  const max = element.maxCount ?? Infinity;
-  const pre = Array.isArray(ctx.prefill?.[element.key])
-    ? ctx.prefill[element.key]
-    : null;
-
-  const countItems = () =>
-    itemsWrap.querySelectorAll(":scope > .containerItem").length;
-
-  const createAddButton = () => {
-    const add = document.createElement("button");
-    add.type = "button";
-    add.className =
-      "px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors";
-    add.textContent = t("addElement");
-    add.onclick = () => {
-      if (countItems() < max) {
-        const idx = countItems();
-        const subCtx = {
-          path: pathJoin(ctx.path, `${element.key}[${idx}]`),
-          prefill: {},
-        };
-        const item = document.createElement("div");
-        item.className =
-          "containerItem border border-gray-300 rounded-lg p-4 bg-white";
-        item.setAttribute("data-container-item", `${element.key}[${idx}]`);
-
-        element.elements.forEach((child) => {
-          // Skip rendering hidden child elements
-          if (!child.hidden) {
-            item.appendChild(renderElement(child, subCtx));
-          }
-        });
-
-        // Only add remove button in edit mode
-        if (!state.config.readonly) {
-          const rem = document.createElement("button");
-          rem.type = "button";
-          rem.className =
-            "absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors";
-          rem.textContent = "×";
-          rem.onclick = () => {
-            item.remove();
-            updateAddButton();
-          };
-          item.style.position = "relative";
-          item.appendChild(rem);
-        }
-
-        itemsWrap.appendChild(item);
-        updateAddButton();
-      }
-    };
-    return add;
-  };
-
-  const updateAddButton = () => {
-    const currentCount = countItems();
-    const addBtn = right.querySelector("button");
-    if (addBtn) {
-      addBtn.disabled = currentCount >= max;
-      addBtn.style.opacity = currentCount >= max ? "0.5" : "1";
-    }
-    left.innerHTML = `<span>${element.label || element.key}</span> <span class="text-sm text-gray-500">(${currentCount}/${max === Infinity ? "∞" : max})</span>`;
-  };
-
-  if (!state.config.readonly) {
-    right.appendChild(createAddButton());
-  }
-
-  // Pre-fill initial items
-  if (pre && Array.isArray(pre)) {
-    pre.forEach((prefillObj, idx) => {
-      const subCtx = {
-        path: pathJoin(ctx.path, `${element.key}[${idx}]`),
-        prefill: prefillObj || {},
-      };
-      const item = document.createElement("div");
-      item.className =
-        "containerItem border border-gray-300 rounded-lg p-4 bg-white";
-      item.setAttribute("data-container-item", `${element.key}[${idx}]`);
-
-      element.elements.forEach((child) => {
-        // Skip rendering hidden child elements
-        if (!child.hidden) {
-          item.appendChild(renderElement(child, subCtx));
-        }
-      });
-
-      // Only add remove button in edit mode
-      if (!state.config.readonly) {
-        const rem = document.createElement("button");
-        rem.type = "button";
-        rem.className =
-          "absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors";
-        rem.textContent = "×";
-        rem.onclick = () => {
-          item.remove();
-          updateAddButton();
-        };
-        item.style.position = "relative";
-        item.appendChild(rem);
-      }
-
-      itemsWrap.appendChild(item);
-    });
-  }
-
-  // Ensure minimum items
-  if (!state.config.readonly) {
-    while (countItems() < min) {
-      const idx = countItems();
-      const subCtx = {
-        path: pathJoin(ctx.path, `${element.key}[${idx}]`),
-        prefill: {},
-      };
-      const item = document.createElement("div");
-      item.className =
-        "containerItem border border-gray-300 rounded-lg p-4 bg-white";
-      item.setAttribute("data-container-item", `${element.key}[${idx}]`);
-
-      element.elements.forEach((child) => {
-        // Skip rendering hidden child elements
-        if (!child.hidden) {
-          item.appendChild(renderElement(child, subCtx));
-        }
-      });
-
-      // Remove button - but disabled if we're at minimum
-      const rem = document.createElement("button");
-      rem.type = "button";
-      rem.className =
-        "absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors";
-      rem.textContent = "×";
-      rem.onclick = () => {
-        if (countItems() > min) {
-          item.remove();
-          updateAddButton();
-        }
-      };
-      item.style.position = "relative";
-      item.appendChild(rem);
-
-      itemsWrap.appendChild(item);
-    }
-  }
-
-  containerWrap.appendChild(itemsWrap);
-  updateAddButton();
-
-  wrapper.appendChild(containerWrap);
-}
-
-// Common file preview rendering function for readonly mode
-function renderFilePreviewReadonly(resourceId, fileName) {
-  const meta = state.resourceIndex.get(resourceId);
-  const actualFileName =
-    fileName || meta?.name || resourceId.split("/").pop() || "file";
-
-  // Determine if this looks like a PSD file (should be treated as download, not preview)
-  const isPSD = actualFileName.toLowerCase().match(/\.psd$/);
-
-  // Individual file result container
-  const fileResult = document.createElement("div");
-  fileResult.className = isPSD ? "space-y-2" : "space-y-3";
-
-  // Preview container - compact for PSD files, large for others
-  const previewContainer = document.createElement("div");
-  if (isPSD) {
-    // Compact container for PSD files
-    previewContainer.className =
-      "bg-gray-100 rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity flex items-center p-3 max-w-sm";
-  } else {
-    // Large container for images/videos
-    previewContainer.className =
-      "bg-gray-100 rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity";
-  }
-
-  // Determine if this looks like an image file (excluding PSD files)
-  const isImage =
-    !isPSD && (
-      meta?.type?.startsWith("image/") ||
-      actualFileName.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp)$/)
-    );
-
-  // Determine if this looks like a video file
-  const isVideo =
-    meta?.type?.startsWith("video/") ||
-    actualFileName.toLowerCase().match(/\.(mp4|webm|avi|mov)$/);
-
-  if (isImage) {
-    // Image preview - try getThumbnail first
-    if (state.config.getThumbnail) {
-      try {
-        const thumbnailUrl = state.config.getThumbnail(resourceId);
-        if (thumbnailUrl) {
-          previewContainer.innerHTML = `<img src="${thumbnailUrl}" alt="${actualFileName}" class="w-full h-auto">`;
-        } else {
-          // Fallback to icon if getThumbnail returns null/undefined
-          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>`;
-        }
-      } catch (error) {
-        console.warn("getThumbnail failed for", resourceId, error);
-        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 if (isVideo) {
-    // Video preview - try getThumbnail for video URL
-    if (state.config.getThumbnail) {
-      try {
-        const videoUrl = state.config.getThumbnail(resourceId);
-        if (videoUrl) {
-          previewContainer.innerHTML = `
-                        <div class="relative group">
-                            <video class="w-full h-auto" controls preload="auto" muted>
-                                <source src="${videoUrl}" 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>`;
-        }
-      } catch (error) {
-        console.warn("getThumbnail failed for video", resourceId, error);
-        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 - special handling for PSD files
-    const fileIcon = isPSD ? "🎨" : "📁";
-    const fileDescription = isPSD ? "PSD File" : "Document";
-    
-    if (isPSD) {
-      // Compact horizontal layout for PSD files
-      previewContainer.innerHTML = `
+          `:s.innerHTML=`<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">\u{1F3A5}</div><div class="text-sm">${l}</div></div></div>`}catch(m){console.warn("getThumbnail failed for video",e,m),s.innerHTML=`<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">\u{1F3A5}</div><div class="text-sm">${l}</div></div></div>`}else s.innerHTML=`<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">\u{1F3A5}</div><div class="text-sm">${l}</div></div></div>`;else{const m=a?"\u{1F3A8}":"\u{1F4C1}",v=a?"PSD File":"Document";a?s.innerHTML=`
         <div class="flex items-center space-x-3">
-          <div class="text-3xl text-gray-400">${fileIcon}</div>
+          <div class="text-3xl text-gray-400">${m}</div>
           <div class="flex-1 min-w-0">
-            <div class="text-sm font-medium text-gray-900 truncate">${actualFileName}</div>
-            <div class="text-xs text-gray-500">${fileDescription}</div>
+            <div class="text-sm font-medium text-gray-900 truncate">${l}</div>
+            <div class="text-xs text-gray-500">${v}</div>
           </div>
         </div>
-      `;
-    } else {
-      // Large centered layout for other documents
-      previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">${fileIcon}</div><div class="text-sm">${actualFileName}</div><div class="text-xs text-gray-500 mt-1">${fileDescription}</div></div></div>`;
-    }
-  }
-
-  // File name (only show for non-PSD files since PSD files show name inline)
-  const fileNameElement = document.createElement("p");
-  fileNameElement.className = isPSD ? "hidden" : "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;
-}
-
-// 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)
-
-// 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}`);
-      });
-  } else {
-    console.warn("No download URL available for resource:", resourceId);
-  }
-}
-
-// 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}`);
-  }
-}
-
-// Public API
-function setFormRoot(element) {
-  state.formRoot = element;
-}
-
-function configure(config) {
-  Object.assign(state.config, config);
-}
-
-function setUploadHandler(uploadFn) {
-  state.config.uploadFile = uploadFn;
-}
-
-function setDownloadHandler(downloadFn) {
-  state.config.downloadFile = downloadFn;
-}
-
-function setThumbnailHandler(thumbnailFn) {
-  state.config.getThumbnail = thumbnailFn;
-}
-
-function setActionHandler(actionFn) {
-  state.config.actionHandler = actionFn;
-}
-
-function setMode(mode) {
-  state.config.readonly = mode === "readonly";
-}
-
-function setLocale(locale) {
-  if (state.config.translations[locale]) {
-    state.config.locale = locale;
-  }
-}
-
-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 result;
-}
-
-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);
-  }
-}
-
-// Create the API object
-const formBuilderAPI = {
-  setFormRoot,
-  renderForm,
-  configure,
-  setUploadHandler,
-  setDownloadHandler,
-  setThumbnailHandler,
-  setActionHandler,
-  setMode,
-  setLocale,
-  getFormData,
-  submitForm,
-  saveDraft,
-  clearForm,
-  validateSchema,
-  pretty,
-  state,
-};
-
-// Browser global export (existing behavior)
-if (typeof window !== "undefined") {
-  window.FormBuilder = formBuilderAPI;
-}
-
-// ES6 Module exports for modern bundlers
-export {
-  setFormRoot,
-  renderForm,
-  configure,
-  setUploadHandler,
-  setDownloadHandler,
-  setThumbnailHandler,
-  setActionHandler,
-  setMode,
-  setLocale,
-  getFormData,
-  submitForm,
-  saveDraft,
-  clearForm,
-  validateSchema,
-  pretty,
-  state,
-};
-
-// Default export
-export default formBuilderAPI;
+      `:s.innerHTML=`<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">${m}</div><div class="text-sm">${l}</div><div class="text-xs text-gray-500 mt-1">${v}</div></div></div>`}const h=document.createElement("p");h.className=a?"hidden":"text-sm font-medium text-gray-900 text-center",h.textContent=l;const p=document.createElement("button");return p.className="w-full px-3 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors",p.textContent=$("downloadButton",t),p.onclick=m=>{m.preventDefault(),m.stopPropagation(),t.config.downloadFile?t.config.downloadFile(e,l):Se(e,l,t)},i.appendChild(s),i.appendChild(h),i.appendChild(p),i}function P(e,t,n,o){N(e);const c=!e.classList.contains("grid");if((!t||t.length===0)&&c){const a=document.createElement("div");a.className="grid grid-cols-4 gap-3 mb-3";for(let u=0;u<4;u++){const d=document.createElement("div");d.className="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";const h=document.createElementNS("http://www.w3.org/2000/svg","svg");h.setAttribute("class","w-12 h-12 text-gray-400"),h.setAttribute("fill","currentColor"),h.setAttribute("viewBox","0 0 24 24");const p=document.createElementNS("http://www.w3.org/2000/svg","path");p.setAttribute("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"),h.appendChild(p),d.appendChild(h),d.onclick=()=>{let m=e.parentElement;for(;m&&!m.classList.contains("space-y-2");)m=m.parentElement;!m&&e.classList.contains("space-y-2")&&(m=e);const v=m==null?void 0:m.querySelector('input[type="file"]');v&&v.click()},a.appendChild(d)}const i=document.createElement("div");i.className="text-center text-xs text-gray-600";const s=document.createElement("span");s.className="underline cursor-pointer",s.textContent=$("uploadText",n),s.onclick=u=>{u.stopPropagation();let d=e.parentElement;for(;d&&!d.classList.contains("space-y-2");)d=d.parentElement;!d&&e.classList.contains("space-y-2")&&(d=e);const h=d==null?void 0:d.querySelector('input[type="file"]');h&&h.click()},i.appendChild(s),i.appendChild(document.createTextNode(` ${$("dragDropText",n)}`)),e.appendChild(a),e.appendChild(i);return}e.className="files-list grid grid-cols-4 gap-3 mt-2";const r=t?t.length:0,l=(Math.floor(r/4)+1)*4;for(let a=0;a<l;a++){const i=document.createElement("div");if(t&&a<t.length){const s=t[a],u=n.resourceIndex.get(s);if(i.className="resource-pill aspect-square bg-gray-100 rounded-lg overflow-hidden relative group border border-gray-300",i.dataset.resourceId=s,Fe(i,s,u,n).catch(d=>{console.error("Failed to render thumbnail:",d),i.innerHTML=`<div class="flex flex-col items-center justify-center h-full text-gray-400">
+          <div class="text-2xl mb-1">\u{1F4C1}</div>
+          <div class="text-xs">Preview error</div>
+        </div>`}),o){const d=document.createElement("div");d.className="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center";const h=document.createElement("button");h.className="bg-red-600 text-white px-2 py-1 rounded text-xs",h.textContent=$("removeElement",n),h.onclick=p=>{p.stopPropagation(),o(s)},d.appendChild(h),i.appendChild(d)}}else i.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",i.innerHTML='<svg class="w-12 h-12 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>',i.onclick=()=>{let s=e.parentElement;for(;s&&!s.classList.contains("space-y-2");)s=s.parentElement;!s&&e.classList.contains("space-y-2")&&(s=e);const u=s==null?void 0:s.querySelector('input[type="file"]');u&&u.click()};e.appendChild(i)}}async function Fe(e,t,n,o){var c,r;if(n&&(c=n.type)!=null&&c.startsWith("image/"))if(n.file&&n.file instanceof File){const l=document.createElement("img");l.className="w-full h-full object-contain",l.alt=n.name;const a=new FileReader;a.onload=i=>{var s;l.src=((s=i.target)==null?void 0:s.result)||""},a.readAsDataURL(n.file),e.appendChild(l)}else if(o.config.getThumbnail){const l=await o.config.getThumbnail(t);if(l){const a=document.createElement("img");a.className="w-full h-full object-contain",a.alt=n.name,a.src=l,e.appendChild(a)}else e.innerHTML=`<div class="flex flex-col items-center justify-center h-full text-gray-400">
+          <svg class="w-12 h-12" 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>`}else e.innerHTML=`<div class="flex flex-col items-center justify-center h-full text-gray-400">
+        <svg class="w-12 h-12" 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>`;else if(n&&(r=n.type)!=null&&r.startsWith("video/"))if(n.file&&n.file instanceof File){const l=URL.createObjectURL(n.file);e.innerHTML=`
+        <div class="relative group h-full w-full">
+          <video class="w-full h-full object-contain" preload="metadata" muted>
+            <source src="${l}" type="${n.type}">
+          </video>
+          <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
+            <div class="bg-white bg-opacity-90 rounded-full p-1">
+              <svg class="w-4 h-4 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M8 5v14l11-7z"/>
+              </svg>
+            </div>
+          </div>
+        </div>
+      `}else if(o.config.getThumbnail){const l=await o.config.getThumbnail(t);l?e.innerHTML=`
+          <div class="relative group h-full w-full">
+            <video class="w-full h-full object-contain" preload="metadata" muted>
+              <source src="${l}" type="${n.type}">
+            </video>
+            <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
+              <div class="bg-white bg-opacity-90 rounded-full p-1">
+                <svg class="w-4 h-4 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M8 5v14l11-7z"/>
+                </svg>
+              </div>
+            </div>
+          </div>
+        `:e.innerHTML=`<div class="flex flex-col items-center justify-center h-full text-gray-400">
+          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M8 5v14l11-7z"/>
+          </svg>
+          <div class="text-xs mt-1">${(n==null?void 0:n.name)||"Video"}</div>
+        </div>`}else e.innerHTML=`<div class="flex flex-col items-center justify-center h-full text-gray-400">
+        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M8 5v14l11-7z"/>
+        </svg>
+        <div class="text-xs mt-1">${(n==null?void 0:n.name)||"Video"}</div>
+      </div>`;else e.innerHTML=`<div class="flex flex-col items-center justify-center h-full text-gray-400">
+      <div class="text-2xl mb-1">\u{1F4C1}</div>
+      <div class="text-xs">${(n==null?void 0:n.name)||"File"}</div>
+    </div>`}function j(e,t){e.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">${$("clickDragText",t)}</div>
+    </div>
+  `}async function V(e,t,n,o,c=null,r){var l,a;let i;if(o.config.uploadFile)try{if(i=await o.config.uploadFile(e),typeof i!="string")throw new Error("Upload handler must return a string resource ID")}catch(u){throw new Error(`File upload failed: ${u.message}`)}else throw new Error("No upload handler configured. Set uploadHandler via FormBuilder.setUploadHandler()");o.resourceIndex.set(i,{name:e.name,type:e.type,size:e.size,uploadedAt:new Date,file:e});let s=(l=t.parentElement)==null?void 0:l.querySelector('input[type="hidden"]');s||(s=document.createElement("input"),s.type="hidden",s.name=n,(a=t.parentElement)==null||a.appendChild(s)),s.value=i,U(t,i,o,{fileName:e.name,isReadonly:!1,deps:c}).catch(console.error),r&&!o.config.readonly&&r.triggerOnChange(n,i)}function z(e,t){e.addEventListener("dragover",n=>{n.preventDefault(),e.classList.add("border-blue-500","bg-blue-50")}),e.addEventListener("dragleave",n=>{n.preventDefault(),e.classList.remove("border-blue-500","bg-blue-50")}),e.addEventListener("drop",n=>{var o;n.preventDefault(),e.classList.remove("border-blue-500","bg-blue-50"),(o=n.dataTransfer)!=null&&o.files&&t(n.dataTransfer.files)})}function Le(e,t,n){const o=e.querySelector(".delete-overlay");o&&o.remove();const c=document.createElement("div");c.className="delete-overlay absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center";const r=document.createElement("button");r.className="bg-red-600 text-white px-3 py-1 rounded text-sm hover:bg-red-700 transition-colors",r.textContent=$("removeElement",t),r.onclick=l=>{l.stopPropagation(),n()},c.appendChild(r),e.appendChild(c)}async function W(e,t){if(t.config.uploadFile)try{const n=await t.config.uploadFile(e);if(typeof n!="string")throw new Error("Upload handler must return a string resource ID");return n}catch(n){throw new Error(`File upload failed: ${n.message}`)}else throw new Error("No upload handler configured. Set uploadHandler via FormBuilder.setUploadHandler()")}async function Se(e,t,n){let o=null;if(n.config.getDownloadUrl?o=n.config.getDownloadUrl(e):n.config.getThumbnail&&(o=await n.config.getThumbnail(e)),o){const c=o.startsWith("http")?o:new URL(o,window.location.href).href;fetch(c).then(r=>{if(!r.ok)throw new Error(`HTTP error! status: ${r.status}`);return r.blob()}).then(r=>{Ne(r,t)}).catch(r=>{throw new Error(`File download failed: ${r.message}`)})}else console.warn("No download URL available for resource:",e)}function Ne(e,t){try{const n=URL.createObjectURL(e),o=document.createElement("a");o.href=n,o.download=t,o.style.display="none",document.body.appendChild(o),o.click(),document.body.removeChild(o),setTimeout(()=>{URL.revokeObjectURL(n)},100)}catch(n){throw new Error(`Blob download failed: ${n.message}`)}}function _(e,t){e.length>0&&e.forEach(n=>{var o;if(!t.resourceIndex.has(n)){const c=n.split("/").pop()||"file",r=(o=c.split(".").pop())==null?void 0:o.toLowerCase(),l=r&&["jpg","jpeg","png","gif","webp"].includes(r)?`image/${r==="jpg"?"jpeg":r}`:"application/octet-stream";t.resourceIndex.set(n,{name:c,type:l,size:0,uploadedAt:new Date,file:void 0})}})}function Ae(e,t,n,o,c,r){var l;if(!c.resourceIndex.has(e)){const i=e.split("/").pop()||"file",s=(l=i.split(".").pop())==null?void 0:l.toLowerCase();let u="application/octet-stream";s&&(["jpg","jpeg","png","gif","webp"].includes(s)?u=`image/${s==="jpg"?"jpeg":s}`:["mp4","webm","mov","avi"].includes(s)&&(u=`video/${s==="mov"?"quicktime":s}`)),c.resourceIndex.set(e,{name:i,type:u,size:0,uploadedAt:new Date,file:void 0})}U(t,e,c,{fileName:e,isReadonly:!1,deps:r}).catch(console.error);const a=document.createElement("input");a.type="hidden",a.name=n,a.value=e,o.appendChild(a)}function G(e,t,n,o,c,r){z(e,async l=>{const a=Array.from(l);for(const i of a){const s=await W(i,n);n.resourceIndex.set(s,{name:i.name,type:i.type,size:i.size,uploadedAt:new Date,file:void 0}),t.push(s)}o(),r&&c&&!n.config.readonly&&r.triggerOnChange(c,t)})}function Y(e,t,n,o,c,r){e.onchange=async()=>{if(e.files)for(const l of Array.from(e.files)){const a=await W(l,n);n.resourceIndex.set(a,{name:l.name,type:l.type,size:l.size,uploadedAt:new Date,file:void 0}),t.push(a)}o(),e.value="",r&&c&&!n.config.readonly&&r.triggerOnChange(c,t)}}function Te(e,t,n,o){var c;const r=t.state;if(r.config.readonly){const l=t.prefill[e.key];if(l)B(l,r).then(a=>{n.appendChild(a)}).catch(a=>{console.error("Failed to render file preview:",a);const i=document.createElement("div");i.className="aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500",i.innerHTML='<div class="text-center">Preview unavailable</div>',n.appendChild(i)});else{const a=document.createElement("div");a.className="aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500",a.innerHTML=`<div class="text-center">${$("noFileSelected",r)}</div>`,n.appendChild(a)}}else{const l=document.createElement("div");l.className="space-y-2";const a=document.createElement("input");a.type="file",a.name=o,a.style.display="none",e.accept&&(a.accept=typeof e.accept=="string"?e.accept:((c=e.accept.extensions)==null?void 0:c.map(v=>`.${v}`).join(","))||"");const i=document.createElement("div");i.className="file-preview-container w-full aspect-square max-w-xs bg-gray-100 rounded-lg overflow-hidden relative group cursor-pointer";const s=t.prefill[e.key],u=()=>a.click(),d=v=>{if(v.length>0){const b={picker:a,fileUploadHandler:u,dragHandler:d};V(v[0],i,o,r,b,t.instance)}};s?Ae(s,i,o,l,r,{picker:a,fileUploadHandler:u,dragHandler:d}):j(i,r),i.onclick=u,z(i,d),a.onchange=()=>{if(a.files&&a.files.length>0){const v={picker:a,fileUploadHandler:u,dragHandler:d};V(a.files[0],i,o,r,v,t.instance)}},l.appendChild(i),l.appendChild(a);const h=document.createElement("p");h.className="text-xs text-gray-600 mt-2 text-center",h.innerHTML=`<span class="underline cursor-pointer">${$("uploadText",r)}</span> ${$("dragDropTextSingle",r)}`;const p=h.querySelector("span");p&&(p.onclick=()=>a.click()),l.appendChild(h);const m=document.createElement("p");m.className="text-xs text-gray-500 mt-1 text-center",m.textContent=k(e),l.appendChild(m),n.appendChild(l)}}function qe(e,t,n,o){var c;const r=t.state;if(r.config.readonly){const l=document.createElement("div");l.className="space-y-4";const a=t.prefill[e.key]||[];a.length>0?a.forEach(i=>{B(i,r).then(s=>{l.appendChild(s)}).catch(s=>{console.error("Failed to render file preview:",s)})}):l.innerHTML=`<div class="aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500"><div class="text-center">${$("noFilesSelected",r)}</div></div>`,n.appendChild(l)}else{let l=function(){P(u,d,r,p=>{const m=d.indexOf(p);m>-1&&d.splice(m,1),l()})};const a=document.createElement("div");a.className="space-y-2";const i=document.createElement("input");i.type="file",i.name=o,i.multiple=!0,i.style.display="none",e.accept&&(i.accept=typeof e.accept=="string"?e.accept:((c=e.accept.extensions)==null?void 0:c.map(p=>`.${p}`).join(","))||"");const s=document.createElement("div");s.className="border-2 border-dashed border-gray-300 rounded-lg p-3 hover:border-gray-400 transition-colors";const u=document.createElement("div");u.className="files-list";const d=t.prefill[e.key]||[];_(d,r),l(),G(s,d,r,l,o,t.instance),Y(i,d,r,l,o,t.instance),s.appendChild(u),a.appendChild(s),a.appendChild(i);const h=document.createElement("p");h.className="text-xs text-gray-500 mt-1 text-center",h.textContent=k(e),a.appendChild(h),n.appendChild(a)}}function He(e,t,n,o){var c,r,l;const a=t.state,i=(c=e.minCount)!=null?c:0,s=(r=e.maxCount)!=null?r:1/0;if(a.config.readonly){const u=document.createElement("div");u.className="space-y-4";const d=t.prefill[e.key]||[];d.length>0?d.forEach(h=>{B(h,a).then(p=>{u.appendChild(p)}).catch(p=>{console.error("Failed to render file preview:",p)})}):u.innerHTML=`<div class="aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500"><div class="text-center">${$("noFilesSelected",a)}</div></div>`,n.appendChild(u)}else{const u=document.createElement("div");u.className="space-y-2";const d=document.createElement("input");d.type="file",d.name=o,d.multiple=!0,d.style.display="none",e.accept&&(d.accept=typeof e.accept=="string"?e.accept:((l=e.accept.extensions)==null?void 0:l.map(v=>`.${v}`).join(","))||"");const h=document.createElement("div");h.className="files-list space-y-2",u.appendChild(d),u.appendChild(h);const p=Array.isArray(t.prefill[e.key])?[...t.prefill[e.key]]:[];_(p,a);const m=()=>{P(h,p,a,y=>{p.splice(p.indexOf(y),1),m()});const v=document.createElement("div");v.className="text-xs text-gray-500 mt-2 file-count-info";const b=`${p.length} file${p.length!==1?"s":""}`,x=i>0||s<1/0?` (${i}-${s} allowed)`:"";v.textContent=b+x;const g=u.querySelector(".file-count-info");g&&g.remove(),u.appendChild(v)};G(h,p,a,m,o,t.instance),Y(d,p,a,m,o,t.instance),m(),n.appendChild(u)}}function J(e,t,n){var o;const c=[],{scopeRoot:r,skipValidation:l,path:a}=n,i=(s,u,d)=>{var h,p;if(l)return;const m="minCount"in d&&(h=d.minCount)!=null?h:0,v="maxCount"in d&&(p=d.maxCount)!=null?p:1/0;d.required&&u.length===0&&c.push(`${s}: required`),u.length<m&&c.push(`${s}: minimum ${m} files required`),u.length>v&&c.push(`${s}: maximum ${v} files allowed`)};if("multiple"in e&&e.multiple){const s=L(a,t),u=r.querySelector(`input[type="file"][name="${s}"]`),d=u==null?void 0:u.closest(".space-y-2"),h=(d==null?void 0:d.querySelector(".files-list"))||null,p=[];return h&&h.querySelectorAll(".resource-pill").forEach(m=>{const v=m.dataset.resourceId;v&&p.push(v)}),i(t,p,e),{value:p,errors:c}}else{const s=r.querySelector(`input[name$="${t}"][type="hidden"]`),u=(o=s==null?void 0:s.value)!=null?o:"";return!l&&e.required&&u===""?(c.push(`${t}: required`),{value:null,errors:c}):{value:u||null,errors:c}}}function X(e,t,n,o){var c;const{scopeRoot:r,state:l}=o;if("multiple"in e&&e.multiple){if(!Array.isArray(n)){console.warn(`updateFileField: Expected array for multiple file field "${t}", got ${typeof n}`);return}n.forEach(a=>{var i;if(a&&typeof a=="string"&&!l.resourceIndex.has(a)){const s=a.split("/").pop()||"file",u=(i=s.split(".").pop())==null?void 0:i.toLowerCase();let d="application/octet-stream";u&&(["jpg","jpeg","png","gif","webp"].includes(u)?d=`image/${u==="jpg"?"jpeg":u}`:["mp4","webm","mov","avi"].includes(u)&&(d=`video/${u==="mov"?"quicktime":u}`)),l.resourceIndex.set(a,{name:s,type:d,size:0,uploadedAt:new Date,file:void 0})}}),console.info(`updateFileField: Multiple file field "${t}" updated. Preview update requires re-render.`)}else{const a=r.querySelector(`input[name="${t}"][type="hidden"]`);if(!a){console.warn(`updateFileField: Hidden input not found for file field "${t}"`);return}if(a.value=n!=null?String(n):"",n&&typeof n=="string"){if(!l.resourceIndex.has(n)){const i=n.split("/").pop()||"file",s=(c=i.split(".").pop())==null?void 0:c.toLowerCase();let u="application/octet-stream";s&&(["jpg","jpeg","png","gif","webp"].includes(s)?u=`image/${s==="jpg"?"jpeg":s}`:["mp4","webm","mov","avi"].includes(s)&&(u=`video/${s==="mov"?"quicktime":s}`)),l.resourceIndex.set(n,{name:i,type:u,size:0,uploadedAt:new Date,file:void 0})}console.info(`updateFileField: File field "${t}" updated. Preview update requires re-render.`)}}}let R=null;function Me(e){R=e}function q(e,t){if(!R)throw new Error("renderElement not initialized. Import from components/index.ts");return R(e,t)}function Z(e,t,n,o){var c;const r=document.createElement("div");r.className="border border-gray-200 rounded-lg p-4 bg-gray-50",r.setAttribute("data-container",o);const l=document.createElement("div");l.className="flex justify-between items-center mb-4";const a=document.createElement("div");a.className="flex-1";const i=document.createElement("div");i.className="space-y-4",r.appendChild(l),l.appendChild(a);const s={path:L(t.path,e.key),prefill:((c=t.prefill)==null?void 0:c[e.key])||{},state:t.state};e.elements.forEach(u=>{u.hidden||i.appendChild(q(u,s))}),r.appendChild(i),a.innerHTML=`<span>${e.label||e.key}</span>`,n.appendChild(r)}function K(e,t,n,o){var c,r,l;const a=t.state,i=document.createElement("div");i.className="border border-gray-200 rounded-lg p-4 bg-gray-50";const s=document.createElement("div");s.className="flex justify-between items-center mb-4";const u=document.createElement("div");u.className="flex-1";const d=document.createElement("div");d.className="flex gap-2";const h=document.createElement("div");h.className="space-y-4",i.appendChild(s),s.appendChild(u),a.config.readonly||s.appendChild(d);const p=(c=e.minCount)!=null?c:0,m=(r=e.maxCount)!=null?r:1/0,v=Array.isArray((l=t.prefill)==null?void 0:l[e.key])?t.prefill[e.key]:null,b=()=>h.querySelectorAll(":scope > .containerItem").length,x=()=>{const y=document.createElement("button");return y.type="button",y.className="px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors",y.textContent=$("addElement",a),y.onclick=()=>{if(b()<m){const f=b(),C={state:t.state,path:L(t.path,`${e.key}[${f}]`),prefill:{}},E=document.createElement("div");if(E.className="containerItem border border-gray-300 rounded-lg p-4 bg-white",E.setAttribute("data-container-item",`${e.key}[${f}]`),e.elements.forEach(w=>{w.hidden||E.appendChild(q(w,C))}),!a.config.readonly){const w=document.createElement("button");w.type="button",w.className="absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors",w.textContent="\xD7",w.onclick=()=>{E.remove(),g()},E.style.position="relative",E.appendChild(w)}h.appendChild(E),g()}},y},g=()=>{const y=b(),f=d.querySelector("button");f&&(f.disabled=y>=m,f.style.opacity=y>=m?"0.5":"1"),u.innerHTML=`<span>${e.label||e.key}</span> <span class="text-sm text-gray-500">(${y}/${m===1/0?"\u221E":m})</span>`};if(a.config.readonly||d.appendChild(x()),v&&Array.isArray(v)&&v.forEach((y,f)=>{const C={state:t.state,path:L(t.path,`${e.key}[${f}]`),prefill:y||{}},E=document.createElement("div");if(E.className="containerItem border border-gray-300 rounded-lg p-4 bg-white",E.setAttribute("data-container-item",`${e.key}[${f}]`),e.elements.forEach(w=>{w.hidden||E.appendChild(q(w,C))}),!a.config.readonly){const w=document.createElement("button");w.type="button",w.className="absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors",w.textContent="\xD7",w.onclick=()=>{E.remove(),g()},E.style.position="relative",E.appendChild(w)}h.appendChild(E)}),!a.config.readonly)for(;b()<p;){const y=b(),f={state:t.state,path:L(t.path,`${e.key}[${y}]`),prefill:{}},C=document.createElement("div");C.className="containerItem border border-gray-300 rounded-lg p-4 bg-white",C.setAttribute("data-container-item",`${e.key}[${y}]`),e.elements.forEach(w=>{w.hidden||C.appendChild(q(w,f))});const E=document.createElement("button");E.type="button",E.className="absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors",E.textContent="\xD7",E.onclick=()=>{b()>p&&(C.remove(),g())},C.style.position="relative",C.appendChild(E),h.appendChild(C)}i.appendChild(h),g(),n.appendChild(i)}let D=null;function Be(e){D=e}function Q(e,t,n){if(!D)throw new Error("validateElement not initialized. Should be set from FormBuilderInstance");return D(e,t,n)}function ee(e,t,n){const o=[],{scopeRoot:c,skipValidation:r,path:l}=n;if(!("elements"in e))return{value:null,errors:o};const a=(i,s,u)=>{var d,h;if(r)return;const p="minCount"in u&&(d=u.minCount)!=null?d:0,m="maxCount"in u&&(h=u.maxCount)!=null?h:1/0;u.required&&s.length===0&&o.push(`${i}: required`),s.length<p&&o.push(`${i}: minimum ${p} items required`),s.length>m&&o.push(`${i}: maximum ${m} items allowed`)};if("multiple"in e&&e.multiple){const i=[],s=c.querySelectorAll("[data-container-item]"),u=Array.from(s).filter(d=>{const h=d.getAttribute("data-container-item");return h==null?void 0:h.startsWith(`${t}[`)}).length;for(let d=0;d<u;d++){const h={},p=c.querySelector(`[data-container-item="${t}[${d}]"]`)||c;e.elements.forEach(m=>{if(m.hidden||m.type==="hidden")h[m.key]=m.default!==void 0?m.default:null;else{const v=`${t}[${d}].${m.key}`;h[m.key]=Q({...m,key:v},{path:l},p)}}),i.push(h)}return a(t,i,e),{value:i,errors:o}}else{const i={},s=c.querySelector(`[data-container="${t}"]`)||c;return e.elements.forEach(u=>{if(u.hidden||u.type==="hidden")i[u.key]=u.default!==void 0?u.default:null;else{const d=`${t}.${u.key}`;i[u.key]=Q({...u,key:d},{path:l},s)}}),{value:i,errors:o}}}function te(e,t,n,o){const{instance:c,scopeRoot:r}=o;if("elements"in e)if("multiple"in e&&e.multiple){if(!Array.isArray(n)){console.warn(`updateContainerField: Expected array for multiple container field "${t}", got ${typeof n}`);return}n.forEach((a,i)=>{T(a)&&e.elements.forEach(s=>{const u=s.key,d=`${t}[${i}].${u}`,h=a[u];h!==void 0&&c.updateField(d,h)})});const l=r.querySelectorAll(`[data-container-item^="${t}["]`);n.length!==l.length&&console.warn(`updateContainerField: Multiple container field "${t}" item count mismatch. Consider re-rendering for add/remove.`)}else{if(!T(n)){console.warn(`updateContainerField: Expected object for container field "${t}", got ${typeof n}`);return}e.elements.forEach(l=>{const a=l.key,i=`${t}.${a}`,s=n[a];s!==void 0&&c.updateField(i,s)})}}function je(e,t,n,o){var c,r;typeof console!="undefined"&&console.warn&&console.warn(`[Form Builder] The "group" field type is deprecated and will be removed in a future version. Please use type: "container" with multiple: true instead. Field key: "${e.key}"`);const l={key:e.key,label:e.label,description:e.description,hint:e.hint,required:e.required,hidden:e.hidden,default:e.default,actions:e.actions,elements:e.elements,multiple:!!(e.repeat&&T(e.repeat)),minCount:(c=e.repeat)==null?void 0:c.min,maxCount:(r=e.repeat)==null?void 0:r.max};l.multiple?K(l,t,n):Z(l,t,n,o)}function ne(e){var t,n;const o=e;return{type:"container",key:o.key,label:o.label,description:o.description,hint:o.hint,required:o.required,hidden:o.hidden,default:o.default,actions:o.actions,elements:o.elements,multiple:!!(o.repeat&&T(o.repeat)),minCount:(t=o.repeat)==null?void 0:t.min,maxCount:(n=o.repeat)==null?void 0:n.max}}function ze(e,t,n){typeof console!="undefined"&&console.warn&&console.warn(`[Form Builder] The "group" field type is deprecated. Please use type: "container" instead. Field key: "${t}"`);const o=ne(e);return ee(o,t,n)}function Re(e,t,n,o){typeof console!="undefined"&&console.warn&&console.warn(`[Form Builder] The "group" field type is deprecated. Please use type: "container" instead. Field path: "${t}"`);const c=ne(e);return te(c,t,n,o)}function De(e,t){const n=document.getElementById(e);if(!n)return;const o=!n.classList.contains("hidden");if(document.querySelectorAll('[id^="tooltip-"]').forEach(u=>{u.classList.add("hidden")}),o)return;const c=t.getBoundingClientRect(),r=window.innerWidth,l=window.innerHeight;n&&n.parentElement!==document.body&&document.body.appendChild(n),n.style.visibility="hidden",n.style.position="fixed",n.classList.remove("hidden");const a=n.getBoundingClientRect();n.classList.add("hidden"),n.style.visibility="visible";let i=c.left,s=c.bottom+5;i+a.width>r&&(i=c.right-a.width),s+a.height>l&&(s=c.top-a.height-5),i<10&&(i=10),s<10&&(s=c.bottom+5),n.style.left=`${i}px`,n.style.top=`${s}px`,n.classList.remove("hidden"),setTimeout(()=>{n.classList.add("hidden")},25e3)}typeof document!="undefined"&&document.addEventListener("click",e=>{const t=e.target,n=t.closest("button")&&t.closest("button").onclick,o=t.closest('[id^="tooltip-"]');!n&&!o&&document.querySelectorAll('[id^="tooltip-"]').forEach(c=>{c.classList.add("hidden")})});function re(e,t){const n=document.createElement("div");n.className="mb-6 fb-field-wrapper";const o=document.createElement("div");o.className="flex items-center mb-2";const c=document.createElement("label");if(c.className="text-sm font-medium text-gray-900",c.textContent=e.label||e.key,e.required){const l=document.createElement("span");l.className="text-red-500 ml-1",l.textContent="*",c.appendChild(l)}if(o.appendChild(c),e.description||e.hint){const l=document.createElement("button");l.type="button",l.className="ml-2 text-gray-400 hover:text-gray-600",l.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 a=`tooltip-${e.key}-${Math.random().toString(36).substr(2,9)}`,i=document.createElement("div");i.id=a,i.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",i.style.position="fixed",i.textContent=e.description||e.hint||"Field information",document.body.appendChild(i),l.onclick=s=>{s.preventDefault(),s.stopPropagation(),De(a,l)},o.appendChild(l)}n.appendChild(o);const r=L(t.path,e.key);switch(e.type){case"text":"multiple"in e&&e.multiple?pe(e,t,n,r):me(e,t,n,r);break;case"textarea":"multiple"in e&&e.multiple?he(e,t,n,r):fe(e,t,n,r);break;case"number":"multiple"in e&&e.multiple?be(e,t,n,r):ye(e,t,n,r);break;case"select":"multiple"in e&&e.multiple?we(e,t,n,r):Ee(e,t,n,r);break;case"file":"multiple"in e&&e.multiple?He(e,t,n,r):Te(e,t,n,r);break;case"files":qe(e,t,n,r);break;case"group":je(e,t,n,r);break;case"container":"multiple"in e&&e.multiple?K(e,t,n):Z(e,t,n,r);break;default:{const l=document.createElement("div");l.className="text-red-500 text-sm",l.textContent=`Unsupported field type: ${e.type}`,n.appendChild(l)}}return n}Me(re);const Ie={uploadFile:null,downloadFile:null,getThumbnail:null,getDownloadUrl:null,actionHandler:null,onChange:null,onFieldChange:null,debounceMs:300,enableFilePreview:!0,maxPreviewSize:"200px",readonly:!1,locale:"en",translations:{en:{addElement:"Add Element",removeElement:"Remove",uploadText:"Upload",dragDropText:"or drag and drop files",dragDropTextSingle:"or drag and drop file",clickDragText:"Click or drag file",noFileSelected:"No file selected",noFilesSelected:"No files selected",downloadButton:"Download"},ru:{addElement:"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u044D\u043B\u0435\u043C\u0435\u043D\u0442",removeElement:"\u0423\u0434\u0430\u043B\u0438\u0442\u044C",uploadText:"\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435",dragDropText:"\u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B",dragDropTextSingle:"\u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0444\u0430\u0439\u043B",clickDragText:"\u041D\u0430\u0436\u043C\u0438\u0442\u0435 \u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0444\u0430\u0439\u043B",noFileSelected:"\u0424\u0430\u0439\u043B \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D",noFilesSelected:"\u041D\u0435\u0442 \u0444\u0430\u0439\u043B\u043E\u0432",downloadButton:"\u0421\u043A\u0430\u0447\u0430\u0442\u044C"}},theme:{}};function Oe(e){return{schema:null,formRoot:null,resourceIndex:new Map,externalActions:null,version:"1.0.0",config:{...Ie,...e},debounceTimer:null}}function Ue(){const e=Date.now().toString(36),t=Math.random().toString(36).substring(2,9);return`inst-${e}-${t}`}const A={primaryColor:"#3b82f6",primaryHoverColor:"#2563eb",errorColor:"#ef4444",errorHoverColor:"#dc2626",successColor:"#10b981",borderColor:"#d1d5db",borderHoverColor:"#9ca3af",borderFocusColor:"#3b82f6",backgroundColor:"#ffffff",backgroundHoverColor:"#f9fafb",backgroundReadonlyColor:"#f3f4f6",textColor:"#1f2937",textSecondaryColor:"#6b7280",textPlaceholderColor:"#9ca3af",textDisabledColor:"#d1d5db",buttonBgColor:"#3b82f6",buttonTextColor:"#ffffff",buttonBorderColor:"#2563eb",buttonHoverBgColor:"#2563eb",buttonHoverBorderColor:"#1d4ed8",actionBgColor:"#ffffff",actionTextColor:"#374151",actionBorderColor:"#e5e7eb",actionHoverBgColor:"#f9fafb",actionHoverBorderColor:"#d1d5db",fileUploadBgColor:"#f3f4f6",fileUploadBorderColor:"#d1d5db",fileUploadTextColor:"#9ca3af",fileUploadHoverBorderColor:"#3b82f6",inputPaddingX:"0.75rem",inputPaddingY:"0.5rem",borderRadius:"0.5rem",borderWidth:"1px",fontSize:"0.875rem",fontSizeSmall:"0.75rem",fontSizeExtraSmall:"0.625rem",fontFamily:'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',fontWeightNormal:"400",fontWeightMedium:"500",focusRingWidth:"2px",focusRingColor:"#3b82f6",focusRingOpacity:"0.5",transitionDuration:"200ms"};function Pe(e){const t={...A,...e},n=[];return Object.entries(t).forEach(([o,c])=>{const r=o.replace(/([A-Z])/g,"-$1").toLowerCase();n.push(`  --fb-${r}: ${c};`)}),n.join(`
+`)}function Ve(e,t){const n=Pe(t);let o=e.querySelector("style[data-fb-theme]");o||(o=document.createElement("style"),o.setAttribute("data-fb-theme","true"),e.appendChild(o)),o.textContent=`
+    [data-fb-root="true"] {
+${n}
+    }
+  `}const We={default:A,dark:{...A,primaryColor:"#60a5fa",primaryHoverColor:"#3b82f6",borderColor:"#4b5563",borderHoverColor:"#6b7280",borderFocusColor:"#60a5fa",backgroundColor:"#1f2937",backgroundHoverColor:"#374151",backgroundReadonlyColor:"#111827",textColor:"#f9fafb",textSecondaryColor:"#9ca3af",textPlaceholderColor:"#6b7280",fileUploadBgColor:"#374151",fileUploadBorderColor:"#4b5563",fileUploadTextColor:"#9ca3af"},klein:{...A,primaryColor:"#0066cc",primaryHoverColor:"#0052a3",errorColor:"#d32f2f",errorHoverColor:"#c62828",successColor:"#388e3c",borderColor:"#e0e0e0",borderHoverColor:"#bdbdbd",borderFocusColor:"#0066cc",borderRadius:"4px",fontSize:"16px",fontSizeSmall:"14px",fontFamily:'"Roboto", "Helvetica", "Arial", sans-serif'}};function le(e,t=!1){e.style.cssText=`
+    background-color: var(--fb-action-bg-color);
+    color: var(--fb-action-text-color);
+    border: var(--fb-border-width) solid var(--fb-action-border-color);
+    padding: ${t?"0.5rem 1rem":"0.5rem 0.75rem"};
+    font-size: var(--fb-font-size);
+    font-weight: var(--fb-font-weight-medium);
+    border-radius: var(--fb-border-radius);
+    transition: all var(--fb-transition-duration);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  `,e.addEventListener("mouseenter",()=>{e.style.backgroundColor="var(--fb-action-hover-bg-color)",e.style.borderColor="var(--fb-action-hover-border-color)"}),e.addEventListener("mouseleave",()=>{e.style.backgroundColor="var(--fb-action-bg-color)",e.style.borderColor="var(--fb-action-border-color)"})}const _e={text:{validate:I,update:O},textarea:{validate:ve,update:ge},number:{validate:xe,update:Ce},select:{validate:$e,update:ke},file:{validate:J,update:X},files:{validate:J,update:X},container:{validate:ee,update:te},group:{validate:ze,update:Re}};function oe(e){return _e[e]||null}function Ge(e,t,n){const o=oe(e.type);return o&&o.validate?o.validate(e,t,n):null}function Ye(e,t,n,o){const c=oe(e.type);return c&&c.update?(c.update(e,t,n,o),!0):!1}class H{constructor(t){this.instanceId=Ue(),this.state=Oe(t)}getInstanceId(){return this.instanceId}getState(){return this.state}setFormRoot(t){this.state.formRoot=t}configure(t){Object.assign(this.state.config,t)}setUploadHandler(t){this.state.config.uploadFile=t}setDownloadHandler(t){this.state.config.downloadFile=t}setThumbnailHandler(t){this.state.config.getThumbnail=t}setActionHandler(t){this.state.config.actionHandler=t}setMode(t){this.state.config.readonly=t==="readonly"}setLocale(t){this.state.config.translations[t]&&(this.state.config.locale=t)}triggerOnChange(t,n){this.state.config.readonly||(this.state.debounceTimer!==null&&clearTimeout(this.state.debounceTimer),this.state.debounceTimer=setTimeout(()=>{const o=this.validateForm(!0);this.state.config.onChange&&this.state.config.onChange(o),this.state.config.onFieldChange&&t!==void 0&&n!==void 0&&this.state.config.onFieldChange(t,n,o),this.state.debounceTimer=null},this.state.config.debounceMs))}registerAction(t){if(!t||!t.value)throw new Error("Action must have a value property");this.state.externalActions||(this.state.externalActions=[]);const n=this.state.externalActions.findIndex(o=>o.value===t.value&&o.related_field===t.related_field);n>=0?this.state.externalActions[n]=t:this.state.externalActions.push(t)}findFormElementByFieldPath(t){if(!this.state.formRoot)return null;if(!this.state.config.readonly){let c=this.state.formRoot.querySelector(`[name="${t}"]`);if(c)return c;const r=[t,t.replace(/\[(\d+)\]/g,"[$1]"),t.replace(/\./g,"[")+"]".repeat((t.match(/\./g)||[]).length)];for(const l of r)if(c=this.state.formRoot.querySelector(`[name="${l}"]`),c)return c}const n=this.findSchemaElement(t);if(!n)return null;const o=this.state.formRoot.querySelectorAll(".fb-field-wrapper");for(const c of o){const r=n.label||n.key,l=c.querySelector("label");if(l&&(l.textContent===r||l.textContent===`${r}*`)){let a=c.querySelector(".field-placeholder");return a||(a=document.createElement("div"),a.className="field-placeholder",a.style.display="none",c.appendChild(a)),a}}return null}findSchemaElement(t){if(!this.state.schema||!this.state.schema.elements)return null;let n=this.state.schema.elements,o=null;const c=t.replace(/\[\d+\]/g,"").split(".").filter(Boolean);for(const r of c){if(o=n.find(l=>l.key===r)||null,!o)return null;"elements"in o&&o.elements&&(n=o.elements)}return o}resolveActionLabel(t,n,o,c=!1){if(o&&"actions"in o&&o.actions){const r=o.actions.find(l=>l.key===t);if(r&&r.label)return r.label}if(c&&this.state.schema&&"actions"in this.state.schema&&this.state.schema.actions){const r=this.state.schema.actions.find(l=>l.key===t);if(r&&r.label)return r.label}return n||t}renderFormLevelActions(t,n=[]){if(!this.state.formRoot)return;const o=this.state.formRoot.querySelector(".form-level-actions-container");o&&o.remove();const c=document.createElement("div");c.className="form-level-actions-container mt-6 pt-4 flex flex-wrap gap-3 justify-center",c.style.cssText=`
+      border-top: var(--fb-border-width) solid var(--fb-border-color);
+    `,t.forEach(r=>{const l=document.createElement("button");l.type="button",le(l,!0);const a=n.includes(r),i=this.resolveActionLabel(r.key,r.label,null,a);l.textContent=i,l.addEventListener("click",s=>{s.preventDefault(),s.stopPropagation(),this.state.config.actionHandler&&typeof this.state.config.actionHandler=="function"&&this.state.config.actionHandler(r.value,r.key,null)}),c.appendChild(l)}),this.state.formRoot.appendChild(c)}renderExternalActions(){if(!this.state.externalActions||!Array.isArray(this.state.externalActions))return;const t=new Map,n=[],o=[];this.state.externalActions.forEach(r=>{!r.key||!r.value||(r.related_field?(t.has(r.related_field)||t.set(r.related_field,[]),t.get(r.related_field).push(r)):n.push(r))}),t.forEach((r,l)=>{const a=this.findFormElementByFieldPath(l);if(!a){console.warn(`External action: Could not find form element for field "${l}", treating as form-level actions`),o.push(...r);return}let i=a.closest(".fb-field-wrapper");if(i||(i=a.parentElement),!i){console.warn(`External action: Could not find wrapper for field "${l}"`);return}const s=i.querySelector(".external-actions-container");s&&s.remove();const u=document.createElement("div");u.className="external-actions-container mt-3 flex flex-wrap gap-2";const d=this.findSchemaElement(l);r.forEach(h=>{const p=document.createElement("button");p.type="button",le(p,!1);const m=this.resolveActionLabel(h.key,h.label,d);p.textContent=m,p.addEventListener("click",v=>{v.preventDefault(),v.stopPropagation(),this.state.config.actionHandler&&typeof this.state.config.actionHandler=="function"&&this.state.config.actionHandler(h.value,h.key,h.related_field)}),u.appendChild(p)}),i.appendChild(u)});const c=[...n,...o];c.length>0&&this.renderFormLevelActions(c,n)}renderForm(t,n,o,c){const r=M(n);if(r.length>0){console.error("Schema validation errors:",r);return}this.state.formRoot=t,this.state.schema=n,this.state.externalActions=c||null,N(t),t.setAttribute("data-fb-root","true"),Ve(t,this.state.config.theme);const l=document.createElement("div");l.className="space-y-6",n.elements.forEach(a=>{if(a.hidden)return;const i=re(a,{path:"",prefill:o||{},state:this.state,instance:this});l.appendChild(i)}),t.appendChild(l),this.state.config.readonly&&this.state.externalActions&&Array.isArray(this.state.externalActions)&&this.renderExternalActions()}validateForm(t=!1){if(!this.state.schema||!this.state.formRoot)return{valid:!0,errors:[],data:{}};const n=[],o={},c=(r,l,a=null)=>{const i=r.key,s={scopeRoot:a||this.state.formRoot,state:this.state,instance:this,path:l.path,skipValidation:t},u=Ge(r,i,s);return u!==null?(n.push(...u.errors),u.value):(console.warn(`Unknown field type "${r.type}" for key "${i}"`),null)};return Be(c),this.state.schema.elements.forEach(r=>{r.hidden?o[r.key]=r.default!==void 0?r.default:null:o[r.key]=c(r,{path:""})}),{valid:n.length===0,errors:n,data:o}}getFormData(){return this.validateForm(!1)}submitForm(){const t=this.validateForm(!1);return t.valid&&typeof window!="undefined"&&window.parent&&window.parent.postMessage({type:"formSubmit",data:t.data,schema:this.state.schema},"*"),t}saveDraft(){const t=this.validateForm(!0);return typeof window!="undefined"&&window.parent&&window.parent.postMessage({type:"formDraft",data:t.data,schema:this.state.schema},"*"),t}clearForm(){if(!this.state.schema||!this.state.formRoot){console.warn("clearForm: Form not initialized. Call renderForm() first.");return}const t=this.state.schema,n=this.state.formRoot,o=this.buildHiddenFieldsData(t.elements);this.renderForm(n,t,o)}buildHiddenFieldsData(t,n=""){const o={};for(const c of t){const r=c.key,l=n?`${n}.${r}`:r;if(c.hidden&&c.default!==void 0&&(o[l]=c.default),c.type==="container"||c.type==="group"){const a=c,i=this.buildHiddenFieldsData(a.elements,l);Object.assign(o,i)}}return o}setFormData(t){if(!this.state.schema||!this.state.formRoot){console.warn("setFormData: Form not initialized. Call renderForm() first.");return}for(const n in t)this.updateField(n,t[n])}updateField(t,n){if(!this.state.schema||!this.state.formRoot){console.warn("updateField: Form not initialized. Call renderForm() first.");return}const o=this.findSchemaElement(t);if(!o){console.warn(`updateField: Schema element not found for path "${t}"`);return}const c=this.findFormElementByFieldPath(t);if(!c){console.warn(`updateField: DOM element not found for path "${t}"`);return}this.updateFieldValue(c,o,t,n),(this.state.config.onChange||this.state.config.onFieldChange)&&this.triggerOnChange(t,n)}updateFieldValue(t,n,o,c){const r={scopeRoot:this.state.formRoot,state:this.state,instance:this,path:""};Ye(n,o,c,r)||console.warn(`updateField: No updater found for field type "${n.type}" at path "${o}"`)}destroy(){this.state.debounceTimer!==null&&(clearTimeout(this.state.debounceTimer),this.state.debounceTimer=null),this.state.resourceIndex.clear(),this.state.formRoot&&N(this.state.formRoot),this.state.formRoot=null,this.state.schema=null,this.state.externalActions=null}}function ae(e){return new H(e)}return typeof window!="undefined"&&(window.FormBuilder=H,window.createFormBuilder=ae,window.validateSchema=M),F.FormBuilderInstance=H,F.createFormBuilder=ae,F.default=H,F.defaultTheme=A,F.exampleThemes=We,F.validateSchema=M,Object.defineProperty(F,"__esModule",{value:!0}),F})({});