@dmitryvim/form-builder 0.2.11 → 0.2.13

package/dist/esm/index.js

@@ -1,53 +1,75 @@
+// src/utils/translation.ts
+function t(key, state, params) {
+  const locale = state.config.locale || "en";
+  const localeTranslations = state.config.translations[locale];
+  const fallbackTranslations = state.config.translations.en;
+  let text = localeTranslations?.[key] || fallbackTranslations?.[key] || key;
+  if (params) {
+    for (const [paramKey, paramValue] of Object.entries(params)) {
+      text = text.replace(new RegExp(`\\{${paramKey}\\}`, "g"), String(paramValue));
+    }
+  }
+  return text;
+}
+
 // 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 addLengthHint(element, parts, state) {
+  if (element.minLength != null || element.maxLength != null) {
+    if (element.minLength != null && element.maxLength != null) {
+      parts.push(
+        t("hintLengthRange", state, {
+          min: element.minLength,
+          max: element.maxLength
+        })
+      );
+    } else if (element.maxLength != null) {
+      parts.push(t("hintMaxLength", state, { max: element.maxLength }));
+    } else if (element.minLength != null) {
+      parts.push(t("hintMinLength", state, { min: element.minLength }));
     }
   }
 }
-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 addRangeHint(element, parts, state) {
+  if (element.min != null || element.max != null) {
+    if (element.min != null && element.max != null) {
+      parts.push(
+        t("hintValueRange", state, { min: element.min, max: element.max })
+      );
+    } else if (element.max != null) {
+      parts.push(t("hintMaxValue", state, { max: element.max }));
+    } else if (element.min != null) {
+      parts.push(t("hintMinValue", state, { min: element.min }));
     }
   }
 }
-function addFileSizeHint(element, parts) {
+function addFileSizeHint(element, parts, state) {
   if (element.maxSizeMB) {
-    parts.push(`max_size=${element.maxSizeMB}MB`);
+    parts.push(t("hintMaxSize", state, { size: element.maxSizeMB }));
   }
 }
-function addFormatHint(element, parts) {
+function addFormatHint(element, parts, state) {
   if (element.accept?.extensions) {
     parts.push(
-      `formats=${element.accept.extensions.map((ext) => ext.toUpperCase()).join(",")}`
+      t("hintFormats", state, {
+        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 addPatternHint(element, parts, state) {
+  if (element.pattern) {
+    parts.push(t("hintPattern", state, { pattern: element.pattern }));
   }
 }
-function makeFieldHint(element) {
+function makeFieldHint(element, state) {
   const parts = [];
-  parts.push(element.required ? "required" : "optional");
-  addLengthHint(element, parts);
-  addRangeHint(element, parts);
-  addFileSizeHint(element, parts);
-  addFormatHint(element, parts);
-  addPatternHint(element, parts);
+  addLengthHint(element, parts, state);
+  if (element.type !== "slider") {
+    addRangeHint(element, parts, state);
+  }
+  addFileSizeHint(element, parts, state);
+  addFormatHint(element, parts, state);
+  addPatternHint(element, parts, state);
   return parts.join(" \u2022 ");
 }
 function validateSchema(schema) {
@@ -185,6 +207,11 @@ function validateSchema(schema) {
 function isPlainObject(obj) {
   return obj && typeof obj === "object" && obj.constructor === Object;
 }
+function escapeHtml(text) {
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML;
+}
 function pathJoin(base, key) {
   return base ? `${base}.${key}` : key;
 }
@@ -262,13 +289,62 @@ function deepEqual(a, b) {
 }
 
 // src/components/text.ts
+function createCharCounter(element, input, isTextarea = false) {
+  const counter = document.createElement("span");
+  counter.className = "char-counter";
+  counter.style.cssText = `
+    position: absolute;
+    ${isTextarea ? "bottom: 8px" : "top: 50%; transform: translateY(-50%)"};
+    right: 10px;
+    font-size: var(--fb-font-size-small);
+    color: var(--fb-text-secondary-color);
+    pointer-events: none;
+    background: var(--fb-background-color);
+    padding: 0 4px;
+  `;
+  const updateCounter = () => {
+    const len = input.value.length;
+    const min = element.minLength;
+    const max = element.maxLength;
+    if (min == null && max == null) {
+      counter.textContent = "";
+      return;
+    }
+    if (len === 0 || min != null && len < min) {
+      if (min != null && max != null) {
+        counter.textContent = `${min}-${max}`;
+      } else if (max != null) {
+        counter.textContent = `\u2264${max}`;
+      } else if (min != null) {
+        counter.textContent = `\u2265${min}`;
+      }
+      counter.style.color = "var(--fb-text-secondary-color)";
+    } else if (max != null && len > max) {
+      counter.textContent = `${len}/${max}`;
+      counter.style.color = "var(--fb-error-color)";
+    } else {
+      if (max != null) {
+        counter.textContent = `${len}/${max}`;
+      } else {
+        counter.textContent = `${len}`;
+      }
+      counter.style.color = "var(--fb-text-secondary-color)";
+    }
+  };
+  input.addEventListener("input", updateCounter);
+  updateCounter();
+  return counter;
+}
 function renderTextElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
+  const inputWrapper = document.createElement("div");
+  inputWrapper.style.cssText = "position: relative;";
   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);
+    padding-right: 60px;
     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)"};
@@ -276,6 +352,8 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
     font-size: var(--fb-font-size);
     font-family: var(--fb-font-family);
     transition: all var(--fb-transition-duration) ease-in-out;
+    width: 100%;
+    box-sizing: border-box;
   `;
   textInput.name = pathKey;
   textInput.placeholder = element.placeholder || "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
@@ -310,15 +388,12 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
     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);
+  inputWrapper.appendChild(textInput);
+  if (!state.config.readonly && (element.minLength != null || element.maxLength != null)) {
+    const counter = createCharCounter(element, textInput, false);
+    inputWrapper.appendChild(counter);
+  }
+  wrapper.appendChild(inputWrapper);
 }
 function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
@@ -344,11 +419,13 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
   function addTextItem(value = "", index = -1) {
     const itemWrapper = document.createElement("div");
     itemWrapper.className = "multiple-text-item flex items-center gap-2";
+    const inputContainer = document.createElement("div");
+    inputContainer.style.cssText = "position: relative; flex: 1;";
     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);
+      padding-right: 60px;
       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)"};
@@ -356,8 +433,10 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       font-size: var(--fb-font-size);
       font-family: var(--fb-font-family);
       transition: all var(--fb-transition-duration) ease-in-out;
+      width: 100%;
+      box-sizing: border-box;
     `;
-    textInput.placeholder = element.placeholder || "Enter text";
+    textInput.placeholder = element.placeholder || t("placeholderText", state);
     textInput.value = value;
     textInput.readOnly = state.config.readonly;
     if (!state.config.readonly) {
@@ -389,7 +468,12 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       textInput.addEventListener("blur", handleChange);
       textInput.addEventListener("input", handleChange);
     }
-    itemWrapper.appendChild(textInput);
+    inputContainer.appendChild(textInput);
+    if (!state.config.readonly && (element.minLength != null || element.maxLength != null)) {
+      const counter = createCharCounter(element, textInput, false);
+      inputContainer.appendChild(counter);
+    }
+    itemWrapper.appendChild(inputContainer);
     if (index === -1) {
       container.appendChild(itemWrapper);
     } else {
@@ -442,47 +526,54 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
+  let addRow = null;
+  let countDisplay = null;
+  if (!state.config.readonly) {
+    addRow = document.createElement("div");
+    addRow.className = "flex items-center gap-3 mt-2";
+    const addBtn = document.createElement("button");
+    addBtn.type = "button";
+    addBtn.className = "add-text-btn 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 = "+";
+    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();
+    };
+    countDisplay = document.createElement("span");
+    countDisplay.className = "text-sm text-gray-500";
+    addRow.appendChild(addBtn);
+    addRow.appendChild(countDisplay);
+    wrapper.appendChild(addRow);
+  }
   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 = "+";
-      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);
+    if (!addRow || !countDisplay) return;
+    const addBtn = addRow.querySelector(".add-text-btn");
+    if (addBtn) {
+      const disabled = values.length >= maxCount;
+      addBtn.disabled = disabled;
+      addBtn.style.opacity = disabled ? "0.5" : "1";
+      addBtn.style.pointerEvents = disabled ? "none" : "auto";
     }
+    countDisplay.textContent = `${values.length}/${maxCount === Infinity ? "\u221E" : maxCount}`;
   }
   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 = [];
@@ -521,26 +612,31 @@ function validateTextElement(element, key, context) {
   };
   const validateTextInput = (input, val, fieldKey) => {
     let hasError = false;
+    const { state } = context;
     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}`);
+        const msg = t("minLength", state, { min: element.minLength });
+        errors.push(`${fieldKey}: ${msg}`);
+        markValidity(input, msg);
         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}`);
+        const msg = t("maxLength", state, { max: element.maxLength });
+        errors.push(`${fieldKey}: ${msg}`);
+        markValidity(input, msg);
         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");
+            const msg = t("patternMismatch", state);
+            errors.push(`${fieldKey}: ${msg}`);
+            markValidity(input, msg);
             hasError = true;
           }
         } catch {
-          errors.push(`${fieldKey}: invalid pattern`);
-          markValidity(input, "invalid pattern");
+          const msg = t("invalidPattern", state);
+          errors.push(`${fieldKey}: ${msg}`);
+          markValidity(input, msg);
           hasError = true;
         }
       }
@@ -560,17 +656,18 @@ function validateTextElement(element, key, context) {
       validateTextInput(input, val, `${key}[${index}]`);
     });
     if (!skipValidation) {
+      const { state } = context;
       const minCount = element.minCount ?? 1;
       const maxCount = element.maxCount ?? Infinity;
       const filteredValues = rawValues.filter((v) => v.trim() !== "");
       if (element.required && filteredValues.length === 0) {
-        errors.push(`${key}: required`);
+        errors.push(`${key}: ${t("required", state)}`);
       }
       if (filteredValues.length < minCount) {
-        errors.push(`${key}: minimum ${minCount} items required`);
+        errors.push(`${key}: ${t("minItems", state, { min: minCount })}`);
       }
       if (filteredValues.length > maxCount) {
-        errors.push(`${key}: maximum ${maxCount} items allowed`);
+        errors.push(`${key}: ${t("maxItems", state, { max: maxCount })}`);
       }
     }
     return { value: values, errors };
@@ -578,8 +675,9 @@ function validateTextElement(element, key, context) {
     const input = scopeRoot.querySelector(`[name$="${key}"]`);
     const val = input?.value ?? "";
     if (!skipValidation && element.required && val === "") {
-      errors.push(`${key}: required`);
-      markValidity(input, "required");
+      const msg = t("required", context.state);
+      errors.push(`${key}: ${msg}`);
+      markValidity(input, msg);
       return { value: null, errors };
     }
     if (input) {
@@ -623,8 +721,11 @@ function updateTextField(element, fieldPath, value, context) {
 // src/components/textarea.ts
 function renderTextareaElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
+  const textareaWrapper = document.createElement("div");
+  textareaWrapper.style.cssText = "position: relative;";
   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.style.cssText = "padding-bottom: 24px;";
   textareaInput.name = pathKey;
   textareaInput.placeholder = element.placeholder || "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
   textareaInput.rows = element.rows || 4;
@@ -638,11 +739,12 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
     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);
+  textareaWrapper.appendChild(textareaInput);
+  if (!state.config.readonly && (element.minLength != null || element.maxLength != null)) {
+    const counter = createCharCounter(element, textareaInput, true);
+    textareaWrapper.appendChild(counter);
+  }
+  wrapper.appendChild(textareaWrapper);
 }
 function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
@@ -668,9 +770,12 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
   function addTextareaItem(value = "", index = -1) {
     const itemWrapper = document.createElement("div");
     itemWrapper.className = "multiple-textarea-item";
+    const textareaContainer = document.createElement("div");
+    textareaContainer.style.cssText = "position: relative;";
     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.style.cssText = "padding-bottom: 24px;";
+    textareaInput.placeholder = element.placeholder || t("placeholderText", state);
     textareaInput.rows = element.rows || 4;
     textareaInput.value = value;
     textareaInput.readOnly = state.config.readonly;
@@ -682,7 +787,12 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
       textareaInput.addEventListener("blur", handleChange);
       textareaInput.addEventListener("input", handleChange);
     }
-    itemWrapper.appendChild(textareaInput);
+    textareaContainer.appendChild(textareaInput);
+    if (!state.config.readonly && (element.minLength != null || element.maxLength != null)) {
+      const counter = createCharCounter(element, textareaInput, true);
+      textareaContainer.appendChild(counter);
+    }
+    itemWrapper.appendChild(textareaContainer);
     if (index === -1) {
       container.appendChild(itemWrapper);
     } else {
@@ -724,30 +834,54 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
       removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
+  let addRow = null;
+  let countDisplay = null;
+  if (!state.config.readonly) {
+    addRow = document.createElement("div");
+    addRow.className = "flex items-center gap-3 mt-2";
+    const addBtn = document.createElement("button");
+    addBtn.type = "button";
+    addBtn.className = "add-textarea-btn 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 = "+";
+    addBtn.addEventListener("mouseenter", () => {
+      addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
+    });
+    addBtn.addEventListener("mouseleave", () => {
+      addBtn.style.backgroundColor = "transparent";
+    });
+    addBtn.onclick = () => {
+      values.push(element.default || "");
+      addTextareaItem(element.default || "");
+      updateAddButton();
+      updateRemoveButtons();
+    };
+    countDisplay = document.createElement("span");
+    countDisplay.className = "text-sm text-gray-500";
+    addRow.appendChild(addBtn);
+    addRow.appendChild(countDisplay);
+    wrapper.appendChild(addRow);
+  }
   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 = "+";
-      addBtn.onclick = () => {
-        values.push(element.default || "");
-        addTextareaItem(element.default || "");
-        updateAddButton();
-        updateRemoveButtons();
-      };
-      wrapper.appendChild(addBtn);
+    if (!addRow || !countDisplay) return;
+    const addBtn = addRow.querySelector(".add-textarea-btn");
+    if (addBtn) {
+      const disabled = values.length >= maxCount;
+      addBtn.disabled = disabled;
+      addBtn.style.opacity = disabled ? "0.5" : "1";
+      addBtn.style.pointerEvents = disabled ? "none" : "auto";
     }
+    countDisplay.textContent = `${values.length}/${maxCount === Infinity ? "\u221E" : maxCount}`;
   }
   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);
@@ -757,11 +891,61 @@ function updateTextareaField(element, fieldPath, value, context) {
 }
 
 // src/components/number.ts
+function createNumberCounter(element, input) {
+  const counter = document.createElement("span");
+  counter.className = "number-counter";
+  counter.style.cssText = `
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 10px;
+    font-size: var(--fb-font-size-small);
+    color: var(--fb-text-secondary-color);
+    pointer-events: none;
+    background: var(--fb-background-color);
+    padding: 0 4px;
+  `;
+  const updateCounter = () => {
+    const val = input.value ? parseFloat(input.value) : null;
+    const min = element.min;
+    const max = element.max;
+    if (min == null && max == null) {
+      counter.textContent = "";
+      return;
+    }
+    if (val == null || min != null && val < min) {
+      if (min != null && max != null) {
+        counter.textContent = `${min}-${max}`;
+      } else if (max != null) {
+        counter.textContent = `\u2264${max}`;
+      } else if (min != null) {
+        counter.textContent = `\u2265${min}`;
+      }
+      counter.style.color = "var(--fb-text-secondary-color)";
+    } else if (max != null && val > max) {
+      counter.textContent = `${val}/${max}`;
+      counter.style.color = "var(--fb-error-color)";
+    } else {
+      if (max != null) {
+        counter.textContent = `${val}/${max}`;
+      } else {
+        counter.textContent = `${val}`;
+      }
+      counter.style.color = "var(--fb-text-secondary-color)";
+    }
+  };
+  input.addEventListener("input", updateCounter);
+  updateCounter();
+  return counter;
+}
 function renderNumberElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
+  const inputWrapper = document.createElement("div");
+  inputWrapper.style.cssText = "position: relative;";
   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.style.cssText = "padding-right: 60px; width: 100%; box-sizing: border-box;";
   numberInput.name = pathKey;
   numberInput.placeholder = element.placeholder || "0";
   if (element.min !== void 0) numberInput.min = element.min.toString();
@@ -777,11 +961,12 @@ function renderNumberElement(element, ctx, wrapper, pathKey) {
     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);
+  inputWrapper.appendChild(numberInput);
+  if (!state.config.readonly && (element.min != null || element.max != null)) {
+    const counter = createNumberCounter(element, numberInput);
+    inputWrapper.appendChild(counter);
+  }
+  wrapper.appendChild(inputWrapper);
 }
 function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
@@ -807,9 +992,12 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
   function addNumberItem(value = "", index = -1) {
     const itemWrapper = document.createElement("div");
     itemWrapper.className = "multiple-number-item flex items-center gap-2";
+    const inputContainer = document.createElement("div");
+    inputContainer.style.cssText = "position: relative; flex: 1;";
     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.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.style.cssText = "padding-right: 60px; width: 100%; box-sizing: border-box;";
     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();
@@ -824,7 +1012,12 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
       numberInput.addEventListener("blur", handleChange);
       numberInput.addEventListener("input", handleChange);
     }
-    itemWrapper.appendChild(numberInput);
+    inputContainer.appendChild(numberInput);
+    if (!state.config.readonly && (element.min != null || element.max != null)) {
+      const counter = createNumberCounter(element, numberInput);
+      inputContainer.appendChild(counter);
+    }
+    itemWrapper.appendChild(inputContainer);
     if (index === -1) {
       container.appendChild(itemWrapper);
     } else {
@@ -866,30 +1059,54 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
       removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
+  let addRow = null;
+  let countDisplay = null;
+  if (!state.config.readonly) {
+    addRow = document.createElement("div");
+    addRow.className = "flex items-center gap-3 mt-2";
+    const addBtn = document.createElement("button");
+    addBtn.type = "button";
+    addBtn.className = "add-number-btn 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 = "+";
+    addBtn.addEventListener("mouseenter", () => {
+      addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
+    });
+    addBtn.addEventListener("mouseleave", () => {
+      addBtn.style.backgroundColor = "transparent";
+    });
+    addBtn.onclick = () => {
+      values.push(element.default || "");
+      addNumberItem(element.default || "");
+      updateAddButton();
+      updateRemoveButtons();
+    };
+    countDisplay = document.createElement("span");
+    countDisplay.className = "text-sm text-gray-500";
+    addRow.appendChild(addBtn);
+    addRow.appendChild(countDisplay);
+    wrapper.appendChild(addRow);
+  }
   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 = "+";
-      addBtn.onclick = () => {
-        values.push(element.default || "");
-        addNumberItem(element.default || "");
-        updateAddButton();
-        updateRemoveButtons();
-      };
-      wrapper.appendChild(addBtn);
+    if (!addRow || !countDisplay) return;
+    const addBtn = addRow.querySelector(".add-number-btn");
+    if (addBtn) {
+      const disabled = values.length >= maxCount;
+      addBtn.disabled = disabled;
+      addBtn.style.opacity = disabled ? "0.5" : "1";
+      addBtn.style.pointerEvents = disabled ? "none" : "auto";
     }
+    countDisplay.textContent = `${values.length}/${maxCount === Infinity ? "\u221E" : maxCount}`;
   }
   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 = [];
@@ -928,13 +1145,16 @@ function validateNumberElement(element, key, context) {
   };
   const validateNumberInput = (input, v, fieldKey) => {
     let hasError = false;
+    const { state } = context;
     if (!skipValidation && element.min !== void 0 && element.min !== null && v < element.min) {
-      errors.push(`${fieldKey}: < min=${element.min}`);
-      markValidity(input, `< min=${element.min}`);
+      const msg = t("minValue", state, { min: element.min });
+      errors.push(`${fieldKey}: ${msg}`);
+      markValidity(input, msg);
       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}`);
+      const msg = t("maxValue", state, { max: element.max });
+      errors.push(`${fieldKey}: ${msg}`);
+      markValidity(input, msg);
       hasError = true;
     }
     if (!hasError) {
@@ -955,8 +1175,9 @@ function validateNumberElement(element, key, context) {
       }
       const v = parseFloat(raw);
       if (!skipValidation && !Number.isFinite(v)) {
-        errors.push(`${key}[${index}]: not a number`);
-        markValidity(input, "not a number");
+        const msg = t("notANumber", context.state);
+        errors.push(`${key}[${index}]: ${msg}`);
+        markValidity(input, msg);
         values.push(null);
         return;
       }
@@ -965,26 +1186,29 @@ function validateNumberElement(element, key, context) {
       values.push(Number(v.toFixed(d)));
     });
     if (!skipValidation) {
+      const { state } = context;
       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`);
+        errors.push(`${key}: ${t("required", state)}`);
       }
       if (filteredValues.length < minCount) {
-        errors.push(`${key}: minimum ${minCount} items required`);
+        errors.push(`${key}: ${t("minItems", state, { min: minCount })}`);
       }
       if (filteredValues.length > maxCount) {
-        errors.push(`${key}: maximum ${maxCount} items allowed`);
+        errors.push(`${key}: ${t("maxItems", state, { max: maxCount })}`);
       }
     }
     return { value: values, errors };
   } else {
     const input = scopeRoot.querySelector(`[name$="${key}"]`);
     const raw = input?.value ?? "";
+    const { state } = context;
     if (!skipValidation && element.required && raw === "") {
-      errors.push(`${key}: required`);
-      markValidity(input, "required");
+      const msg = t("required", state);
+      errors.push(`${key}: ${msg}`);
+      markValidity(input, msg);
       return { value: null, errors };
     }
     if (raw === "") {
@@ -993,8 +1217,9 @@ function validateNumberElement(element, key, context) {
     }
     const v = parseFloat(raw);
     if (!skipValidation && !Number.isFinite(v)) {
-      errors.push(`${key}: not a number`);
-      markValidity(input, "not a number");
+      const msg = t("notANumber", state);
+      errors.push(`${key}: ${msg}`);
+      markValidity(input, msg);
       return { value: null, errors };
     }
     validateNumberInput(input, v, key);
@@ -1061,10 +1286,12 @@ function renderSelectElement(element, ctx, wrapper, pathKey) {
     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);
+  if (!state.config.readonly) {
+    const selectHint = document.createElement("p");
+    selectHint.className = "text-xs text-gray-500 mt-1";
+    selectHint.textContent = makeFieldHint(element, state);
+    wrapper.appendChild(selectHint);
+  }
 }
 function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
@@ -1148,31 +1375,61 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
       removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
+  let addRow = null;
+  let countDisplay = null;
+  if (!state.config.readonly) {
+    addRow = document.createElement("div");
+    addRow.className = "flex items-center gap-3 mt-2";
+    const addBtn = document.createElement("button");
+    addBtn.type = "button";
+    addBtn.className = "add-select-btn 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 = "+";
+    addBtn.addEventListener("mouseenter", () => {
+      addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
+    });
+    addBtn.addEventListener("mouseleave", () => {
+      addBtn.style.backgroundColor = "transparent";
+    });
+    addBtn.onclick = () => {
+      const defaultValue = element.default || element.options?.[0]?.value || "";
+      values.push(defaultValue);
+      addSelectItem(defaultValue);
+      updateAddButton();
+      updateRemoveButtons();
+    };
+    countDisplay = document.createElement("span");
+    countDisplay.className = "text-sm text-gray-500";
+    addRow.appendChild(addBtn);
+    addRow.appendChild(countDisplay);
+    wrapper.appendChild(addRow);
+  }
   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 = "+";
-      addBtn.onclick = () => {
-        const defaultValue = element.default || element.options?.[0]?.value || "";
-        values.push(defaultValue);
-        addSelectItem(defaultValue);
-        updateAddButton();
-        updateRemoveButtons();
-      };
-      wrapper.appendChild(addBtn);
+    if (!addRow || !countDisplay) return;
+    const addBtn = addRow.querySelector(".add-select-btn");
+    if (addBtn) {
+      const disabled = values.length >= maxCount;
+      addBtn.disabled = disabled;
+      addBtn.style.opacity = disabled ? "0.5" : "1";
+      addBtn.style.pointerEvents = disabled ? "none" : "auto";
     }
+    countDisplay.textContent = `${values.length}/${maxCount === Infinity ? "\u221E" : maxCount}`;
   }
   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);
+  if (!state.config.readonly) {
+    const hint = document.createElement("p");
+    hint.className = "text-xs text-gray-500 mt-1";
+    hint.textContent = makeFieldHint(element, state);
+    wrapper.appendChild(hint);
+  }
 }
 function validateSelectElement(element, key, context) {
   const errors = [];
@@ -1211,17 +1468,18 @@ function validateSelectElement(element, key, context) {
   };
   const validateMultipleCount = (key2, values, element2, filterFn) => {
     if (skipValidation) return;
+    const { state } = context;
     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`);
+      errors.push(`${key2}: ${t("required", state)}`);
     }
     if (filteredValues.length < minCount) {
-      errors.push(`${key2}: minimum ${minCount} items required`);
+      errors.push(`${key2}: ${t("minItems", state, { min: minCount })}`);
     }
     if (filteredValues.length > maxCount) {
-      errors.push(`${key2}: maximum ${maxCount} items allowed`);
+      errors.push(`${key2}: ${t("maxItems", state, { max: maxCount })}`);
     }
   };
   if ("multiple" in element && element.multiple) {
@@ -1242,8 +1500,9 @@ function validateSelectElement(element, key, context) {
     );
     const val = input?.value ?? "";
     if (!skipValidation && element.required && val === "") {
-      errors.push(`${key}: required`);
-      markValidity(input, "required");
+      const msg = t("required", context.state);
+      errors.push(`${key}: ${msg}`);
+      markValidity(input, msg);
       return { value: null, errors };
     } else {
       markValidity(input, null);
@@ -1295,18 +1554,11 @@ function updateSelectField(element, fieldPath, value, context) {
   }
 }
 
-// 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
-function renderLocalImagePreview(container, file, fileName) {
+function renderLocalImagePreview(container, file, fileName, state) {
   const img = document.createElement("img");
   img.className = "w-full h-full object-contain";
-  img.alt = fileName || "Preview";
+  img.alt = fileName || t("previewAlt", state);
   const reader = new FileReader();
   reader.onload = (e) => {
     img.src = e.target?.result || "";
@@ -1325,14 +1577,14 @@ function renderLocalVideoPreview(container, file, videoType, resourceId, state,
     <div class="relative group h-full">
       <video class="w-full h-full object-contain" controls preload="auto" muted>
         <source src="${videoUrl}" type="${videoType}">
-        Your browser does not support the video tag.
+        ${escapeHtml(t("videoNotSupported", state))}
       </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)}
+          ${escapeHtml(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
+          ${escapeHtml(t("changeButton", state))}
         </button>
       </div>
     </div>
@@ -1381,11 +1633,11 @@ function handleVideoDelete(container, resourceId, state, deps) {
       <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 class="text-sm text-center">${escapeHtml(t("clickDragText", state))}</div>
     </div>
   `;
 }
-function renderUploadedVideoPreview(container, thumbnailUrl, videoType) {
+function renderUploadedVideoPreview(container, thumbnailUrl, videoType, state) {
   const video = document.createElement("video");
   video.className = "w-full h-full object-contain";
   video.controls = true;
@@ -1396,7 +1648,7 @@ function renderUploadedVideoPreview(container, thumbnailUrl, videoType) {
   source.type = videoType;
   video.appendChild(source);
   video.appendChild(
-    document.createTextNode("Your browser does not support the video tag.")
+    document.createTextNode(t("videoNotSupported", state))
   );
   container.appendChild(video);
 }
@@ -1414,7 +1666,7 @@ function renderDeleteButton(container, resourceId, state) {
         <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 class="text-sm text-center">${escapeHtml(t("clickDragText", state))}</div>
       </div>
     `;
   });
@@ -1424,7 +1676,7 @@ async function renderLocalFilePreview(container, meta, fileName, resourceId, isR
     return;
   }
   if (meta.type && meta.type.startsWith("image/")) {
-    renderLocalImagePreview(container, meta.file, fileName);
+    renderLocalImagePreview(container, meta.file, fileName, state);
   } else if (meta.type && meta.type.startsWith("video/")) {
     const newContainer = renderLocalVideoPreview(
       container,
@@ -1436,7 +1688,7 @@ async function renderLocalFilePreview(container, meta, fileName, resourceId, isR
     );
     container = newContainer;
   } 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>`;
+    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">${escapeHtml(fileName)}</div></div>`;
   }
   if (!isReadonly && !(meta.type && meta.type.startsWith("video/"))) {
     renderDeleteButton(container, resourceId, state);
@@ -1452,11 +1704,11 @@ async function renderUploadedFilePreview(container, resourceId, fileName, meta,
     if (thumbnailUrl) {
       clear(container);
       if (meta && meta.type && meta.type.startsWith("video/")) {
-        renderUploadedVideoPreview(container, thumbnailUrl, meta.type);
+        renderUploadedVideoPreview(container, thumbnailUrl, meta.type, state);
       } else {
         const img = document.createElement("img");
         img.className = "w-full h-full object-contain";
-        img.alt = fileName || "Preview";
+        img.alt = fileName || t("previewAlt", state);
         img.src = thumbnailUrl;
         container.appendChild(img);
       }
@@ -1470,7 +1722,7 @@ async function renderUploadedFilePreview(container, resourceId, fileName, meta,
         <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 class="text-sm text-center">${escapeHtml(fileName || t("previewUnavailable", state))}</div>
       </div>
     `;
   }
@@ -1526,16 +1778,16 @@ async function renderFilePreviewReadonly(resourceId, state, fileName) {
       try {
         const thumbnailUrl = await state.config.getThumbnail(resourceId);
         if (thumbnailUrl) {
-          previewContainer.innerHTML = `<img src="${thumbnailUrl}" alt="${actualFileName}" class="w-full h-auto">`;
+          previewContainer.innerHTML = `<img src="${thumbnailUrl}" alt="${escapeHtml(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>`;
+          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">${escapeHtml(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>`;
+        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">${escapeHtml(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>`;
+      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">${escapeHtml(actualFileName)}</div></div></div>`;
     }
   } else if (isVideo) {
     if (state.config.getThumbnail) {
@@ -1546,7 +1798,7 @@ async function renderFilePreviewReadonly(resourceId, state, fileName) {
             <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.
+                ${escapeHtml(t("videoNotSupported", state))}
               </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">
@@ -1558,14 +1810,14 @@ async function renderFilePreviewReadonly(resourceId, state, fileName) {
             </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>`;
+          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">${escapeHtml(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>`;
+        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">${escapeHtml(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>`;
+      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">${escapeHtml(actualFileName)}</div></div></div>`;
     }
   } else {
     const fileIcon = isPSD ? "\u{1F3A8}" : "\u{1F4C1}";
@@ -1575,13 +1827,13 @@ async function renderFilePreviewReadonly(resourceId, state, fileName) {
         <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-sm font-medium text-gray-900 truncate">${escapeHtml(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>`;
+      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">${escapeHtml(actualFileName)}</div><div class="text-xs text-gray-500 mt-1">${fileDescription}</div></div></div>`;
     }
   }
   const fileNameElement = document.createElement("p");
@@ -1604,12 +1856,18 @@ async function renderFilePreviewReadonly(resourceId, state, fileName) {
   fileResult.appendChild(downloadButton);
   return fileResult;
 }
-function renderResourcePills(container, rids, state, onRemove) {
+function renderResourcePills(container, rids, state, onRemove, hint, countInfo) {
   clear(container);
+  const buildHintLine = () => {
+    const parts = [t("clickDragTextMultiple", state)];
+    if (hint) parts.push(hint);
+    if (countInfo) parts.push(countInfo);
+    return parts.join(" \u2022 ");
+  };
   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";
+    const gridContainer2 = document.createElement("div");
+    gridContainer2.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";
@@ -1640,36 +1898,17 @@ function renderResourcePills(container, rids, state, onRemove) {
         );
         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);
+      gridContainer2.appendChild(slot);
+    }
+    const hintText2 = document.createElement("div");
+    hintText2.className = "text-center text-xs text-gray-500 mt-2";
+    hintText2.textContent = buildHintLine();
+    container.appendChild(gridContainer2);
+    container.appendChild(hintText2);
     return;
   }
-  container.className = "files-list grid grid-cols-4 gap-3 mt-2";
+  const gridContainer = document.createElement("div");
+  gridContainer.className = "files-list grid grid-cols-4 gap-3";
   const currentImagesCount = rids ? rids.length : 0;
   const rowsNeeded = Math.floor(currentImagesCount / 4) + 1;
   const slotsNeeded = rowsNeeded * 4;
@@ -1684,7 +1923,7 @@ function renderResourcePills(container, rids, state, onRemove) {
         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 class="text-xs">${escapeHtml(t("previewError", state))}</div>
         </div>`;
       });
       if (onRemove) {
@@ -1717,15 +1956,20 @@ function renderResourcePills(container, rids, state, onRemove) {
         if (fileInput) fileInput.click();
       };
     }
-    container.appendChild(slot);
+    gridContainer.appendChild(slot);
   }
+  container.appendChild(gridContainer);
+  const hintText = document.createElement("div");
+  hintText.className = "text-center text-xs text-gray-500 mt-2";
+  hintText.textContent = buildHintLine();
+  container.appendChild(hintText);
 }
-function renderThumbnailError(slot, iconSize = "w-12 h-12") {
+function renderThumbnailError(slot, state, iconSize = "w-12 h-12") {
   slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-    <svg class="${iconSize} text-red-400" fill="currentColor" viewBox="0 0 24 24">
+    <svg class="${escapeHtml(iconSize)} text-red-400" 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-2h2v2zm0-4h-2V7h2v6z"/>
     </svg>
-    <div class="text-xs mt-1 text-red-600">Preview error</div>
+    <div class="text-xs mt-1 text-red-600">${escapeHtml(t("previewError", state))}</div>
   </div>`;
 }
 async function renderThumbnailForResource(slot, rid, meta, state) {
@@ -1761,7 +2005,7 @@ async function renderThumbnailForResource(slot, rid, meta, state) {
         if (state.config.onThumbnailError) {
           state.config.onThumbnailError(err, rid);
         }
-        renderThumbnailError(slot);
+        renderThumbnailError(slot, state);
       }
     } else {
       slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
@@ -1810,7 +2054,7 @@ async function renderThumbnailForResource(slot, rid, meta, state) {
             <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 class="text-xs mt-1">${escapeHtml(meta?.name || "Video")}</div>
           </div>`;
         }
       } catch (error) {
@@ -1818,30 +2062,32 @@ async function renderThumbnailForResource(slot, rid, meta, state) {
         if (state.config.onThumbnailError) {
           state.config.onThumbnailError(err, rid);
         }
-        renderThumbnailError(slot, "w-8 h-8");
+        renderThumbnailError(slot, state, "w-8 h-8");
       }
     } 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 class="text-xs mt-1">${escapeHtml(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 class="text-xs">${escapeHtml(meta?.name || "File")}</div>
     </div>`;
   }
 }
-function setEmptyFileContainer(fileContainer, state) {
+function setEmptyFileContainer(fileContainer, state, hint) {
+  const hintHtml = hint ? `<div class="text-xs text-gray-500 mt-1">${escapeHtml(hint)}</div>` : "";
   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 class="text-sm text-center">${escapeHtml(t("clickDragText", state))}</div>
+      ${hintHtml}
     </div>
   `;
 }
@@ -2101,13 +2347,13 @@ function renderFileElement(element, ctx, wrapper, pathKey) {
         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>`;
+        emptyState.innerHTML = `<div class="text-center">${escapeHtml(t("previewUnavailable", state))}</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>`;
+      emptyState.innerHTML = `<div class="text-center">${escapeHtml(t("noFileSelected", state))}</div>`;
       wrapper.appendChild(emptyState);
     }
   } else {
@@ -2151,7 +2397,8 @@ function renderFileElement(element, ctx, wrapper, pathKey) {
         }
       );
     } else {
-      setEmptyFileContainer(fileContainer, state);
+      const hint = makeFieldHint(element, state);
+      setEmptyFileContainer(fileContainer, state, hint);
     }
     fileContainer.onclick = fileUploadHandler;
     setupDragAndDrop(fileContainer, dragHandler);
@@ -2170,18 +2417,6 @@ function renderFileElement(element, ctx, wrapper, pathKey) {
     };
     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);
   }
 }
@@ -2200,18 +2435,24 @@ function renderFilesElement(element, ctx, wrapper, pathKey) {
         });
       });
     } 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>`;
+      resultsWrapper.innerHTML = `<div class="aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500"><div class="text-center">${escapeHtml(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();
-      });
+      renderResourcePills(
+        list,
+        initialFiles,
+        state,
+        (ridToRemove) => {
+          const index = initialFiles.indexOf(ridToRemove);
+          if (index > -1) {
+            initialFiles.splice(index, 1);
+          }
+          updateFilesList2();
+        },
+        filesFieldHint
+      );
     };
     const filesWrapper = document.createElement("div");
     filesWrapper.className = "space-y-2";
@@ -2229,6 +2470,7 @@ function renderFilesElement(element, ctx, wrapper, pathKey) {
     list.className = "files-list";
     const initialFiles = ctx.prefill[element.key] || [];
     addPrefillFilesToIndex(initialFiles, state);
+    const filesFieldHint = makeFieldHint(element, state);
     updateFilesList2();
     setupFilesDropHandler(
       filesContainer,
@@ -2249,10 +2491,6 @@ function renderFilesElement(element, ctx, wrapper, pathKey) {
     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);
   }
 }
@@ -2273,7 +2511,7 @@ function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
         });
       });
     } 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>`;
+      resultsWrapper.innerHTML = `<div class="aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500"><div class="text-center">${escapeHtml(t("noFilesSelected", state))}</div></div>`;
     }
     wrapper.appendChild(resultsWrapper);
   } else {
@@ -2293,19 +2531,24 @@ function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
     filesWrapper.appendChild(filesContainer);
     const initialFiles = Array.isArray(ctx.prefill[element.key]) ? [...ctx.prefill[element.key]] : [];
     addPrefillFilesToIndex(initialFiles, state);
+    const multipleFilesHint = makeFieldHint(element, state);
+    const buildCountInfo = () => {
+      const countText = initialFiles.length === 1 ? t("fileCountSingle", state, { count: initialFiles.length }) : t("fileCountPlural", state, { count: initialFiles.length });
+      const minMaxText = minFiles > 0 || maxFiles < Infinity ? ` ${t("fileCountRange", state, { min: minFiles, max: maxFiles })}` : "";
+      return countText + minMaxText;
+    };
     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);
+      renderResourcePills(
+        filesContainer,
+        initialFiles,
+        state,
+        (index) => {
+          initialFiles.splice(initialFiles.indexOf(index), 1);
+          updateFilesDisplay();
+        },
+        multipleFilesHint,
+        buildCountInfo()
+      );
     };
     setupFilesDropHandler(
       filesContainer,
@@ -2333,16 +2576,17 @@ function validateFileElement(element, key, context) {
   const isMultipleField = element.type === "files" || "multiple" in element && Boolean(element.multiple);
   const validateFileCount = (key2, resourceIds, element2) => {
     if (skipValidation) return;
+    const { state } = context;
     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`);
+      errors.push(`${key2}: ${t("required", state)}`);
     }
     if (resourceIds.length < minFiles) {
-      errors.push(`${key2}: minimum ${minFiles} files required`);
+      errors.push(`${key2}: ${t("minFiles", state, { min: minFiles })}`);
     }
     if (resourceIds.length > maxFiles) {
-      errors.push(`${key2}: maximum ${maxFiles} files allowed`);
+      errors.push(`${key2}: ${t("maxFiles", state, { max: maxFiles })}`);
     }
   };
   if (isMultipleField) {
@@ -2370,7 +2614,7 @@ function validateFileElement(element, key, context) {
     );
     const rid = input?.value ?? "";
     if (!skipValidation && element.required && rid === "") {
-      errors.push(`${key}: required`);
+      errors.push(`${key}: ${t("required", context.state)}`);
       return { value: null, errors };
     }
     return { value: rid || null, errors };
@@ -2611,14 +2855,16 @@ function renderColourElement(element, ctx, wrapper, pathKey) {
     const editUI = createEditColourUI(initialValue, pathKey, ctx);
     wrapper.appendChild(editUI);
   }
-  const colourHint = document.createElement("p");
-  colourHint.className = "mt-1";
-  colourHint.style.cssText = `
-    font-size: var(--fb-font-size-small);
-    color: var(--fb-text-secondary-color);
-  `;
-  colourHint.textContent = makeFieldHint(element);
-  wrapper.appendChild(colourHint);
+  if (!state.config.readonly) {
+    const colourHint = document.createElement("p");
+    colourHint.className = "mt-1";
+    colourHint.style.cssText = `
+      font-size: var(--fb-font-size-small);
+      color: var(--fb-text-secondary-color);
+    `;
+    colourHint.textContent = makeFieldHint(element, state);
+    wrapper.appendChild(colourHint);
+  }
 }
 function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
@@ -2707,48 +2953,65 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
       removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
+  let addRow = null;
+  let countDisplay = null;
+  if (!state.config.readonly) {
+    addRow = document.createElement("div");
+    addRow.className = "flex items-center gap-3 mt-2";
+    const addBtn = document.createElement("button");
+    addBtn.type = "button";
+    addBtn.className = "add-colour-btn 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 = "+";
+    addBtn.addEventListener("mouseenter", () => {
+      addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
+    });
+    addBtn.addEventListener("mouseleave", () => {
+      addBtn.style.backgroundColor = "transparent";
+    });
+    addBtn.onclick = () => {
+      const defaultColour = element.default || "#000000";
+      values.push(defaultColour);
+      addColourItem(defaultColour);
+      updateAddButton();
+      updateRemoveButtons();
+    };
+    countDisplay = document.createElement("span");
+    countDisplay.className = "text-sm text-gray-500";
+    addRow.appendChild(addBtn);
+    addRow.appendChild(countDisplay);
+    wrapper.appendChild(addRow);
+  }
   function updateAddButton() {
-    const existingAddBtn = wrapper.querySelector(".add-colour-btn");
-    if (existingAddBtn) existingAddBtn.remove();
-    if (!state.config.readonly && values.length < maxCount) {
-      const addBtn = document.createElement("button");
-      addBtn.type = "button";
-      addBtn.className = "add-colour-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 = "+";
-      addBtn.addEventListener("mouseenter", () => {
-        addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
-      });
-      addBtn.addEventListener("mouseleave", () => {
-        addBtn.style.backgroundColor = "transparent";
-      });
-      addBtn.onclick = () => {
-        const defaultColour = element.default || "#000000";
-        values.push(defaultColour);
-        addColourItem(defaultColour);
-        updateAddButton();
-        updateRemoveButtons();
-      };
-      wrapper.appendChild(addBtn);
+    if (!addRow || !countDisplay) return;
+    const addBtn = addRow.querySelector(".add-colour-btn");
+    if (addBtn) {
+      const disabled = values.length >= maxCount;
+      addBtn.disabled = disabled;
+      addBtn.style.opacity = disabled ? "0.5" : "1";
+      addBtn.style.pointerEvents = disabled ? "none" : "auto";
     }
+    countDisplay.textContent = `${values.length}/${maxCount === Infinity ? "\u221E" : maxCount}`;
   }
   values.forEach((value) => addColourItem(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);
+  if (!state.config.readonly) {
+    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, state);
+    wrapper.appendChild(hint);
+  }
 }
 function validateColourElement(element, key, context) {
   const errors = [];
@@ -2786,10 +3049,12 @@ function validateColourElement(element, key, context) {
     }
   };
   const validateColourValue = (input, val, fieldKey) => {
+    const { state } = context;
     if (!val) {
       if (!skipValidation && element.required) {
-        errors.push(`${fieldKey}: required`);
-        markValidity(input, "required");
+        const msg = t("required", state);
+        errors.push(`${fieldKey}: ${msg}`);
+        markValidity(input, msg);
         return "";
       }
       markValidity(input, null);
@@ -2797,8 +3062,9 @@ function validateColourElement(element, key, context) {
     }
     const normalized = normalizeColourValue(val);
     if (!skipValidation && !isValidHexColour(normalized)) {
-      errors.push(`${fieldKey}: invalid hex colour format`);
-      markValidity(input, "invalid hex colour format");
+      const msg = t("invalidHexColour", state);
+      errors.push(`${fieldKey}: ${msg}`);
+      markValidity(input, msg);
       return val;
     }
     markValidity(input, null);
@@ -2813,17 +3079,18 @@ function validateColourElement(element, key, context) {
       values.push(validated);
     });
     if (!skipValidation) {
+      const { state } = context;
       const minCount = element.minCount ?? 1;
       const maxCount = element.maxCount ?? Infinity;
       const filteredValues = values.filter((v) => v !== "");
       if (element.required && filteredValues.length === 0) {
-        errors.push(`${key}: required`);
+        errors.push(`${key}: ${t("required", state)}`);
       }
       if (filteredValues.length < minCount) {
-        errors.push(`${key}: minimum ${minCount} items required`);
+        errors.push(`${key}: ${t("minItems", state, { min: minCount })}`);
       }
       if (filteredValues.length > maxCount) {
-        errors.push(`${key}: maximum ${maxCount} items allowed`);
+        errors.push(`${key}: ${t("maxItems", state, { max: maxCount })}`);
       }
     }
     return { value: values, errors };
@@ -2833,8 +3100,9 @@ function validateColourElement(element, key, context) {
     );
     const val = hexInput?.value ?? "";
     if (!skipValidation && element.required && val === "") {
-      errors.push(`${key}: required`);
-      markValidity(hexInput, "required");
+      const msg = t("required", context.state);
+      errors.push(`${key}: ${msg}`);
+      markValidity(hexInput, msg);
       return { value: "", errors };
     }
     const validated = validateColourValue(hexInput, val, key);
@@ -2926,13 +3194,15 @@ function alignToStep(value, step) {
 }
 function createSliderUI(value, pathKey, element, ctx, readonly) {
   const container = document.createElement("div");
-  container.className = "slider-container space-y-2";
-  const sliderRow = document.createElement("div");
-  sliderRow.className = "flex items-center gap-3";
+  container.className = "slider-container";
+  const mainRow = document.createElement("div");
+  mainRow.className = "flex items-start gap-3";
+  const sliderSection = document.createElement("div");
+  sliderSection.className = "flex-1";
   const slider = document.createElement("input");
   slider.type = "range";
   slider.name = pathKey;
-  slider.className = "slider-input flex-1";
+  slider.className = "slider-input w-full";
   slider.disabled = readonly;
   const scale = element.scale || "linear";
   const min = element.min;
@@ -2970,25 +3240,13 @@ function createSliderUI(value, pathKey, element, ctx, readonly) {
     cursor: ${readonly ? "not-allowed" : "pointer"};
     opacity: ${readonly ? "0.6" : "1"};
   `;
-  const valueDisplay = document.createElement("span");
-  valueDisplay.className = "slider-value";
-  valueDisplay.style.cssText = `
-    min-width: 60px;
-    text-align: right;
-    font-size: var(--fb-font-size);
-    color: var(--fb-text-color);
-    font-family: var(--fb-font-family-mono, monospace);
-    font-weight: 500;
-  `;
-  valueDisplay.textContent = value.toFixed(step < 1 ? 2 : 0);
-  sliderRow.appendChild(slider);
-  sliderRow.appendChild(valueDisplay);
-  container.appendChild(sliderRow);
+  sliderSection.appendChild(slider);
   const labelsRow = document.createElement("div");
   labelsRow.className = "flex justify-between";
   labelsRow.style.cssText = `
     font-size: var(--fb-font-size-small);
     color: var(--fb-text-secondary-color);
+    margin-top: 4px;
   `;
   const minLabel = document.createElement("span");
   minLabel.textContent = min.toString();
@@ -2996,7 +3254,22 @@ function createSliderUI(value, pathKey, element, ctx, readonly) {
   maxLabel.textContent = max.toString();
   labelsRow.appendChild(minLabel);
   labelsRow.appendChild(maxLabel);
-  container.appendChild(labelsRow);
+  sliderSection.appendChild(labelsRow);
+  const valueDisplay = document.createElement("span");
+  valueDisplay.className = "slider-value";
+  valueDisplay.style.cssText = `
+    min-width: 60px;
+    text-align: right;
+    font-size: var(--fb-font-size);
+    color: var(--fb-text-color);
+    font-family: var(--fb-font-family-mono, monospace);
+    font-weight: 500;
+    padding-top: 2px;
+  `;
+  valueDisplay.textContent = value.toFixed(step < 1 ? 2 : 0);
+  mainRow.appendChild(sliderSection);
+  mainRow.appendChild(valueDisplay);
+  container.appendChild(mainRow);
   if (!readonly) {
     const updateValue = () => {
       let displayValue;
@@ -3050,14 +3323,16 @@ function renderSliderElement(element, ctx, wrapper, pathKey) {
     state.config.readonly
   );
   wrapper.appendChild(sliderUI);
-  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);
+  if (!state.config.readonly) {
+    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, state);
+    wrapper.appendChild(hint);
+  }
 }
 function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
   if (element.min === void 0 || element.min === null) {
@@ -3158,47 +3433,64 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
       removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
+  let addRow = null;
+  let countDisplay = null;
+  if (!state.config.readonly) {
+    addRow = document.createElement("div");
+    addRow.className = "flex items-center gap-3 mt-2";
+    const addBtn = document.createElement("button");
+    addBtn.type = "button";
+    addBtn.className = "add-slider-btn 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 = "+";
+    addBtn.addEventListener("mouseenter", () => {
+      addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
+    });
+    addBtn.addEventListener("mouseleave", () => {
+      addBtn.style.backgroundColor = "transparent";
+    });
+    addBtn.onclick = () => {
+      values.push(defaultValue);
+      addSliderItem(defaultValue);
+      updateAddButton();
+      updateRemoveButtons();
+    };
+    countDisplay = document.createElement("span");
+    countDisplay.className = "text-sm text-gray-500";
+    addRow.appendChild(addBtn);
+    addRow.appendChild(countDisplay);
+    wrapper.appendChild(addRow);
+  }
   function updateAddButton() {
-    const existingAddBtn = wrapper.querySelector(".add-slider-btn");
-    if (existingAddBtn) existingAddBtn.remove();
-    if (!state.config.readonly && values.length < maxCount) {
-      const addBtn = document.createElement("button");
-      addBtn.type = "button";
-      addBtn.className = "add-slider-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 = "+";
-      addBtn.addEventListener("mouseenter", () => {
-        addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
-      });
-      addBtn.addEventListener("mouseleave", () => {
-        addBtn.style.backgroundColor = "transparent";
-      });
-      addBtn.onclick = () => {
-        values.push(defaultValue);
-        addSliderItem(defaultValue);
-        updateAddButton();
-        updateRemoveButtons();
-      };
-      wrapper.appendChild(addBtn);
+    if (!addRow || !countDisplay) return;
+    const addBtn = addRow.querySelector(".add-slider-btn");
+    if (addBtn) {
+      const disabled = values.length >= maxCount;
+      addBtn.disabled = disabled;
+      addBtn.style.opacity = disabled ? "0.5" : "1";
+      addBtn.style.pointerEvents = disabled ? "none" : "auto";
     }
+    countDisplay.textContent = `${values.length}/${maxCount === Infinity ? "\u221E" : maxCount}`;
   }
   values.forEach((value) => addSliderItem(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);
+  if (!state.config.readonly) {
+    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, state);
+    wrapper.appendChild(hint);
+  }
 }
 function validateSliderElement(element, key, context) {
   const errors = [];
@@ -3254,11 +3546,13 @@ function validateSliderElement(element, key, context) {
     }
   };
   const validateSliderValue = (slider, fieldKey) => {
+    const { state } = context;
     const rawValue = slider.value;
     if (!rawValue) {
       if (!skipValidation && element.required) {
-        errors.push(`${fieldKey}: required`);
-        markValidity(slider, "required");
+        const msg = t("required", state);
+        errors.push(`${fieldKey}: ${msg}`);
+        markValidity(slider, msg);
         return null;
       }
       markValidity(slider, null);
@@ -3275,13 +3569,15 @@ function validateSliderElement(element, key, context) {
     }
     if (!skipValidation) {
       if (value < min) {
-        errors.push(`${fieldKey}: value ${value} < min ${min}`);
-        markValidity(slider, `value must be >= ${min}`);
+        const msg = t("minValue", state, { min });
+        errors.push(`${fieldKey}: ${msg}`);
+        markValidity(slider, msg);
         return value;
       }
       if (value > max) {
-        errors.push(`${fieldKey}: value ${value} > max ${max}`);
-        markValidity(slider, `value must be <= ${max}`);
+        const msg = t("maxValue", state, { max });
+        errors.push(`${fieldKey}: ${msg}`);
+        markValidity(slider, msg);
         return value;
       }
     }
@@ -3298,17 +3594,18 @@ function validateSliderElement(element, key, context) {
       values.push(value);
     });
     if (!skipValidation) {
+      const { state } = context;
       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`);
+        errors.push(`${key}: ${t("required", state)}`);
       }
       if (filteredValues.length < minCount) {
-        errors.push(`${key}: minimum ${minCount} items required`);
+        errors.push(`${key}: ${t("minItems", state, { min: minCount })}`);
       }
       if (filteredValues.length > maxCount) {
-        errors.push(`${key}: maximum ${maxCount} items allowed`);
+        errors.push(`${key}: ${t("maxItems", state, { max: maxCount })}`);
       }
     }
     return { value: values, errors };
@@ -3318,7 +3615,7 @@ function validateSliderElement(element, key, context) {
     );
     if (!slider) {
       if (!skipValidation && element.required) {
-        errors.push(`${key}: required`);
+        errors.push(`${key}: ${t("required", context.state)}`);
       }
       return { value: null, errors };
     }
@@ -3470,10 +3767,6 @@ 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");
   const columns = element.columns || 1;
   if (columns === 1) {
@@ -3481,8 +3774,6 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
   } else {
     itemsWrap.className = `grid grid-cols-${columns} gap-4`;
   }
-  containerWrap.appendChild(header);
-  header.appendChild(left);
   if (!ctx.state.config.readonly) {
     const hintsElement = createPrefillHints(element, pathKey);
     if (hintsElement) {
@@ -3503,21 +3794,16 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
     }
   });
   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 countDisplay = document.createElement("span");
+  countDisplay.className = "text-sm text-gray-500";
   const itemsWrap = document.createElement("div");
   itemsWrap.className = "space-y-4";
-  containerWrap.appendChild(header);
-  header.appendChild(left);
   if (!ctx.state.config.readonly) {
     const hintsElement = createPrefillHints(element, element.key);
     if (hintsElement) {
@@ -3531,7 +3817,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   const createAddButton = () => {
     const add = document.createElement("button");
     add.type = "button";
-    add.className = "add-container-btn mt-2 px-3 py-1 rounded";
+    add.className = "add-container-btn px-3 py-1 rounded";
     add.style.cssText = `
       color: var(--fb-primary-color);
       border: var(--fb-border-width) solid var(--fb-primary-color);
@@ -3612,7 +3898,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       existingAddBtn.style.opacity = currentCount >= max ? "0.5" : "1";
       existingAddBtn.style.pointerEvents = currentCount >= max ? "none" : "auto";
     }
-    left.innerHTML = `<span>${element.label || element.key}</span> <span class="text-sm text-gray-500">(${currentCount}/${max === Infinity ? "\u221E" : max})</span>`;
+    countDisplay.textContent = `${currentCount}/${max === Infinity ? "\u221E" : max}`;
   };
   if (pre && Array.isArray(pre)) {
     pre.forEach((prefillObj, idx) => {
@@ -3719,7 +4005,11 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   }
   containerWrap.appendChild(itemsWrap);
   if (!state.config.readonly) {
-    containerWrap.appendChild(createAddButton());
+    const addRow = document.createElement("div");
+    addRow.className = "flex items-center gap-3 mt-2";
+    addRow.appendChild(createAddButton());
+    addRow.appendChild(countDisplay);
+    containerWrap.appendChild(addRow);
   }
   updateAddButton();
   wrapper.appendChild(containerWrap);
@@ -3744,16 +4034,17 @@ function validateContainerElement(element, key, context) {
   }
   const validateContainerCount = (key2, items, element2) => {
     if (skipValidation) return;
+    const { state } = context;
     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`);
+      errors.push(`${key2}: ${t("required", state)}`);
     }
     if (items.length < minItems) {
-      errors.push(`${key2}: minimum ${minItems} items required`);
+      errors.push(`${key2}: ${t("minItems", state, { min: minItems })}`);
     }
     if (items.length > maxItems) {
-      errors.push(`${key2}: maximum ${maxItems} items allowed`);
+      errors.push(`${key2}: ${t("maxItems", state, { max: maxItems })}`);
     }
   };
   if ("multiple" in element && element.multiple) {
@@ -4300,7 +4591,7 @@ function dispatchToRenderer(element, ctx, wrapper, pathKey) {
     default: {
       const unsupported = document.createElement("div");
       unsupported.className = "text-red-500 text-sm";
-      unsupported.textContent = `Unsupported field type: ${element.type}`;
+      unsupported.textContent = t("unsupportedFieldType", ctx.state, { type: element.type });
       wrapper.appendChild(unsupported);
     }
   }
@@ -4344,31 +4635,112 @@ var defaultConfig = {
   locale: "en",
   translations: {
     en: {
-      addElement: "Add Element",
+      // UI texts
       removeElement: "Remove",
-      uploadText: "Upload",
-      dragDropText: "or drag and drop files",
-      dragDropTextSingle: "or drag and drop file",
       clickDragText: "Click or drag file",
+      clickDragTextMultiple: "Click or drag files",
       noFileSelected: "No file selected",
       noFilesSelected: "No files selected",
-      downloadButton: "Download"
+      downloadButton: "Download",
+      changeButton: "Change",
+      placeholderText: "Enter text",
+      previewAlt: "Preview",
+      previewUnavailable: "Preview unavailable",
+      previewError: "Preview error",
+      videoNotSupported: "Your browser does not support the video tag.",
+      // Field hints
+      hintLengthRange: "{min}-{max} chars",
+      hintMaxLength: "\u2264{max} chars",
+      hintMinLength: "\u2265{min} chars",
+      hintValueRange: "{min}-{max}",
+      hintMaxValue: "\u2264{max}",
+      hintMinValue: "\u2265{min}",
+      hintMaxSize: "\u2264{size}MB",
+      hintFormats: "{formats}",
+      hintRequired: "Required",
+      hintOptional: "Optional",
+      hintPattern: "Format: {pattern}",
+      fileCountSingle: "{count} file",
+      fileCountPlural: "{count} files",
+      fileCountRange: "({min}-{max})",
+      // Validation errors
+      required: "Required",
+      minItems: "Minimum {min} items required",
+      maxItems: "Maximum {max} items allowed",
+      minLength: "Minimum {min} characters",
+      maxLength: "Maximum {max} characters",
+      minValue: "Must be at least {min}",
+      maxValue: "Must be at most {max}",
+      patternMismatch: "Invalid format",
+      invalidPattern: "Invalid pattern in schema",
+      notANumber: "Must be a number",
+      invalidHexColour: "Invalid hex color",
+      minFiles: "Minimum {min} files required",
+      maxFiles: "Maximum {max} files allowed",
+      unsupportedFieldType: "Unsupported field type: {type}"
     },
     ru: {
-      addElement: "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u044D\u043B\u0435\u043C\u0435\u043D\u0442",
+      // UI texts
       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",
+      clickDragTextMultiple: "\u041D\u0430\u0436\u043C\u0438\u0442\u0435 \u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B",
       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"
+      downloadButton: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C",
+      changeButton: "\u0418\u0437\u043C\u0435\u043D\u0438\u0442\u044C",
+      placeholderText: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442",
+      previewAlt: "\u041F\u0440\u0435\u0434\u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440",
+      previewUnavailable: "\u041F\u0440\u0435\u0434\u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440 \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u0435\u043D",
+      previewError: "\u041E\u0448\u0438\u0431\u043A\u0430 \u043F\u0440\u0435\u0434\u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440\u0430",
+      videoNotSupported: "\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.",
+      // Field hints
+      hintLengthRange: "{min}-{max} \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432",
+      hintMaxLength: "\u2264{max} \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432",
+      hintMinLength: "\u2265{min} \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432",
+      hintValueRange: "{min}-{max}",
+      hintMaxValue: "\u2264{max}",
+      hintMinValue: "\u2265{min}",
+      hintMaxSize: "\u2264{size}\u041C\u0411",
+      hintFormats: "{formats}",
+      hintRequired: "\u041E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E\u0435",
+      hintOptional: "\u041D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E\u0435",
+      hintPattern: "\u0424\u043E\u0440\u043C\u0430\u0442: {pattern}",
+      fileCountSingle: "{count} \u0444\u0430\u0439\u043B",
+      fileCountPlural: "{count} \u0444\u0430\u0439\u043B\u043E\u0432",
+      fileCountRange: "({min}-{max})",
+      // Validation errors
+      required: "\u041E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E\u0435 \u043F\u043E\u043B\u0435",
+      minItems: "\u041C\u0438\u043D\u0438\u043C\u0443\u043C {min} \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u0432",
+      maxItems: "\u041C\u0430\u043A\u0441\u0438\u043C\u0443\u043C {max} \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u0432",
+      minLength: "\u041C\u0438\u043D\u0438\u043C\u0443\u043C {min} \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432",
+      maxLength: "\u041C\u0430\u043A\u0441\u0438\u043C\u0443\u043C {max} \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432",
+      minValue: "\u0417\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u043E\u043B\u0436\u043D\u043E \u0431\u044B\u0442\u044C \u043D\u0435 \u043C\u0435\u043D\u0435\u0435 {min}",
+      maxValue: "\u0417\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u043E\u043B\u0436\u043D\u043E \u0431\u044B\u0442\u044C \u043D\u0435 \u0431\u043E\u043B\u0435\u0435 {max}",
+      patternMismatch: "\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u0444\u043E\u0440\u043C\u0430\u0442",
+      invalidPattern: "\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u043F\u0430\u0442\u0442\u0435\u0440\u043D \u0432 \u0441\u0445\u0435\u043C\u0435",
+      notANumber: "\u0414\u043E\u043B\u0436\u043D\u043E \u0431\u044B\u0442\u044C \u0447\u0438\u0441\u043B\u043E\u043C",
+      invalidHexColour: "\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u0444\u043E\u0440\u043C\u0430\u0442 \u0446\u0432\u0435\u0442\u0430",
+      minFiles: "\u041C\u0438\u043D\u0438\u043C\u0443\u043C {min} \u0444\u0430\u0439\u043B\u043E\u0432",
+      maxFiles: "\u041C\u0430\u043A\u0441\u0438\u043C\u0443\u043C {max} \u0444\u0430\u0439\u043B\u043E\u0432",
+      unsupportedFieldType: "\u041D\u0435\u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u0442\u0438\u043F \u043F\u043E\u043B\u044F: {type}"
     }
   },
   theme: {}
 };
 function createInstanceState(config) {
+  const mergedTranslations = {
+    ...defaultConfig.translations
+  };
+  if (config?.translations) {
+    for (const [locale, userTranslations] of Object.entries(
+      config.translations
+    )) {
+      mergedTranslations[locale] = {
+        ...defaultConfig.translations[locale] || {},
+        ...userTranslations
+      };
+    }
+  }
   return {
     schema: null,
     formRoot: null,
@@ -4377,7 +4749,8 @@ function createInstanceState(config) {
     version: "1.0.0",
     config: {
       ...defaultConfig,
-      ...config
+      ...config,
+      translations: mergedTranslations
     },
     debounceTimer: null
   };