@dmitryvim/form-builder 0.1.42 → 0.2.0

package/dist/esm/index.js

@@ -0,0 +1,3534 @@
+// src/utils/validation.ts
+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("\u0410-\u042F")) {
+    parts.push("plain text only");
+  } else if (element.pattern?.includes("\u0410-\u042F")) {
+    parts.push("text with punctuation");
+  }
+}
+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(" \u2022 ");
+}
+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" && "elements" in element && element.elements) {
+        validateElements(element.elements, `${elementPath}.elements`);
+      }
+      if (element.type === "container" && element.elements) {
+        validateElements(element.elements, `${elementPath}.elements`);
+      }
+      if (element.type === "select" && element.options) {
+        const defaultValue = element.default;
+        if (defaultValue !== void 0 && 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;
+}
+
+// src/utils/helpers.ts
+function isPlainObject(obj) {
+  return obj && typeof obj === "object" && obj.constructor === Object;
+}
+function pathJoin(base, key) {
+  return base ? `${base}.${key}` : key;
+}
+function clear(node) {
+  while (node.firstChild) node.removeChild(node.firstChild);
+}
+
+// src/components/text.ts
+function renderTextElement(element, ctx, wrapper, pathKey) {
+  const state = ctx.state;
+  const textInput = document.createElement("input");
+  textInput.type = "text";
+  textInput.className = "w-full rounded-lg";
+  textInput.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: ${state.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;
+  `;
+  textInput.name = pathKey;
+  textInput.placeholder = element.placeholder || "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
+  textInput.value = ctx.prefill[element.key] || element.default || "";
+  textInput.readOnly = state.config.readonly;
+  if (!state.config.readonly) {
+    textInput.addEventListener("focus", () => {
+      textInput.style.borderColor = "var(--fb-border-focus-color)";
+      textInput.style.outline = `var(--fb-focus-ring-width) solid var(--fb-focus-ring-color)`;
+      textInput.style.outlineOffset = "0";
+    });
+    textInput.addEventListener("blur", () => {
+      textInput.style.borderColor = "var(--fb-border-color)";
+      textInput.style.outline = "none";
+    });
+    textInput.addEventListener("mouseenter", () => {
+      if (document.activeElement !== textInput) {
+        textInput.style.borderColor = "var(--fb-border-hover-color)";
+      }
+    });
+    textInput.addEventListener("mouseleave", () => {
+      if (document.activeElement !== textInput) {
+        textInput.style.borderColor = "var(--fb-border-color)";
+      }
+    });
+  }
+  if (!state.config.readonly && ctx.instance) {
+    const handleChange = () => {
+      ctx.instance.triggerOnChange(pathKey, textInput.value);
+    };
+    textInput.addEventListener("blur", handleChange);
+    textInput.addEventListener("input", handleChange);
+  }
+  wrapper.appendChild(textInput);
+  const textHint = document.createElement("p");
+  textHint.className = "mt-1";
+  textHint.style.cssText = `
+    font-size: var(--fb-font-size-small);
+    color: var(--fb-text-secondary-color);
+  `;
+  textHint.textContent = makeFieldHint(element);
+  wrapper.appendChild(textHint);
+}
+function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
+  const state = ctx.state;
+  const prefillValues = ctx.prefill[element.key] || [];
+  const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
+  const minCount = element.minCount ?? 1;
+  const maxCount = element.maxCount ?? Infinity;
+  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";
+    textInput.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: ${state.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;
+    `;
+    textInput.placeholder = element.placeholder || "Enter text";
+    textInput.value = value;
+    textInput.readOnly = state.config.readonly;
+    if (!state.config.readonly) {
+      textInput.addEventListener("focus", () => {
+        textInput.style.borderColor = "var(--fb-border-focus-color)";
+        textInput.style.outline = `var(--fb-focus-ring-width) solid var(--fb-focus-ring-color)`;
+        textInput.style.outlineOffset = "0";
+      });
+      textInput.addEventListener("blur", () => {
+        textInput.style.borderColor = "var(--fb-border-color)";
+        textInput.style.outline = "none";
+      });
+      textInput.addEventListener("mouseenter", () => {
+        if (document.activeElement !== textInput) {
+          textInput.style.borderColor = "var(--fb-border-hover-color)";
+        }
+      });
+      textInput.addEventListener("mouseleave", () => {
+        if (document.activeElement !== textInput) {
+          textInput.style.borderColor = "var(--fb-border-color)";
+        }
+      });
+    }
+    if (!state.config.readonly && ctx.instance) {
+      const handleChange = () => {
+        ctx.instance.triggerOnChange(textInput.name, textInput.value);
+      };
+      textInput.addEventListener("blur", handleChange);
+      textInput.addEventListener("input", handleChange);
+    }
+    itemWrapper.appendChild(textInput);
+    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 rounded";
+        removeBtn.style.cssText = `
+          color: var(--fb-error-color);
+          background-color: transparent;
+          transition: background-color var(--fb-transition-duration);
+        `;
+        removeBtn.innerHTML = "\u2715";
+        removeBtn.addEventListener("mouseenter", () => {
+          removeBtn.style.backgroundColor = "var(--fb-background-hover-color)";
+        });
+        removeBtn.addEventListener("mouseleave", () => {
+          removeBtn.style.backgroundColor = "transparent";
+        });
+        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 rounded";
+      addBtn.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);
+      `;
+      addBtn.textContent = `+ Add ${element.label || "Text"}`;
+      addBtn.addEventListener("mouseenter", () => {
+        addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
+      });
+      addBtn.addEventListener("mouseleave", () => {
+        addBtn.style.backgroundColor = "transparent";
+      });
+      addBtn.onclick = () => {
+        values.push(element.default || "");
+        addTextItem(element.default || "");
+        updateAddButton();
+        updateRemoveButtons();
+      };
+      wrapper.appendChild(addBtn);
+    }
+  }
+  values.forEach((value) => addTextItem(value));
+  updateAddButton();
+  updateRemoveButtons();
+  const hint = document.createElement("p");
+  hint.className = "mt-1";
+  hint.style.cssText = `
+    font-size: var(--fb-font-size-small);
+    color: var(--fb-text-secondary-color);
+  `;
+  hint.textContent = makeFieldHint(element);
+  wrapper.appendChild(hint);
+}
+function validateTextElement(element, key, context) {
+  const errors = [];
+  const { scopeRoot, skipValidation } = context;
+  const markValidity = (input, errorMessage) => {
+    if (!input) return;
+    const errorId = `error-${input.getAttribute("name") || Math.random().toString(36).substring(7)}`;
+    let errorElement = document.getElementById(errorId);
+    if (errorMessage) {
+      input.classList.add("invalid");
+      input.title = errorMessage;
+      if (!errorElement) {
+        errorElement = document.createElement("div");
+        errorElement.id = errorId;
+        errorElement.className = "error-message";
+        errorElement.style.cssText = `
+          color: var(--fb-error-color);
+          font-size: var(--fb-font-size-small);
+          margin-top: 0.25rem;
+        `;
+        if (input.nextSibling) {
+          input.parentNode?.insertBefore(errorElement, input.nextSibling);
+        } else {
+          input.parentNode?.appendChild(errorElement);
+        }
+      }
+      errorElement.textContent = errorMessage;
+      errorElement.style.display = "block";
+    } else {
+      input.classList.remove("invalid");
+      input.title = "";
+      if (errorElement) {
+        errorElement.remove();
+      }
+    }
+  };
+  const validateTextInput = (input, val, fieldKey) => {
+    let hasError = false;
+    if (!skipValidation && val) {
+      if (element.minLength !== void 0 && element.minLength !== null && val.length < element.minLength) {
+        errors.push(`${fieldKey}: minLength=${element.minLength}`);
+        markValidity(input, `minLength=${element.minLength}`);
+        hasError = true;
+      } else if (element.maxLength !== void 0 && element.maxLength !== null && val.length > element.maxLength) {
+        errors.push(`${fieldKey}: maxLength=${element.maxLength}`);
+        markValidity(input, `maxLength=${element.maxLength}`);
+        hasError = true;
+      } else if (element.pattern) {
+        try {
+          const re = new RegExp(element.pattern);
+          if (!re.test(val)) {
+            errors.push(`${fieldKey}: pattern mismatch`);
+            markValidity(input, "pattern mismatch");
+            hasError = true;
+          }
+        } catch {
+          errors.push(`${fieldKey}: invalid pattern`);
+          markValidity(input, "invalid pattern");
+          hasError = true;
+        }
+      }
+    }
+    if (!hasError) {
+      markValidity(input, null);
+    }
+  };
+  if (element.multiple) {
+    const inputs = scopeRoot.querySelectorAll(
+      `[name^="${key}["]`
+    );
+    const values = [];
+    inputs.forEach((input, index) => {
+      const val = input?.value ?? "";
+      values.push(val);
+      validateTextInput(input, val, `${key}[${index}]`);
+    });
+    if (!skipValidation) {
+      const minCount = element.minCount ?? 1;
+      const maxCount = element.maxCount ?? Infinity;
+      const filteredValues = values.filter((v) => v.trim() !== "");
+      if (element.required && filteredValues.length === 0) {
+        errors.push(`${key}: required`);
+      }
+      if (filteredValues.length < minCount) {
+        errors.push(`${key}: minimum ${minCount} items required`);
+      }
+      if (filteredValues.length > maxCount) {
+        errors.push(`${key}: maximum ${maxCount} items allowed`);
+      }
+    }
+    return { value: values, errors };
+  } else {
+    const input = scopeRoot.querySelector(
+      `[name$="${key}"]`
+    );
+    const val = input?.value ?? "";
+    if (!skipValidation && element.required && val === "") {
+      errors.push(`${key}: required`);
+      markValidity(input, "required");
+      return { value: "", errors };
+    }
+    validateTextInput(input, val, key);
+    return { value: val, errors };
+  }
+}
+function updateTextField(element, fieldPath, value, context) {
+  const { scopeRoot } = context;
+  if (element.multiple) {
+    if (!Array.isArray(value)) {
+      console.warn(
+        `updateTextField: Expected array for multiple field "${fieldPath}", got ${typeof value}`
+      );
+      return;
+    }
+    const inputs = scopeRoot.querySelectorAll(
+      `[name^="${fieldPath}["]`
+    );
+    inputs.forEach((input, index) => {
+      if (index < value.length) {
+        input.value = value[index] != null ? String(value[index]) : "";
+        input.classList.remove("invalid");
+        input.title = "";
+      }
+    });
+    if (value.length !== inputs.length) {
+      console.warn(
+        `updateTextField: Multiple field "${fieldPath}" has ${inputs.length} inputs but received ${value.length} values. Consider re-rendering for add/remove.`
+      );
+    }
+  } else {
+    const input = scopeRoot.querySelector(
+      `[name="${fieldPath}"]`
+    );
+    if (input) {
+      input.value = value != null ? String(value) : "";
+      input.classList.remove("invalid");
+      input.title = "";
+    }
+  }
+}
+
+// src/components/textarea.ts
+function renderTextareaElement(element, ctx, wrapper, pathKey) {
+  const state = ctx.state;
+  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 || "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
+  textareaInput.rows = element.rows || 4;
+  textareaInput.value = ctx.prefill[element.key] || element.default || "";
+  textareaInput.readOnly = state.config.readonly;
+  if (!state.config.readonly && ctx.instance) {
+    const handleChange = () => {
+      ctx.instance.triggerOnChange(pathKey, textareaInput.value);
+    };
+    textareaInput.addEventListener("blur", handleChange);
+    textareaInput.addEventListener("input", handleChange);
+  }
+  wrapper.appendChild(textareaInput);
+  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 state = ctx.state;
+  const prefillValues = ctx.prefill[element.key] || [];
+  const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
+  const minCount = element.minCount ?? 1;
+  const maxCount = element.maxCount ?? Infinity;
+  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;
+    if (!state.config.readonly && ctx.instance) {
+      const handleChange = () => {
+        ctx.instance.triggerOnChange(textareaInput.name, textareaInput.value);
+      };
+      textareaInput.addEventListener("blur", handleChange);
+      textareaInput.addEventListener("input", handleChange);
+    }
+    itemWrapper.appendChild(textareaInput);
+    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 = "\u2715 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);
+    }
+  }
+  values.forEach((value) => addTextareaItem(value));
+  updateAddButton();
+  updateRemoveButtons();
+  const hint = document.createElement("p");
+  hint.className = "text-xs text-gray-500 mt-1";
+  hint.textContent = makeFieldHint(element);
+  wrapper.appendChild(hint);
+}
+function validateTextareaElement(element, key, context) {
+  return validateTextElement(element, key, context);
+}
+function updateTextareaField(element, fieldPath, value, context) {
+  updateTextField(element, fieldPath, value, context);
+}
+
+// src/components/number.ts
+function renderNumberElement(element, ctx, wrapper, pathKey) {
+  const state = ctx.state;
+  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 !== void 0) numberInput.min = element.min.toString();
+  if (element.max !== void 0) numberInput.max = element.max.toString();
+  if (element.step !== void 0) numberInput.step = element.step.toString();
+  numberInput.value = ctx.prefill[element.key] || element.default || "";
+  numberInput.readOnly = state.config.readonly;
+  if (!state.config.readonly && ctx.instance) {
+    const handleChange = () => {
+      const value = numberInput.value ? parseFloat(numberInput.value) : null;
+      ctx.instance.triggerOnChange(pathKey, value);
+    };
+    numberInput.addEventListener("blur", handleChange);
+    numberInput.addEventListener("input", handleChange);
+  }
+  wrapper.appendChild(numberInput);
+  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 state = ctx.state;
+  const prefillValues = ctx.prefill[element.key] || [];
+  const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
+  const minCount = element.minCount ?? 1;
+  const maxCount = element.maxCount ?? Infinity;
+  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 !== void 0) numberInput.min = element.min.toString();
+    if (element.max !== void 0) numberInput.max = element.max.toString();
+    if (element.step !== void 0) numberInput.step = element.step.toString();
+    numberInput.value = value.toString();
+    numberInput.readOnly = state.config.readonly;
+    if (!state.config.readonly && ctx.instance) {
+      const handleChange = () => {
+        const val = numberInput.value ? parseFloat(numberInput.value) : null;
+        ctx.instance.triggerOnChange(numberInput.name, val);
+      };
+      numberInput.addEventListener("blur", handleChange);
+      numberInput.addEventListener("input", handleChange);
+    }
+    itemWrapper.appendChild(numberInput);
+    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 = "\u2715";
+        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);
+    }
+  }
+  values.forEach((value) => addNumberItem(value));
+  updateAddButton();
+  updateRemoveButtons();
+  const hint = document.createElement("p");
+  hint.className = "text-xs text-gray-500 mt-1";
+  hint.textContent = makeFieldHint(element);
+  wrapper.appendChild(hint);
+}
+function validateNumberElement(element, key, context) {
+  const errors = [];
+  const { scopeRoot, skipValidation } = context;
+  const markValidity = (input, errorMessage) => {
+    if (!input) return;
+    const errorId = `error-${input.getAttribute("name") || Math.random().toString(36).substring(7)}`;
+    let errorElement = document.getElementById(errorId);
+    if (errorMessage) {
+      input.classList.add("invalid");
+      input.title = errorMessage;
+      if (!errorElement) {
+        errorElement = document.createElement("div");
+        errorElement.id = errorId;
+        errorElement.className = "error-message";
+        errorElement.style.cssText = `
+          color: var(--fb-error-color);
+          font-size: var(--fb-font-size-small);
+          margin-top: 0.25rem;
+        `;
+        if (input.nextSibling) {
+          input.parentNode?.insertBefore(errorElement, input.nextSibling);
+        } else {
+          input.parentNode?.appendChild(errorElement);
+        }
+      }
+      errorElement.textContent = errorMessage;
+      errorElement.style.display = "block";
+    } else {
+      input.classList.remove("invalid");
+      input.title = "";
+      if (errorElement) {
+        errorElement.remove();
+      }
+    }
+  };
+  const validateNumberInput = (input, v, fieldKey) => {
+    let hasError = false;
+    if (!skipValidation && element.min !== void 0 && element.min !== null && v < element.min) {
+      errors.push(`${fieldKey}: < min=${element.min}`);
+      markValidity(input, `< min=${element.min}`);
+      hasError = true;
+    } else if (!skipValidation && element.max !== void 0 && element.max !== null && v > element.max) {
+      errors.push(`${fieldKey}: > max=${element.max}`);
+      markValidity(input, `> max=${element.max}`);
+      hasError = true;
+    }
+    if (!hasError) {
+      markValidity(input, null);
+    }
+  };
+  if (element.multiple) {
+    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;
+      }
+      validateNumberInput(input, v, `${key}[${index}]`);
+      const d = Number.isInteger(element.decimals ?? 0) ? element.decimals ?? 0 : 0;
+      values.push(Number(v.toFixed(d)));
+    });
+    if (!skipValidation) {
+      const minCount = element.minCount ?? 1;
+      const maxCount = element.maxCount ?? Infinity;
+      const filteredValues = values.filter((v) => v !== null);
+      if (element.required && filteredValues.length === 0) {
+        errors.push(`${key}: required`);
+      }
+      if (filteredValues.length < minCount) {
+        errors.push(`${key}: minimum ${minCount} items required`);
+      }
+      if (filteredValues.length > maxCount) {
+        errors.push(`${key}: maximum ${maxCount} items allowed`);
+      }
+    }
+    return { value: values, errors };
+  } else {
+    const input = scopeRoot.querySelector(`[name$="${key}"]`);
+    const raw = input?.value ?? "";
+    if (!skipValidation && element.required && raw === "") {
+      errors.push(`${key}: required`);
+      markValidity(input, "required");
+      return { value: null, errors };
+    }
+    if (raw === "") {
+      markValidity(input, null);
+      return { value: null, errors };
+    }
+    const v = parseFloat(raw);
+    if (!skipValidation && !Number.isFinite(v)) {
+      errors.push(`${key}: not a number`);
+      markValidity(input, "not a number");
+      return { value: null, errors };
+    }
+    validateNumberInput(input, v, key);
+    const d = Number.isInteger(element.decimals ?? 0) ? element.decimals ?? 0 : 0;
+    return { value: Number(v.toFixed(d)), errors };
+  }
+}
+function updateNumberField(element, fieldPath, value, context) {
+  const { scopeRoot } = context;
+  if (element.multiple) {
+    if (!Array.isArray(value)) {
+      console.warn(
+        `updateNumberField: Expected array for multiple field "${fieldPath}", got ${typeof value}`
+      );
+      return;
+    }
+    const inputs = scopeRoot.querySelectorAll(
+      `[name^="${fieldPath}["]`
+    );
+    inputs.forEach((input, index) => {
+      if (index < value.length) {
+        input.value = value[index] != null ? String(value[index]) : "";
+        input.classList.remove("invalid");
+        input.title = "";
+      }
+    });
+    if (value.length !== inputs.length) {
+      console.warn(
+        `updateNumberField: Multiple field "${fieldPath}" has ${inputs.length} inputs but received ${value.length} values. Consider re-rendering for add/remove.`
+      );
+    }
+  } else {
+    const input = scopeRoot.querySelector(
+      `[name="${fieldPath}"]`
+    );
+    if (input) {
+      input.value = value != null ? String(value) : "";
+      input.classList.remove("invalid");
+      input.title = "";
+    }
+  }
+}
+
+// src/components/select.ts
+function renderSelectElement(element, ctx, wrapper, pathKey) {
+  const state = ctx.state;
+  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);
+  });
+  if (!state.config.readonly && ctx.instance) {
+    const handleChange = () => {
+      ctx.instance.triggerOnChange(pathKey, selectInput.value);
+    };
+    selectInput.addEventListener("change", handleChange);
+  }
+  wrapper.appendChild(selectInput);
+  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 state = ctx.state;
+  const prefillValues = ctx.prefill[element.key] || [];
+  const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
+  const minCount = element.minCount ?? 1;
+  const maxCount = element.maxCount ?? Infinity;
+  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;
+    (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);
+    });
+    if (!state.config.readonly && ctx.instance) {
+      const handleChange = () => {
+        ctx.instance.triggerOnChange(selectInput.name, selectInput.value);
+      };
+      selectInput.addEventListener("change", handleChange);
+    }
+    itemWrapper.appendChild(selectInput);
+    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 = "\u2715";
+        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);
+    }
+  }
+  values.forEach((value) => addSelectItem(value));
+  updateAddButton();
+  updateRemoveButtons();
+  const hint = document.createElement("p");
+  hint.className = "text-xs text-gray-500 mt-1";
+  hint.textContent = makeFieldHint(element);
+  wrapper.appendChild(hint);
+}
+function validateSelectElement(element, key, context) {
+  const errors = [];
+  const { scopeRoot, skipValidation } = context;
+  const markValidity = (input, errorMessage) => {
+    if (!input) return;
+    const errorId = `error-${input.getAttribute("name") || Math.random().toString(36).substring(7)}`;
+    let errorElement = document.getElementById(errorId);
+    if (errorMessage) {
+      input.classList.add("invalid");
+      input.title = errorMessage;
+      if (!errorElement) {
+        errorElement = document.createElement("div");
+        errorElement.id = errorId;
+        errorElement.className = "error-message";
+        errorElement.style.cssText = `
+          color: var(--fb-error-color);
+          font-size: var(--fb-font-size-small);
+          margin-top: 0.25rem;
+        `;
+        if (input.nextSibling) {
+          input.parentNode?.insertBefore(errorElement, input.nextSibling);
+        } else {
+          input.parentNode?.appendChild(errorElement);
+        }
+      }
+      errorElement.textContent = errorMessage;
+      errorElement.style.display = "block";
+    } else {
+      input.classList.remove("invalid");
+      input.title = "";
+      if (errorElement) {
+        errorElement.remove();
+      }
+    }
+  };
+  const validateMultipleCount = (key2, values, element2, filterFn) => {
+    if (skipValidation) return;
+    const filteredValues = values.filter(filterFn);
+    const minCount = "minCount" in element2 ? element2.minCount ?? 1 : 1;
+    const maxCount = "maxCount" in element2 ? element2.maxCount ?? Infinity : Infinity;
+    if (element2.required && filteredValues.length === 0) {
+      errors.push(`${key2}: required`);
+    }
+    if (filteredValues.length < minCount) {
+      errors.push(`${key2}: minimum ${minCount} items required`);
+    }
+    if (filteredValues.length > maxCount) {
+      errors.push(`${key2}: maximum ${maxCount} items allowed`);
+    }
+  };
+  if ("multiple" in element && element.multiple) {
+    const inputs = scopeRoot.querySelectorAll(
+      `[name^="${key}["]`
+    );
+    const values = [];
+    inputs.forEach((input) => {
+      const val = input?.value ?? "";
+      values.push(val);
+      markValidity(input, null);
+    });
+    validateMultipleCount(key, values, element, (v) => v !== "");
+    return { value: values, errors };
+  } else {
+    const input = scopeRoot.querySelector(
+      `[name$="${key}"]`
+    );
+    const val = input?.value ?? "";
+    if (!skipValidation && element.required && val === "") {
+      errors.push(`${key}: required`);
+      markValidity(input, "required");
+      return { value: null, errors };
+    } else {
+      markValidity(input, null);
+    }
+    return { value: val === "" ? null : val, errors };
+  }
+}
+function updateSelectField(element, fieldPath, value, context) {
+  const { scopeRoot } = context;
+  if ("multiple" in element && element.multiple) {
+    if (!Array.isArray(value)) {
+      console.warn(
+        `updateSelectField: Expected array for multiple field "${fieldPath}", got ${typeof value}`
+      );
+      return;
+    }
+    const selects = scopeRoot.querySelectorAll(
+      `[name^="${fieldPath}["]`
+    );
+    selects.forEach((select, index) => {
+      if (index < value.length) {
+        select.value = value[index] != null ? String(value[index]) : "";
+        const options = select.querySelectorAll("option");
+        options.forEach((option) => {
+          option.selected = option.value === String(value[index]);
+        });
+        select.classList.remove("invalid");
+        select.title = "";
+      }
+    });
+    if (value.length !== selects.length) {
+      console.warn(
+        `updateSelectField: Multiple field "${fieldPath}" has ${selects.length} selects but received ${value.length} values. Consider re-rendering for add/remove.`
+      );
+    }
+  } else {
+    const select = scopeRoot.querySelector(
+      `[name="${fieldPath}"]`
+    );
+    if (select) {
+      select.value = value != null ? String(value) : "";
+      const options = select.querySelectorAll("option");
+      options.forEach((option) => {
+        option.selected = option.value === String(value);
+      });
+      select.classList.remove("invalid");
+      select.title = "";
+    }
+  }
+}
+
+// src/utils/translation.ts
+function t(key, state) {
+  const locale = state.config.locale || "en";
+  const translations = state.config.translations[locale] || state.config.translations.en;
+  return translations[key] || key;
+}
+
+// src/components/file.ts
+async function renderFilePreview(container, resourceId, state, options = {}) {
+  const { fileName = "", isReadonly = false, deps = null } = options;
+  if (!isReadonly && deps && (!deps.picker || !deps.fileUploadHandler || !deps.dragHandler)) {
+    throw new Error(
+      "renderFilePreview: missing deps {picker, fileUploadHandler, dragHandler}"
+    );
+  }
+  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";
+  const meta = state.resourceIndex.get(resourceId);
+  if (meta && meta.file && meta.file instanceof File) {
+    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/")) {
+      const videoUrl = URL.createObjectURL(meta.file);
+      container.onclick = null;
+      const newContainer = container.cloneNode(false);
+      if (container.parentNode) {
+        container.parentNode.replaceChild(newContainer, container);
+      }
+      container = newContainer;
+      container.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}">
+            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", state)}
+            </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>
+      `;
+      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();
+          state.resourceIndex.delete(resourceId);
+          const hiddenInput = container.parentElement?.querySelector(
+            'input[type="hidden"]'
+          );
+          if (hiddenInput) {
+            hiddenInput.value = "";
+          }
+          if (deps?.fileUploadHandler) {
+            container.onclick = deps.fileUploadHandler;
+          }
+          if (deps?.dragHandler) {
+            setupDragAndDrop(container, deps.dragHandler);
+          }
+          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", state)}</div>
+            </div>
+          `;
+        };
+      }
+    } else {
+      container.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">${fileName}</div></div>`;
+    }
+    if (!isReadonly && !(meta && meta.type && meta.type.startsWith("video/"))) {
+      addDeleteButton(container, state, () => {
+        state.resourceIndex.delete(resourceId);
+        const hiddenInput = container.parentElement?.querySelector(
+          'input[type="hidden"]'
+        );
+        if (hiddenInput) {
+          hiddenInput.value = "";
+        }
+        container.innerHTML = `
+          <div class="flex flex-col items-center justify-center h-full text-gray-400">
+            <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", state)}</div>
+          </div>
+        `;
+      });
+    }
+  } else if (state.config.getThumbnail) {
+    try {
+      const thumbnailUrl = await state.config.getThumbnail(resourceId);
+      if (thumbnailUrl) {
+        clear(container);
+        img.src = thumbnailUrl;
+        container.appendChild(img);
+      } else {
+        setEmptyFileContainer(container, state);
+      }
+    } catch (error) {
+      console.error("Failed to get thumbnail:", error);
+      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">${fileName || "Preview unavailable"}</div>
+        </div>
+      `;
+    }
+  } else {
+    setEmptyFileContainer(container, state);
+  }
+}
+async function renderFilePreviewReadonly(resourceId, state, fileName) {
+  const meta = state.resourceIndex.get(resourceId);
+  const actualFileName = meta?.name || resourceId.split("/").pop() || "file";
+  const isPSD = actualFileName.toLowerCase().match(/\.psd$/);
+  const fileResult = document.createElement("div");
+  fileResult.className = isPSD ? "space-y-2" : "space-y-3";
+  const previewContainer = document.createElement("div");
+  if (isPSD) {
+    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 {
+    previewContainer.className = "bg-gray-100 rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity";
+  }
+  const isImage = !isPSD && (meta?.type?.startsWith("image/") || actualFileName.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp)$/));
+  const isVideo = meta?.type?.startsWith("video/") || actualFileName.toLowerCase().match(/\.(mp4|webm|avi|mov)$/);
+  if (isImage) {
+    if (state.config.getThumbnail) {
+      try {
+        const thumbnailUrl = await state.config.getThumbnail(resourceId);
+        if (thumbnailUrl) {
+          previewContainer.innerHTML = `<img src="${thumbnailUrl}" alt="${actualFileName}" class="w-full h-auto">`;
+        } else {
+          previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">\u{1F5BC}\uFE0F</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">\u{1F5BC}\uFE0F</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">\u{1F5BC}\uFE0F</div><div class="text-sm">${actualFileName}</div></div></div>`;
+    }
+  } else if (isVideo) {
+    if (state.config.getThumbnail) {
+      try {
+        const videoUrl = await 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"}">
+                \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-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">\u{1F3A5}</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">\u{1F3A5}</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">\u{1F3A5}</div><div class="text-sm">${actualFileName}</div></div></div>`;
+    }
+  } else {
+    const fileIcon = isPSD ? "\u{1F3A8}" : "\u{1F4C1}";
+    const fileDescription = isPSD ? "PSD File" : "Document";
+    if (isPSD) {
+      previewContainer.innerHTML = `
+        <div class="flex items-center space-x-3">
+          <div class="text-3xl text-gray-400">${fileIcon}</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>
+        </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">${fileIcon}</div><div class="text-sm">${actualFileName}</div><div class="text-xs text-gray-500 mt-1">${fileDescription}</div></div></div>`;
+    }
+  }
+  const fileNameElement = document.createElement("p");
+  fileNameElement.className = isPSD ? "hidden" : "text-sm font-medium text-gray-900 text-center";
+  fileNameElement.textContent = actualFileName;
+  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 = t("downloadButton", state);
+  downloadButton.onclick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (state.config.downloadFile) {
+      state.config.downloadFile(resourceId, actualFileName);
+    } else {
+      forceDownload(resourceId, actualFileName, state);
+    }
+  };
+  fileResult.appendChild(previewContainer);
+  fileResult.appendChild(fileNameElement);
+  fileResult.appendChild(downloadButton);
+  return fileResult;
+}
+function renderResourcePills(container, rids, state, onRemove) {
+  clear(container);
+  const isInitialRender = !container.classList.contains("grid");
+  if ((!rids || rids.length === 0) && isInitialRender) {
+    const gridContainer = document.createElement("div");
+    gridContainer.className = "grid grid-cols-4 gap-3 mb-3";
+    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);
+      slot.onclick = () => {
+        let filesWrapper = container.parentElement;
+        while (filesWrapper && !filesWrapper.classList.contains("space-y-2")) {
+          filesWrapper = filesWrapper.parentElement;
+        }
+        if (!filesWrapper && container.classList.contains("space-y-2")) {
+          filesWrapper = container;
+        }
+        const fileInput = filesWrapper?.querySelector(
+          'input[type="file"]'
+        );
+        if (fileInput) fileInput.click();
+      };
+      gridContainer.appendChild(slot);
+    }
+    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", state);
+    uploadLink.onclick = (e) => {
+      e.stopPropagation();
+      let filesWrapper = container.parentElement;
+      while (filesWrapper && !filesWrapper.classList.contains("space-y-2")) {
+        filesWrapper = filesWrapper.parentElement;
+      }
+      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", state)}`));
+    container.appendChild(gridContainer);
+    container.appendChild(textContainer);
+    return;
+  }
+  container.className = "files-list grid grid-cols-4 gap-3 mt-2";
+  const currentImagesCount = rids ? rids.length : 0;
+  const rowsNeeded = Math.floor(currentImagesCount / 4) + 1;
+  const slotsNeeded = rowsNeeded * 4;
+  for (let i = 0; i < slotsNeeded; i++) {
+    const slot = document.createElement("div");
+    if (rids && i < rids.length) {
+      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;
+      renderThumbnailForResource(slot, rid, meta, state).catch((err) => {
+        console.error("Failed to render thumbnail:", err);
+        slot.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>`;
+      });
+      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", state);
+        removeBtn.onclick = (e) => {
+          e.stopPropagation();
+          onRemove(rid);
+        };
+        overlay.appendChild(removeBtn);
+        slot.appendChild(overlay);
+      }
+    } else {
+      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 = () => {
+        let filesWrapper = container.parentElement;
+        while (filesWrapper && !filesWrapper.classList.contains("space-y-2")) {
+          filesWrapper = filesWrapper.parentElement;
+        }
+        if (!filesWrapper && container.classList.contains("space-y-2")) {
+          filesWrapper = container;
+        }
+        const fileInput = filesWrapper?.querySelector(
+          'input[type="file"]'
+        );
+        if (fileInput) fileInput.click();
+      };
+    }
+    container.appendChild(slot);
+  }
+}
+async function renderThumbnailForResource(slot, rid, meta, state) {
+  if (meta && meta.type?.startsWith("image/")) {
+    if (meta.file && meta.file instanceof File) {
+      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) {
+      const url = await 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>`;
+      }
+    } 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) {
+      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}">
+          </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 (state.config.getThumbnail) {
+      const videoUrl = await 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">\u{1F4C1}</div>
+      <div class="text-xs">${meta?.name || "File"}</div>
+    </div>`;
+  }
+}
+function setEmptyFileContainer(fileContainer, state) {
+  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", state)}</div>
+    </div>
+  `;
+}
+async function handleFileSelect(file, container, fieldName, state, deps = null, instance) {
+  let rid;
+  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,
+    uploadedAt: /* @__PURE__ */ new Date(),
+    file
+    // Store the file object for local preview
+  });
+  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, state, {
+    fileName: file.name,
+    isReadonly: false,
+    deps
+  }).catch(console.error);
+  if (instance && !state.config.readonly) {
+    instance.triggerOnChange(fieldName, rid);
+  }
+}
+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");
+    if (e.dataTransfer?.files) {
+      dropHandler(e.dataTransfer.files);
+    }
+  });
+}
+function addDeleteButton(container, state, onDelete) {
+  const existingOverlay = container.querySelector(".delete-overlay");
+  if (existingOverlay) {
+    existingOverlay.remove();
+  }
+  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", state);
+  deleteBtn.onclick = (e) => {
+    e.stopPropagation();
+    onDelete();
+  };
+  overlay.appendChild(deleteBtn);
+  container.appendChild(overlay);
+}
+async function uploadSingleFile(file, state) {
+  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()"
+    );
+  }
+}
+async function forceDownload(resourceId, fileName, state) {
+  let fileUrl = null;
+  if (state.config.getDownloadUrl) {
+    fileUrl = state.config.getDownloadUrl(resourceId);
+  } else if (state.config.getThumbnail) {
+    fileUrl = await state.config.getThumbnail(resourceId);
+  }
+  if (fileUrl) {
+    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);
+  }
+}
+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";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    setTimeout(() => {
+      URL.revokeObjectURL(blobUrl);
+    }, 100);
+  } catch (error) {
+    throw new Error(`Blob download failed: ${error.message}`);
+  }
+}
+function addPrefillFilesToIndex(initialFiles, state) {
+  if (initialFiles.length > 0) {
+    initialFiles.forEach((resourceId) => {
+      if (!state.resourceIndex.has(resourceId)) {
+        const filename = resourceId.split("/").pop() || "file";
+        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,
+          uploadedAt: /* @__PURE__ */ new Date(),
+          file: void 0
+        });
+      }
+    });
+  }
+}
+function handleInitialFileData(initial, fileContainer, pathKey, fileWrapper, state, deps) {
+  if (!state.resourceIndex.has(initial)) {
+    const filename = initial.split("/").pop() || "file";
+    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,
+      uploadedAt: /* @__PURE__ */ new Date(),
+      file: void 0
+    });
+  }
+  renderFilePreview(fileContainer, initial, state, {
+    fileName: initial,
+    isReadonly: false,
+    deps
+  }).catch(console.error);
+  const hiddenInput = document.createElement("input");
+  hiddenInput.type = "hidden";
+  hiddenInput.name = pathKey;
+  hiddenInput.value = initial;
+  fileWrapper.appendChild(hiddenInput);
+}
+function setupFilesDropHandler(filesContainer, initialFiles, state, updateCallback, pathKey, instance) {
+  setupDragAndDrop(filesContainer, async (files) => {
+    const arr = Array.from(files);
+    for (const file of arr) {
+      const rid = await uploadSingleFile(file, state);
+      state.resourceIndex.set(rid, {
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        uploadedAt: /* @__PURE__ */ new Date(),
+        file: void 0
+      });
+      initialFiles.push(rid);
+    }
+    updateCallback();
+    if (instance && pathKey && !state.config.readonly) {
+      instance.triggerOnChange(pathKey, initialFiles);
+    }
+  });
+}
+function setupFilesPickerHandler(filesPicker, initialFiles, state, updateCallback, pathKey, instance) {
+  filesPicker.onchange = async () => {
+    if (filesPicker.files) {
+      for (const file of Array.from(filesPicker.files)) {
+        const rid = await uploadSingleFile(file, state);
+        state.resourceIndex.set(rid, {
+          name: file.name,
+          type: file.type,
+          size: file.size,
+          uploadedAt: /* @__PURE__ */ new Date(),
+          file: void 0
+        });
+        initialFiles.push(rid);
+      }
+    }
+    updateCallback();
+    filesPicker.value = "";
+    if (instance && pathKey && !state.config.readonly) {
+      instance.triggerOnChange(pathKey, initialFiles);
+    }
+  };
+}
+function renderFileElement(element, ctx, wrapper, pathKey) {
+  const state = ctx.state;
+  if (state.config.readonly) {
+    const initial = ctx.prefill[element.key];
+    if (initial) {
+      renderFilePreviewReadonly(initial, state).then((filePreview) => {
+        wrapper.appendChild(filePreview);
+      }).catch((err) => {
+        console.error("Failed to render file preview:", err);
+        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">Preview unavailable</div>`;
+        wrapper.appendChild(emptyState);
+      });
+    } 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", state)}</div>`;
+      wrapper.appendChild(emptyState);
+    }
+  } else {
+    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";
+    if (element.accept) {
+      picker.accept = typeof element.accept === "string" ? element.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];
+    const fileUploadHandler = () => picker.click();
+    const dragHandler = (files) => {
+      if (files.length > 0) {
+        const deps = { picker, fileUploadHandler, dragHandler };
+        handleFileSelect(files[0], fileContainer, pathKey, state, deps, ctx.instance);
+      }
+    };
+    if (initial) {
+      handleInitialFileData(
+        initial,
+        fileContainer,
+        pathKey,
+        fileWrapper,
+        state,
+        {
+          picker,
+          fileUploadHandler,
+          dragHandler
+        }
+      );
+    } else {
+      setEmptyFileContainer(fileContainer, state);
+    }
+    fileContainer.onclick = fileUploadHandler;
+    setupDragAndDrop(fileContainer, dragHandler);
+    picker.onchange = () => {
+      if (picker.files && picker.files.length > 0) {
+        const deps = { picker, fileUploadHandler, dragHandler };
+        handleFileSelect(picker.files[0], fileContainer, pathKey, state, deps, ctx.instance);
+      }
+    };
+    fileWrapper.appendChild(fileContainer);
+    fileWrapper.appendChild(picker);
+    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", state)}</span> ${t("dragDropTextSingle", state)}`;
+    const uploadSpan = uploadText.querySelector("span");
+    if (uploadSpan) {
+      uploadSpan.onclick = () => picker.click();
+    }
+    fileWrapper.appendChild(uploadText);
+    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 renderFilesElement(element, ctx, wrapper, pathKey) {
+  const state = ctx.state;
+  if (state.config.readonly) {
+    const resultsWrapper = document.createElement("div");
+    resultsWrapper.className = "space-y-4";
+    const initialFiles = ctx.prefill[element.key] || [];
+    if (initialFiles.length > 0) {
+      initialFiles.forEach((resourceId) => {
+        renderFilePreviewReadonly(resourceId, state).then((filePreview) => {
+          resultsWrapper.appendChild(filePreview);
+        }).catch((err) => {
+          console.error("Failed to render file preview:", err);
+        });
+      });
+    } 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", state)}</div></div>`;
+    }
+    wrapper.appendChild(resultsWrapper);
+  } else {
+    let updateFilesList2 = function() {
+      renderResourcePills(list, initialFiles, state, (ridToRemove) => {
+        const index = initialFiles.indexOf(ridToRemove);
+        if (index > -1) {
+          initialFiles.splice(index, 1);
+        }
+        updateFilesList2();
+      });
+    };
+    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";
+    if (element.accept) {
+      filesPicker.accept = typeof element.accept === "string" ? element.accept : element.accept.extensions?.map((ext) => `.${ext}`).join(",") || "";
+    }
+    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] || [];
+    addPrefillFilesToIndex(initialFiles, state);
+    updateFilesList2();
+    setupFilesDropHandler(filesContainer, initialFiles, state, updateFilesList2, pathKey, ctx.instance);
+    setupFilesPickerHandler(filesPicker, initialFiles, state, updateFilesList2, pathKey, ctx.instance);
+    filesContainer.appendChild(list);
+    filesWrapper.appendChild(filesContainer);
+    filesWrapper.appendChild(filesPicker);
+    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) {
+  const state = ctx.state;
+  const minFiles = element.minCount ?? 0;
+  const maxFiles = element.maxCount ?? Infinity;
+  if (state.config.readonly) {
+    const resultsWrapper = document.createElement("div");
+    resultsWrapper.className = "space-y-4";
+    const initialFiles = ctx.prefill[element.key] || [];
+    if (initialFiles.length > 0) {
+      initialFiles.forEach((resourceId) => {
+        renderFilePreviewReadonly(resourceId, state).then((filePreview) => {
+          resultsWrapper.appendChild(filePreview);
+        }).catch((err) => {
+          console.error("Failed to render file preview:", err);
+        });
+      });
+    } 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", state)}</div></div>`;
+    }
+    wrapper.appendChild(resultsWrapper);
+  } else {
+    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";
+    if (element.accept) {
+      filesPicker.accept = typeof element.accept === "string" ? element.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]] : [];
+    addPrefillFilesToIndex(initialFiles, state);
+    const updateFilesDisplay = () => {
+      renderResourcePills(filesContainer, initialFiles, state, (index) => {
+        initialFiles.splice(initialFiles.indexOf(index), 1);
+        updateFilesDisplay();
+      });
+      const countInfo = document.createElement("div");
+      countInfo.className = "text-xs text-gray-500 mt-2 file-count-info";
+      const countText = `${initialFiles.length} file${initialFiles.length !== 1 ? "s" : ""}`;
+      const minMaxText = minFiles > 0 || maxFiles < Infinity ? ` (${minFiles}-${maxFiles} allowed)` : "";
+      countInfo.textContent = countText + minMaxText;
+      const existingCount = filesWrapper.querySelector(".file-count-info");
+      if (existingCount) existingCount.remove();
+      filesWrapper.appendChild(countInfo);
+    };
+    setupFilesDropHandler(filesContainer, initialFiles, state, updateFilesDisplay, pathKey, ctx.instance);
+    setupFilesPickerHandler(filesPicker, initialFiles, state, updateFilesDisplay, pathKey, ctx.instance);
+    updateFilesDisplay();
+    wrapper.appendChild(filesWrapper);
+  }
+}
+function validateFileElement(element, key, context) {
+  const errors = [];
+  const { scopeRoot, skipValidation, path } = context;
+  const validateFileCount = (key2, resourceIds, element2) => {
+    if (skipValidation) return;
+    const minFiles = "minCount" in element2 ? element2.minCount ?? 0 : 0;
+    const maxFiles = "maxCount" in element2 ? element2.maxCount ?? Infinity : Infinity;
+    if (element2.required && resourceIds.length === 0) {
+      errors.push(`${key2}: required`);
+    }
+    if (resourceIds.length < minFiles) {
+      errors.push(`${key2}: minimum ${minFiles} files required`);
+    }
+    if (resourceIds.length > maxFiles) {
+      errors.push(`${key2}: maximum ${maxFiles} files allowed`);
+    }
+  };
+  if ("multiple" in element && element.multiple) {
+    const fullKey = pathJoin(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);
+        }
+      });
+    }
+    validateFileCount(key, resourceIds, element);
+    return { value: resourceIds, errors };
+  } else {
+    const input = scopeRoot.querySelector(
+      `input[name$="${key}"][type="hidden"]`
+    );
+    const rid = input?.value ?? "";
+    if (!skipValidation && element.required && rid === "") {
+      errors.push(`${key}: required`);
+      return { value: null, errors };
+    }
+    return { value: rid || null, errors };
+  }
+}
+function updateFileField(element, fieldPath, value, context) {
+  const { scopeRoot, state } = context;
+  if ("multiple" in element && element.multiple) {
+    if (!Array.isArray(value)) {
+      console.warn(
+        `updateFileField: Expected array for multiple file field "${fieldPath}", got ${typeof value}`
+      );
+      return;
+    }
+    value.forEach((resourceId) => {
+      if (resourceId && typeof resourceId === "string") {
+        if (!state.resourceIndex.has(resourceId)) {
+          const filename = resourceId.split("/").pop() || "file";
+          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(resourceId, {
+            name: filename,
+            type: fileType,
+            size: 0,
+            uploadedAt: /* @__PURE__ */ new Date(),
+            file: void 0
+          });
+        }
+      }
+    });
+    console.info(
+      `updateFileField: Multiple file field "${fieldPath}" updated. Preview update requires re-render.`
+    );
+  } else {
+    const hiddenInput = scopeRoot.querySelector(
+      `input[name="${fieldPath}"][type="hidden"]`
+    );
+    if (!hiddenInput) {
+      console.warn(
+        `updateFileField: Hidden input not found for file field "${fieldPath}"`
+      );
+      return;
+    }
+    hiddenInput.value = value != null ? String(value) : "";
+    if (value && typeof value === "string") {
+      if (!state.resourceIndex.has(value)) {
+        const filename = value.split("/").pop() || "file";
+        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(value, {
+          name: filename,
+          type: fileType,
+          size: 0,
+          uploadedAt: /* @__PURE__ */ new Date(),
+          file: void 0
+        });
+      }
+      console.info(
+        `updateFileField: File field "${fieldPath}" updated. Preview update requires re-render.`
+      );
+    }
+  }
+}
+
+// src/components/container.ts
+var renderElementFunc = null;
+function setRenderElement(fn) {
+  renderElementFunc = fn;
+}
+function renderElement(element, ctx) {
+  if (!renderElementFunc) {
+    throw new Error(
+      "renderElement not initialized. Import from components/index.ts"
+    );
+  }
+  return renderElementFunc(element, ctx);
+}
+function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
+  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);
+  const subCtx = {
+    path: pathJoin(ctx.path, element.key),
+    prefill: ctx.prefill?.[element.key] || {},
+    state: ctx.state
+  };
+  element.elements.forEach((child) => {
+    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) {
+  const state = ctx.state;
+  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", state);
+    add.onclick = () => {
+      if (countItems() < max) {
+        const idx = countItems();
+        const subCtx = {
+          state: ctx.state,
+          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) => {
+          if (!child.hidden) {
+            item.appendChild(renderElement(child, subCtx));
+          }
+        });
+        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 = "\xD7";
+          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 ? "\u221E" : max})</span>`;
+  };
+  if (!state.config.readonly) {
+    right.appendChild(createAddButton());
+  }
+  if (pre && Array.isArray(pre)) {
+    pre.forEach((prefillObj, idx) => {
+      const subCtx = {
+        state: ctx.state,
+        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) => {
+        if (!child.hidden) {
+          item.appendChild(renderElement(child, subCtx));
+        }
+      });
+      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 = "\xD7";
+        rem.onclick = () => {
+          item.remove();
+          updateAddButton();
+        };
+        item.style.position = "relative";
+        item.appendChild(rem);
+      }
+      itemsWrap.appendChild(item);
+    });
+  }
+  if (!state.config.readonly) {
+    while (countItems() < min) {
+      const idx = countItems();
+      const subCtx = {
+        state: ctx.state,
+        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) => {
+        if (!child.hidden) {
+          item.appendChild(renderElement(child, subCtx));
+        }
+      });
+      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 = "\xD7";
+      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);
+}
+var validateElementFunc = null;
+function setValidateElement(fn) {
+  validateElementFunc = fn;
+}
+function validateElement(element, ctx, customScopeRoot) {
+  if (!validateElementFunc) {
+    throw new Error(
+      "validateElement not initialized. Should be set from FormBuilderInstance"
+    );
+  }
+  return validateElementFunc(element, ctx, customScopeRoot);
+}
+function validateContainerElement(element, key, context) {
+  const errors = [];
+  const { scopeRoot, skipValidation, path } = context;
+  if (!("elements" in element)) {
+    return { value: null, errors };
+  }
+  const validateContainerCount = (key2, items, element2) => {
+    if (skipValidation) return;
+    const minItems = "minCount" in element2 ? element2.minCount ?? 0 : 0;
+    const maxItems = "maxCount" in element2 ? element2.maxCount ?? Infinity : Infinity;
+    if (element2.required && items.length === 0) {
+      errors.push(`${key2}: required`);
+    }
+    if (items.length < minItems) {
+      errors.push(`${key2}: minimum ${minItems} items required`);
+    }
+    if (items.length > maxItems) {
+      errors.push(`${key2}: maximum ${maxItems} items allowed`);
+    }
+  };
+  if ("multiple" in element && element.multiple) {
+    const items = [];
+    const allContainerWrappers = scopeRoot.querySelectorAll(
+      "[data-container-item]"
+    );
+    const containerWrappers = Array.from(allContainerWrappers).filter((el) => {
+      const attr = el.getAttribute("data-container-item");
+      return attr?.startsWith(`${key}[`);
+    });
+    const itemCount = containerWrappers.length;
+    for (let i = 0; i < itemCount; i++) {
+      const itemData = {};
+      const itemContainer = scopeRoot.querySelector(
+        `[data-container-item="${key}[${i}]"]`
+      ) || scopeRoot;
+      element.elements.forEach((child) => {
+        if (child.hidden || child.type === "hidden") {
+          itemData[child.key] = child.default !== void 0 ? child.default : null;
+        } else {
+          const childKey = `${key}[${i}].${child.key}`;
+          itemData[child.key] = validateElement(
+            { ...child, key: childKey },
+            { path },
+            itemContainer
+          );
+        }
+      });
+      items.push(itemData);
+    }
+    validateContainerCount(key, items, element);
+    return { value: items, errors };
+  } else {
+    const containerData = {};
+    const containerContainer = scopeRoot.querySelector(`[data-container="${key}"]`) || scopeRoot;
+    element.elements.forEach((child) => {
+      if (child.hidden || child.type === "hidden") {
+        containerData[child.key] = child.default !== void 0 ? child.default : null;
+      } else {
+        const childKey = `${key}.${child.key}`;
+        containerData[child.key] = validateElement(
+          { ...child, key: childKey },
+          { path },
+          containerContainer
+        );
+      }
+    });
+    return { value: containerData, errors };
+  }
+}
+function updateContainerField(element, fieldPath, value, context) {
+  const { instance, scopeRoot } = context;
+  if (!("elements" in element)) {
+    return;
+  }
+  if ("multiple" in element && element.multiple) {
+    if (!Array.isArray(value)) {
+      console.warn(
+        `updateContainerField: Expected array for multiple container field "${fieldPath}", got ${typeof value}`
+      );
+      return;
+    }
+    value.forEach((itemValue, index) => {
+      if (isPlainObject(itemValue)) {
+        element.elements.forEach((childElement) => {
+          const childKey = childElement.key;
+          const childPath = `${fieldPath}[${index}].${childKey}`;
+          const childValue = itemValue[childKey];
+          if (childValue !== void 0) {
+            instance.updateField(childPath, childValue);
+          }
+        });
+      }
+    });
+    const existingContainers = scopeRoot.querySelectorAll(
+      `[data-container-item^="${fieldPath}["]`
+    );
+    if (value.length !== existingContainers.length) {
+      console.warn(
+        `updateContainerField: Multiple container field "${fieldPath}" item count mismatch. Consider re-rendering for add/remove.`
+      );
+    }
+  } else {
+    if (!isPlainObject(value)) {
+      console.warn(
+        `updateContainerField: Expected object for container field "${fieldPath}", got ${typeof value}`
+      );
+      return;
+    }
+    element.elements.forEach((childElement) => {
+      const childKey = childElement.key;
+      const childPath = `${fieldPath}.${childKey}`;
+      const childValue = value[childKey];
+      if (childValue !== void 0) {
+        instance.updateField(childPath, childValue);
+      }
+    });
+  }
+}
+function renderGroupElement(element, ctx, wrapper, pathKey) {
+  if (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: "${element.key}"`
+    );
+  }
+  const containerElement = {
+    key: element.key,
+    label: element.label,
+    description: element.description,
+    hint: element.hint,
+    required: element.required,
+    hidden: element.hidden,
+    default: element.default,
+    actions: element.actions,
+    elements: element.elements,
+    // Translate repeat pattern to multiple pattern
+    multiple: !!(element.repeat && isPlainObject(element.repeat)),
+    minCount: element.repeat?.min,
+    maxCount: element.repeat?.max
+  };
+  if (containerElement.multiple) {
+    renderMultipleContainerElement(containerElement, ctx, wrapper);
+  } else {
+    renderSingleContainerElement(containerElement, ctx, wrapper, pathKey);
+  }
+}
+function translateGroupToContainer(element) {
+  const groupElement = element;
+  return {
+    type: "container",
+    key: groupElement.key,
+    label: groupElement.label,
+    description: groupElement.description,
+    hint: groupElement.hint,
+    required: groupElement.required,
+    hidden: groupElement.hidden,
+    default: groupElement.default,
+    actions: groupElement.actions,
+    elements: groupElement.elements,
+    // Translate repeat pattern to multiple pattern
+    multiple: !!(groupElement.repeat && isPlainObject(groupElement.repeat)),
+    minCount: groupElement.repeat?.min,
+    maxCount: groupElement.repeat?.max
+  };
+}
+function validateGroupElement(element, key, context) {
+  if (typeof console !== "undefined" && console.warn) {
+    console.warn(
+      `[Form Builder] The "group" field type is deprecated. Please use type: "container" instead. Field key: "${key}"`
+    );
+  }
+  const containerElement = translateGroupToContainer(element);
+  return validateContainerElement(containerElement, key, context);
+}
+function updateGroupField(element, fieldPath, value, context) {
+  if (typeof console !== "undefined" && console.warn) {
+    console.warn(
+      `[Form Builder] The "group" field type is deprecated. Please use type: "container" instead. Field path: "${fieldPath}"`
+    );
+  }
+  const containerElement = translateGroupToContainer(element);
+  return updateContainerField(containerElement, fieldPath, value, context);
+}
+
+// src/components/index.ts
+function showTooltip(tooltipId, button) {
+  const tooltip = document.getElementById(tooltipId);
+  if (!tooltip) return;
+  const isCurrentlyVisible = !tooltip.classList.contains("hidden");
+  document.querySelectorAll('[id^="tooltip-"]').forEach((t2) => {
+    t2.classList.add("hidden");
+  });
+  if (isCurrentlyVisible) {
+    return;
+  }
+  const rect = button.getBoundingClientRect();
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  if (tooltip && tooltip.parentElement !== document.body) {
+    document.body.appendChild(tooltip);
+  }
+  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;
+  if (left + tooltipRect.width > viewportWidth) {
+    left = rect.right - tooltipRect.width;
+  }
+  if (top + tooltipRect.height > viewportHeight) {
+    top = rect.top - tooltipRect.height - 5;
+  }
+  if (left < 10) {
+    left = 10;
+  }
+  if (top < 10) {
+    top = rect.bottom + 5;
+  }
+  tooltip.style.left = `${left}px`;
+  tooltip.style.top = `${top}px`;
+  tooltip.classList.remove("hidden");
+  setTimeout(() => {
+    tooltip.classList.add("hidden");
+  }, 25e3);
+}
+if (typeof document !== "undefined") {
+  document.addEventListener("click", (e) => {
+    const target = e.target;
+    const isInfoButton = target.closest("button") && target.closest("button").onclick;
+    const isTooltip = target.closest('[id^="tooltip-"]');
+    if (!isInfoButton && !isTooltip) {
+      document.querySelectorAll('[id^="tooltip-"]').forEach((tooltip) => {
+        tooltip.classList.add("hidden");
+      });
+    }
+  });
+}
+function renderElement2(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);
+  if (element.description || element.hint) {
+    const infoBtn = document.createElement("button");
+    infoBtn.type = "button";
+    infoBtn.className = "ml-2 text-gray-400 hover:text-gray-600";
+    infoBtn.innerHTML = '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>';
+    const 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 ("multiple" in element && element.multiple) {
+        renderMultipleTextElement(element, ctx, wrapper, pathKey);
+      } else {
+        renderTextElement(element, ctx, wrapper, pathKey);
+      }
+      break;
+    case "textarea":
+      if ("multiple" in element && element.multiple) {
+        renderMultipleTextareaElement(element, ctx, wrapper, pathKey);
+      } else {
+        renderTextareaElement(element, ctx, wrapper, pathKey);
+      }
+      break;
+    case "number":
+      if ("multiple" in element && element.multiple) {
+        renderMultipleNumberElement(element, ctx, wrapper, pathKey);
+      } else {
+        renderNumberElement(element, ctx, wrapper, pathKey);
+      }
+      break;
+    case "select":
+      if ("multiple" in element && element.multiple) {
+        renderMultipleSelectElement(element, ctx, wrapper, pathKey);
+      } else {
+        renderSelectElement(element, ctx, wrapper, pathKey);
+      }
+      break;
+    case "file":
+      if ("multiple" in element && 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":
+      if ("multiple" in element && element.multiple) {
+        renderMultipleContainerElement(element, ctx, wrapper);
+      } 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);
+    }
+  }
+  return wrapper;
+}
+setRenderElement(renderElement2);
+
+// src/instance/state.ts
+var defaultConfig = {
+  uploadFile: null,
+  downloadFile: null,
+  getThumbnail: null,
+  getDownloadUrl: null,
+  actionHandler: null,
+  onChange: null,
+  onFieldChange: null,
+  debounceMs: 300,
+  enableFilePreview: true,
+  maxPreviewSize: "200px",
+  readonly: false,
+  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 createInstanceState(config) {
+  return {
+    schema: null,
+    formRoot: null,
+    resourceIndex: /* @__PURE__ */ new Map(),
+    externalActions: null,
+    version: "1.0.0",
+    config: {
+      ...defaultConfig,
+      ...config
+    },
+    debounceTimer: null
+  };
+}
+function generateInstanceId() {
+  const timestamp = Date.now().toString(36);
+  const random = Math.random().toString(36).substring(2, 9);
+  return `inst-${timestamp}-${random}`;
+}
+
+// src/styles/theme.ts
+var defaultTheme = {
+  // Colors - matching Tailwind defaults
+  primaryColor: "#3b82f6",
+  // blue-500
+  primaryHoverColor: "#2563eb",
+  // blue-600
+  errorColor: "#ef4444",
+  // red-500
+  errorHoverColor: "#dc2626",
+  // red-600
+  successColor: "#10b981",
+  // green-500
+  borderColor: "#d1d5db",
+  // gray-300
+  borderHoverColor: "#9ca3af",
+  // gray-400
+  borderFocusColor: "#3b82f6",
+  // blue-500
+  backgroundColor: "#ffffff",
+  // white
+  backgroundHoverColor: "#f9fafb",
+  // gray-50
+  backgroundReadonlyColor: "#f3f4f6",
+  // gray-100
+  textColor: "#1f2937",
+  // gray-800
+  textSecondaryColor: "#6b7280",
+  // gray-500
+  textPlaceholderColor: "#9ca3af",
+  // gray-400
+  textDisabledColor: "#d1d5db",
+  // gray-300
+  // Button colors
+  buttonBgColor: "#3b82f6",
+  // blue-500
+  buttonTextColor: "#ffffff",
+  // white
+  buttonBorderColor: "#2563eb",
+  // blue-600
+  buttonHoverBgColor: "#2563eb",
+  // blue-600
+  buttonHoverBorderColor: "#1d4ed8",
+  // blue-700
+  // Action button colors
+  actionBgColor: "#ffffff",
+  // white
+  actionTextColor: "#374151",
+  // gray-700
+  actionBorderColor: "#e5e7eb",
+  // gray-200
+  actionHoverBgColor: "#f9fafb",
+  // gray-50
+  actionHoverBorderColor: "#d1d5db",
+  // gray-300
+  // File upload colors
+  fileUploadBgColor: "#f3f4f6",
+  // gray-100
+  fileUploadBorderColor: "#d1d5db",
+  // gray-300
+  fileUploadTextColor: "#9ca3af",
+  // gray-400
+  fileUploadHoverBorderColor: "#3b82f6",
+  // blue-500
+  // Spacing
+  inputPaddingX: "0.75rem",
+  // 3 (12px)
+  inputPaddingY: "0.5rem",
+  // 2 (8px)
+  borderRadius: "0.5rem",
+  // rounded-lg (8px)
+  borderWidth: "1px",
+  // Typography
+  fontSize: "0.875rem",
+  // text-sm (14px)
+  fontSizeSmall: "0.75rem",
+  // text-xs (12px)
+  fontSizeExtraSmall: "0.625rem",
+  // 10px
+  fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  fontWeightNormal: "400",
+  fontWeightMedium: "500",
+  // Focus ring
+  focusRingWidth: "2px",
+  focusRingColor: "#3b82f6",
+  // blue-500
+  focusRingOpacity: "0.5",
+  // Transitions
+  transitionDuration: "200ms"
+};
+function generateCSSVariables(theme) {
+  const mergedTheme = { ...defaultTheme, ...theme };
+  const cssVars = [];
+  Object.entries(mergedTheme).forEach(([key, value]) => {
+    const kebabKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+    cssVars.push(`  --fb-${kebabKey}: ${value};`);
+  });
+  return cssVars.join("\n");
+}
+function injectThemeVariables(container, theme) {
+  const cssVariables = generateCSSVariables(theme);
+  let styleTag = container.querySelector(
+    "style[data-fb-theme]"
+  );
+  if (!styleTag) {
+    styleTag = document.createElement("style");
+    styleTag.setAttribute("data-fb-theme", "true");
+    container.appendChild(styleTag);
+  }
+  styleTag.textContent = `
+    [data-fb-root="true"] {
+${cssVariables}
+    }
+  `;
+}
+var exampleThemes = {
+  default: defaultTheme,
+  dark: {
+    ...defaultTheme,
+    primaryColor: "#60a5fa",
+    // blue-400
+    primaryHoverColor: "#3b82f6",
+    // blue-500
+    borderColor: "#4b5563",
+    // gray-600
+    borderHoverColor: "#6b7280",
+    // gray-500
+    borderFocusColor: "#60a5fa",
+    // blue-400
+    backgroundColor: "#1f2937",
+    // gray-800
+    backgroundHoverColor: "#374151",
+    // gray-700
+    backgroundReadonlyColor: "#111827",
+    // gray-900
+    textColor: "#f9fafb",
+    // gray-50
+    textSecondaryColor: "#9ca3af",
+    // gray-400
+    textPlaceholderColor: "#6b7280",
+    // gray-500
+    fileUploadBgColor: "#374151",
+    // gray-700
+    fileUploadBorderColor: "#4b5563",
+    // gray-600
+    fileUploadTextColor: "#9ca3af"
+    // gray-400
+  },
+  klein: {
+    ...defaultTheme,
+    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'
+  }
+};
+
+// src/utils/styles.ts
+function applyActionButtonStyles(button, isFormLevel = false) {
+  button.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: ${isFormLevel ? "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);
+  `;
+  button.addEventListener("mouseenter", () => {
+    button.style.backgroundColor = "var(--fb-action-hover-bg-color)";
+    button.style.borderColor = "var(--fb-action-hover-border-color)";
+  });
+  button.addEventListener("mouseleave", () => {
+    button.style.backgroundColor = "var(--fb-action-bg-color)";
+    button.style.borderColor = "var(--fb-action-border-color)";
+  });
+}
+
+// src/components/registry.ts
+var componentRegistry = {
+  text: {
+    validate: validateTextElement,
+    update: updateTextField
+  },
+  textarea: {
+    validate: validateTextareaElement,
+    update: updateTextareaField
+  },
+  number: {
+    validate: validateNumberElement,
+    update: updateNumberField
+  },
+  select: {
+    validate: validateSelectElement,
+    update: updateSelectField
+  },
+  file: {
+    validate: validateFileElement,
+    update: updateFileField
+  },
+  files: {
+    // Legacy type - delegates to file
+    validate: validateFileElement,
+    update: updateFileField
+  },
+  container: {
+    validate: validateContainerElement,
+    update: updateContainerField
+  },
+  group: {
+    // Deprecated type - delegates to container
+    validate: validateGroupElement,
+    update: updateGroupField
+  }
+};
+function getComponentOperations(elementType) {
+  return componentRegistry[elementType] || null;
+}
+function validateElementWithComponent(element, key, context) {
+  const ops = getComponentOperations(element.type);
+  if (ops && ops.validate) {
+    return ops.validate(element, key, context);
+  }
+  return null;
+}
+function updateElementWithComponent(element, fieldPath, value, context) {
+  const ops = getComponentOperations(element.type);
+  if (ops && ops.update) {
+    ops.update(element, fieldPath, value, context);
+    return true;
+  }
+  return false;
+}
+
+// src/instance/FormBuilderInstance.ts
+var FormBuilderInstance = class {
+  constructor(config) {
+    this.instanceId = generateInstanceId();
+    this.state = createInstanceState(config);
+  }
+  /**
+   * Get instance ID (useful for debugging and resource prefixing)
+   */
+  getInstanceId() {
+    return this.instanceId;
+  }
+  /**
+   * Get current state (for advanced use cases)
+   */
+  getState() {
+    return this.state;
+  }
+  /**
+   * Set the form root element
+   */
+  setFormRoot(element) {
+    this.state.formRoot = element;
+  }
+  /**
+   * Configure the form builder
+   */
+  configure(config) {
+    Object.assign(this.state.config, config);
+  }
+  /**
+   * Set file upload handler
+   */
+  setUploadHandler(uploadFn) {
+    this.state.config.uploadFile = uploadFn;
+  }
+  /**
+   * Set file download handler
+   */
+  setDownloadHandler(downloadFn) {
+    this.state.config.downloadFile = downloadFn;
+  }
+  /**
+   * Set thumbnail generation handler
+   */
+  setThumbnailHandler(thumbnailFn) {
+    this.state.config.getThumbnail = thumbnailFn;
+  }
+  /**
+   * Set action handler
+   */
+  setActionHandler(actionFn) {
+    this.state.config.actionHandler = actionFn;
+  }
+  /**
+   * Set mode (edit or readonly)
+   */
+  setMode(mode) {
+    this.state.config.readonly = mode === "readonly";
+  }
+  /**
+   * Set locale
+   */
+  setLocale(locale) {
+    if (this.state.config.translations[locale]) {
+      this.state.config.locale = locale;
+    }
+  }
+  /**
+   * Trigger onChange callbacks with debouncing
+   * @param fieldPath - Optional field path for field-specific change events
+   * @param fieldValue - Optional field value for field-specific change events
+   */
+  triggerOnChange(fieldPath, fieldValue) {
+    if (this.state.config.readonly) return;
+    if (this.state.debounceTimer !== null) {
+      clearTimeout(this.state.debounceTimer);
+    }
+    this.state.debounceTimer = setTimeout(() => {
+      const formData = this.validateForm(true);
+      if (this.state.config.onChange) {
+        this.state.config.onChange(formData);
+      }
+      if (this.state.config.onFieldChange && fieldPath !== void 0 && fieldValue !== void 0) {
+        this.state.config.onFieldChange(fieldPath, fieldValue, formData);
+      }
+      this.state.debounceTimer = null;
+    }, this.state.config.debounceMs);
+  }
+  /**
+   * Register an external action that will be displayed as a button
+   * External actions can be form-level (no related_field) or field-level (with related_field)
+   * @param action - External action definition
+   */
+  registerAction(action) {
+    if (!action || !action.value) {
+      throw new Error("Action must have a value property");
+    }
+    if (!this.state.externalActions) {
+      this.state.externalActions = [];
+    }
+    const existingIndex = this.state.externalActions.findIndex(
+      (a) => a.value === action.value && a.related_field === action.related_field
+    );
+    if (existingIndex >= 0) {
+      this.state.externalActions[existingIndex] = action;
+    } else {
+      this.state.externalActions.push(action);
+    }
+  }
+  /**
+   * Find the DOM element corresponding to a field path (instance-scoped)
+   */
+  findFormElementByFieldPath(fieldPath) {
+    if (!this.state.formRoot) return null;
+    if (!this.state.config.readonly) {
+      let element = this.state.formRoot.querySelector(
+        `[name="${fieldPath}"]`
+      );
+      if (element) return element;
+      const variations = [
+        fieldPath,
+        fieldPath.replace(/\[(\d+)\]/g, "[$1]"),
+        fieldPath.replace(/\./g, "[") + "]".repeat((fieldPath.match(/\./g) || []).length)
+      ];
+      for (const variation of variations) {
+        element = this.state.formRoot.querySelector(
+          `[name="${variation}"]`
+        );
+        if (element) return element;
+      }
+    }
+    const schemaElement = this.findSchemaElement(fieldPath);
+    if (!schemaElement) return null;
+    const fieldWrappers = this.state.formRoot.querySelectorAll(".fb-field-wrapper");
+    for (const wrapper of fieldWrappers) {
+      const labelText = schemaElement.label || schemaElement.key;
+      const labelElement = wrapper.querySelector("label");
+      if (labelElement && (labelElement.textContent === labelText || labelElement.textContent === `${labelText}*`)) {
+        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;
+  }
+  /**
+   * Find schema element by field path
+   */
+  findSchemaElement(fieldPath) {
+    if (!this.state.schema || !this.state.schema.elements) return null;
+    let currentElements = this.state.schema.elements;
+    let foundElement = null;
+    const keys = fieldPath.replace(/\[\d+\]/g, "").split(".").filter(Boolean);
+    for (const key of keys) {
+      foundElement = currentElements.find((el) => el.key === key) || null;
+      if (!foundElement) {
+        return null;
+      }
+      if ("elements" in foundElement && foundElement.elements) {
+        currentElements = foundElement.elements;
+      }
+    }
+    return foundElement;
+  }
+  /**
+   * Resolve action label from schema or external action
+   */
+  resolveActionLabel(actionKey, externalLabel, schemaElement, isTrueFormLevelAction = false) {
+    if (schemaElement && "actions" in schemaElement && schemaElement.actions) {
+      const predefinedAction = schemaElement.actions.find(
+        (a) => a.key === actionKey
+      );
+      if (predefinedAction && predefinedAction.label) {
+        return predefinedAction.label;
+      }
+    }
+    if (isTrueFormLevelAction && this.state.schema && "actions" in this.state.schema && this.state.schema.actions) {
+      const rootAction = this.state.schema.actions.find(
+        (a) => a.key === actionKey
+      );
+      if (rootAction && rootAction.label) {
+        return rootAction.label;
+      }
+    }
+    if (externalLabel) {
+      return externalLabel;
+    }
+    return actionKey;
+  }
+  /**
+   * Render form-level action buttons at the bottom of the form
+   */
+  renderFormLevelActions(actions, trueFormLevelActions = []) {
+    if (!this.state.formRoot) return;
+    const existingContainer = this.state.formRoot.querySelector(
+      ".form-level-actions-container"
+    );
+    if (existingContainer) {
+      existingContainer.remove();
+    }
+    const actionsContainer = document.createElement("div");
+    actionsContainer.className = "form-level-actions-container mt-6 pt-4 flex flex-wrap gap-3 justify-center";
+    actionsContainer.style.cssText = `
+      border-top: var(--fb-border-width) solid var(--fb-border-color);
+    `;
+    actions.forEach((action) => {
+      const actionBtn = document.createElement("button");
+      actionBtn.type = "button";
+      applyActionButtonStyles(actionBtn, true);
+      const isTrueFormLevelAction = trueFormLevelActions.includes(action);
+      const resolvedLabel = this.resolveActionLabel(
+        action.key,
+        action.label,
+        null,
+        isTrueFormLevelAction
+      );
+      actionBtn.textContent = resolvedLabel;
+      actionBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (this.state.config.actionHandler && typeof this.state.config.actionHandler === "function") {
+          this.state.config.actionHandler(action.value, action.key, null);
+        }
+      });
+      actionsContainer.appendChild(actionBtn);
+    });
+    this.state.formRoot.appendChild(actionsContainer);
+  }
+  /**
+   * Render external action buttons for fields
+   */
+  renderExternalActions() {
+    if (!this.state.externalActions || !Array.isArray(this.state.externalActions))
+      return;
+    const actionsByField = /* @__PURE__ */ new Map();
+    const trueFormLevelActions = [];
+    const movedFormLevelActions = [];
+    this.state.externalActions.forEach((action) => {
+      if (!action.key || !action.value) return;
+      if (!action.related_field) {
+        trueFormLevelActions.push(action);
+      } else {
+        if (!actionsByField.has(action.related_field)) {
+          actionsByField.set(action.related_field, []);
+        }
+        actionsByField.get(action.related_field).push(action);
+      }
+    });
+    actionsByField.forEach((actions, fieldPath) => {
+      const fieldElement = this.findFormElementByFieldPath(fieldPath);
+      if (!fieldElement) {
+        console.warn(
+          `External action: Could not find form element for field "${fieldPath}", treating as form-level actions`
+        );
+        movedFormLevelActions.push(...actions);
+        return;
+      }
+      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;
+      }
+      const existingContainer = wrapper.querySelector(
+        ".external-actions-container"
+      );
+      if (existingContainer) {
+        existingContainer.remove();
+      }
+      const actionsContainer = document.createElement("div");
+      actionsContainer.className = "external-actions-container mt-3 flex flex-wrap gap-2";
+      const schemaElement = this.findSchemaElement(fieldPath);
+      actions.forEach((action) => {
+        const actionBtn = document.createElement("button");
+        actionBtn.type = "button";
+        applyActionButtonStyles(actionBtn, false);
+        const resolvedLabel = this.resolveActionLabel(
+          action.key,
+          action.label,
+          schemaElement
+        );
+        actionBtn.textContent = resolvedLabel;
+        actionBtn.addEventListener("click", (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (this.state.config.actionHandler && typeof this.state.config.actionHandler === "function") {
+            this.state.config.actionHandler(
+              action.value,
+              action.key,
+              action.related_field
+            );
+          }
+        });
+        actionsContainer.appendChild(actionBtn);
+      });
+      wrapper.appendChild(actionsContainer);
+    });
+    const allFormLevelActions = [
+      ...trueFormLevelActions,
+      ...movedFormLevelActions
+    ];
+    if (allFormLevelActions.length > 0) {
+      this.renderFormLevelActions(allFormLevelActions, trueFormLevelActions);
+    }
+  }
+  /**
+   * Render form from schema
+   */
+  renderForm(root, schema, prefill, actions) {
+    const errors = validateSchema(schema);
+    if (errors.length > 0) {
+      console.error("Schema validation errors:", errors);
+      return;
+    }
+    this.state.formRoot = root;
+    this.state.schema = schema;
+    this.state.externalActions = actions || null;
+    clear(root);
+    root.setAttribute("data-fb-root", "true");
+    injectThemeVariables(root, this.state.config.theme);
+    const formEl = document.createElement("div");
+    formEl.className = "space-y-6";
+    schema.elements.forEach((element) => {
+      if (element.hidden) {
+        return;
+      }
+      const block = renderElement2(element, {
+        path: "",
+        prefill: prefill || {},
+        state: this.state,
+        instance: this
+      });
+      formEl.appendChild(block);
+    });
+    root.appendChild(formEl);
+    if (this.state.config.readonly && this.state.externalActions && Array.isArray(this.state.externalActions)) {
+      this.renderExternalActions();
+    }
+  }
+  /**
+   * Validate form and extract data
+   * This is a complete copy of the validateForm logic from form-builder.ts
+   * but uses instance state instead of global state
+   */
+  validateForm(skipValidation = false) {
+    if (!this.state.schema || !this.state.formRoot)
+      return { valid: true, errors: [], data: {} };
+    const errors = [];
+    const data = {};
+    const validateElement2 = (element, ctx, customScopeRoot = null) => {
+      const key = element.key;
+      const scopeRoot = customScopeRoot || this.state.formRoot;
+      const componentContext = {
+        scopeRoot,
+        state: this.state,
+        instance: this,
+        path: ctx.path,
+        skipValidation
+      };
+      const componentResult = validateElementWithComponent(
+        element,
+        key,
+        componentContext
+      );
+      if (componentResult !== null) {
+        errors.push(...componentResult.errors);
+        return componentResult.value;
+      }
+      console.warn(`Unknown field type "${element.type}" for key "${key}"`);
+      return null;
+    };
+    setValidateElement(validateElement2);
+    this.state.schema.elements.forEach((element) => {
+      if (element.hidden) {
+        data[element.key] = element.default !== void 0 ? element.default : null;
+      } else {
+        data[element.key] = validateElement2(element, { path: "" });
+      }
+    });
+    return {
+      valid: errors.length === 0,
+      errors,
+      data
+    };
+  }
+  /**
+   * Get form data
+   */
+  getFormData() {
+    return this.validateForm(false);
+  }
+  /**
+   * Submit form with validation
+   */
+  submitForm() {
+    const result = this.validateForm(false);
+    if (result.valid) {
+      if (typeof window !== "undefined" && window.parent) {
+        window.parent.postMessage(
+          {
+            type: "formSubmit",
+            data: result.data,
+            schema: this.state.schema
+          },
+          "*"
+        );
+      }
+    }
+    return result;
+  }
+  /**
+   * Save draft without validation
+   */
+  saveDraft() {
+    const result = this.validateForm(true);
+    if (typeof window !== "undefined" && window.parent) {
+      window.parent.postMessage(
+        {
+          type: "formDraft",
+          data: result.data,
+          schema: this.state.schema
+        },
+        "*"
+      );
+    }
+    return result;
+  }
+  /**
+   * Clear the form - reset all field values to empty while preserving form structure
+   * This is done by re-rendering the form with empty data
+   */
+  clearForm() {
+    if (!this.state.schema || !this.state.formRoot) {
+      console.warn("clearForm: Form not initialized. Call renderForm() first.");
+      return;
+    }
+    const schema = this.state.schema;
+    const formRoot = this.state.formRoot;
+    const emptyPrefill = this.buildHiddenFieldsData(schema.elements);
+    this.renderForm(formRoot, schema, emptyPrefill);
+  }
+  /**
+   * Build prefill data for hidden fields only
+   * Hidden fields should retain their values when clearing
+   */
+  buildHiddenFieldsData(elements, parentPath = "") {
+    const data = {};
+    for (const element of elements) {
+      const key = element.key;
+      const fieldPath = parentPath ? `${parentPath}.${key}` : key;
+      if (element.hidden && element.default !== void 0) {
+        data[fieldPath] = element.default;
+      }
+      if (element.type === "container" || element.type === "group") {
+        const containerElement = element;
+        const nestedData = this.buildHiddenFieldsData(
+          containerElement.elements,
+          fieldPath
+        );
+        Object.assign(data, nestedData);
+      }
+    }
+    return data;
+  }
+  /**
+   * Set form data - update multiple fields without full re-render
+   * @param data - Object with field paths and their values
+   */
+  setFormData(data) {
+    if (!this.state.schema || !this.state.formRoot) {
+      console.warn("setFormData: Form not initialized. Call renderForm() first.");
+      return;
+    }
+    for (const fieldPath in data) {
+      this.updateField(fieldPath, data[fieldPath]);
+    }
+  }
+  /**
+   * Update a single field by path without full re-render
+   * @param fieldPath - Field path (e.g., "email", "address.city", "items[0].name")
+   * @param value - New value for the field
+   */
+  updateField(fieldPath, value) {
+    if (!this.state.schema || !this.state.formRoot) {
+      console.warn("updateField: Form not initialized. Call renderForm() first.");
+      return;
+    }
+    const schemaElement = this.findSchemaElement(fieldPath);
+    if (!schemaElement) {
+      console.warn(`updateField: Schema element not found for path "${fieldPath}"`);
+      return;
+    }
+    const domElement = this.findFormElementByFieldPath(fieldPath);
+    if (!domElement) {
+      console.warn(`updateField: DOM element not found for path "${fieldPath}"`);
+      return;
+    }
+    this.updateFieldValue(domElement, schemaElement, fieldPath, value);
+    if (this.state.config.onChange || this.state.config.onFieldChange) {
+      this.triggerOnChange(fieldPath, value);
+    }
+  }
+  /**
+   * Update field value in DOM based on field type
+   * Delegates to component-specific updaters via registry
+   */
+  updateFieldValue(domElement, schemaElement, fieldPath, value) {
+    const componentContext = {
+      scopeRoot: this.state.formRoot,
+      state: this.state,
+      instance: this,
+      path: ""
+    };
+    const handled = updateElementWithComponent(
+      schemaElement,
+      fieldPath,
+      value,
+      componentContext
+    );
+    if (!handled) {
+      console.warn(
+        `updateField: No updater found for field type "${schemaElement.type}" at path "${fieldPath}"`
+      );
+    }
+  }
+  /**
+   * Destroy instance and clean up resources
+   */
+  destroy() {
+    if (this.state.debounceTimer !== null) {
+      clearTimeout(this.state.debounceTimer);
+      this.state.debounceTimer = null;
+    }
+    this.state.resourceIndex.clear();
+    if (this.state.formRoot) {
+      clear(this.state.formRoot);
+    }
+    this.state.formRoot = null;
+    this.state.schema = null;
+    this.state.externalActions = null;
+  }
+};
+
+// src/index.ts
+function createFormBuilder(config) {
+  return new FormBuilderInstance(config);
+}
+var index_default = FormBuilderInstance;
+if (typeof window !== "undefined") {
+  window.FormBuilder = FormBuilderInstance;
+  window.createFormBuilder = createFormBuilder;
+  window.validateSchema = validateSchema;
+}
+
+export { FormBuilderInstance, createFormBuilder, index_default as default, defaultTheme, exampleThemes, validateSchema };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map