@dmitryvim/form-builder 0.2.7 → 0.2.9

package/dist/esm/index.js

@@ -87,6 +87,43 @@ function validateSchema(schema) {
         validateElements(element.elements, `${elementPath}.elements`);
       }
       if (element.type === "container" && element.elements) {
+        if ("columns" in element && element.columns !== void 0) {
+          const columns = element.columns;
+          const validColumns = [1, 2, 3, 4];
+          if (!Number.isInteger(columns) || !validColumns.includes(columns)) {
+            errors.push(
+              `${elementPath}: columns must be 1, 2, 3, or 4 (got ${columns})`
+            );
+          }
+        }
+        if ("prefillHints" in element && element.prefillHints) {
+          const prefillHints = element.prefillHints;
+          if (Array.isArray(prefillHints)) {
+            prefillHints.forEach((hint, hintIndex) => {
+              if (!hint.label || typeof hint.label !== "string") {
+                errors.push(
+                  `${elementPath}: prefillHints[${hintIndex}] must have a 'label' property of type string`
+                );
+              }
+              if (!hint.values || typeof hint.values !== "object") {
+                errors.push(
+                  `${elementPath}: prefillHints[${hintIndex}] must have a 'values' property of type object`
+                );
+              } else {
+                for (const fieldKey in hint.values) {
+                  const fieldExists = element.elements.some(
+                    (childElement) => childElement.key === fieldKey
+                  );
+                  if (!fieldExists) {
+                    errors.push(
+                      `container "${element.key}": prefillHints[${hintIndex}] references non-existent field "${fieldKey}"`
+                    );
+                  }
+                }
+              }
+            });
+          }
+        }
         validateElements(element.elements, `${elementPath}.elements`);
       }
       if (element.type === "select" && element.options) {
@@ -373,7 +410,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
         font-size: var(--fb-font-size);
         transition: all var(--fb-transition-duration);
       `;
-      addBtn.textContent = `+ Add ${element.label || "Text"}`;
+      addBtn.textContent = "+";
       addBtn.addEventListener("mouseenter", () => {
         addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
       });
@@ -622,7 +659,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
         removeBtn = document.createElement("button");
         removeBtn.type = "button";
         removeBtn.className = "remove-item-btn mt-1 px-2 py-1 text-red-600 hover:bg-red-50 rounded text-sm";
-        removeBtn.innerHTML = "\u2715 Remove";
+        removeBtn.innerHTML = "\u2715";
         removeBtn.onclick = () => {
           const currentIndex = Array.from(container.children).indexOf(
             item
@@ -650,7 +687,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
       const addBtn = document.createElement("button");
       addBtn.type = "button";
       addBtn.className = "add-textarea-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || "Textarea"}`;
+      addBtn.textContent = "+";
       addBtn.onclick = () => {
         values.push(element.default || "");
         addTextareaItem(element.default || "");
@@ -792,7 +829,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
       const addBtn = document.createElement("button");
       addBtn.type = "button";
       addBtn.className = "add-number-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || "Number"}`;
+      addBtn.textContent = "+";
       addBtn.onclick = () => {
         values.push(element.default || "");
         addNumberItem(element.default || "");
@@ -1074,7 +1111,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
       const addBtn = document.createElement("button");
       addBtn.type = "button";
       addBtn.className = "add-select-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || "Selection"}`;
+      addBtn.textContent = "+";
       addBtn.onclick = () => {
         const defaultValue = element.default || element.options?.[0]?.value || "";
         values.push(defaultValue);
@@ -2584,7 +2621,7 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
         font-size: var(--fb-font-size);
         transition: all var(--fb-transition-duration);
       `;
-      addBtn.textContent = `+ Add ${element.label || "Colour"}`;
+      addBtn.textContent = "+";
       addBtn.addEventListener("mouseenter", () => {
         addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
       });
@@ -2766,6 +2803,516 @@ function updateColourField(element, fieldPath, value, context) {
   }
 }
 
+// src/components/slider.ts
+function positionToExponential(position, min, max) {
+  if (min <= 0) {
+    throw new Error("Exponential scale requires min > 0");
+  }
+  const logMin = Math.log(min);
+  const logMax = Math.log(max);
+  return Math.exp(logMin + position * (logMax - logMin));
+}
+function exponentialToPosition(value, min, max) {
+  if (min <= 0) {
+    throw new Error("Exponential scale requires min > 0");
+  }
+  const logMin = Math.log(min);
+  const logMax = Math.log(max);
+  const logValue = Math.log(value);
+  return (logValue - logMin) / (logMax - logMin);
+}
+function alignToStep(value, step) {
+  return Math.round(value / step) * 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";
+  const slider = document.createElement("input");
+  slider.type = "range";
+  slider.name = pathKey;
+  slider.className = "slider-input flex-1";
+  slider.disabled = readonly;
+  const scale = element.scale || "linear";
+  const min = element.min;
+  const max = element.max;
+  const step = element.step ?? 1;
+  if (scale === "exponential") {
+    if (min <= 0) {
+      throw new Error(
+        `Slider "${element.key}": exponential scale requires min > 0 (got ${min})`
+      );
+    }
+    slider.min = "0";
+    slider.max = "1000";
+    slider.step = "1";
+    const position = exponentialToPosition(value, min, max);
+    slider.value = (position * 1e3).toString();
+  } else {
+    slider.min = min.toString();
+    slider.max = max.toString();
+    slider.step = step.toString();
+    slider.value = value.toString();
+  }
+  slider.style.cssText = `
+    height: 6px;
+    border-radius: 3px;
+    background: linear-gradient(
+      to right,
+      var(--fb-primary-color) 0%,
+      var(--fb-primary-color) ${(value - min) / (max - min) * 100}%,
+      var(--fb-border-color) ${(value - min) / (max - min) * 100}%,
+      var(--fb-border-color) 100%
+    );
+    outline: none;
+    transition: background 0.1s ease-in-out;
+    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);
+  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);
+  `;
+  const minLabel = document.createElement("span");
+  minLabel.textContent = min.toString();
+  const maxLabel = document.createElement("span");
+  maxLabel.textContent = max.toString();
+  labelsRow.appendChild(minLabel);
+  labelsRow.appendChild(maxLabel);
+  container.appendChild(labelsRow);
+  if (!readonly) {
+    const updateValue = () => {
+      let displayValue;
+      if (scale === "exponential") {
+        const position = parseFloat(slider.value) / 1e3;
+        displayValue = positionToExponential(position, min, max);
+        displayValue = alignToStep(displayValue, step);
+        displayValue = Math.max(min, Math.min(max, displayValue));
+      } else {
+        displayValue = parseFloat(slider.value);
+        displayValue = alignToStep(displayValue, step);
+      }
+      valueDisplay.textContent = displayValue.toFixed(step < 1 ? 2 : 0);
+      const percentage = (displayValue - min) / (max - min) * 100;
+      slider.style.background = `linear-gradient(
+        to right,
+        var(--fb-primary-color) 0%,
+        var(--fb-primary-color) ${percentage}%,
+        var(--fb-border-color) ${percentage}%,
+        var(--fb-border-color) 100%
+      )`;
+      if (ctx.instance) {
+        ctx.instance.triggerOnChange(pathKey, displayValue);
+      }
+    };
+    slider.addEventListener("input", updateValue);
+    slider.addEventListener("change", updateValue);
+  }
+  return container;
+}
+function renderSliderElement(element, ctx, wrapper, pathKey) {
+  if (element.min === void 0 || element.min === null) {
+    throw new Error(
+      `Slider field "${element.key}" requires "min" property`
+    );
+  }
+  if (element.max === void 0 || element.max === null) {
+    throw new Error(
+      `Slider field "${element.key}" requires "max" property`
+    );
+  }
+  if (element.min >= element.max) {
+    throw new Error(
+      `Slider field "${element.key}": min (${element.min}) must be less than max (${element.max})`
+    );
+  }
+  const state = ctx.state;
+  const defaultValue = element.default !== void 0 ? element.default : (element.min + element.max) / 2;
+  const initialValue = ctx.prefill[element.key] ?? defaultValue;
+  const sliderUI = createSliderUI(
+    initialValue,
+    pathKey,
+    element,
+    ctx,
+    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);
+}
+function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
+  if (element.min === void 0 || element.min === null) {
+    throw new Error(
+      `Slider field "${element.key}" requires "min" property`
+    );
+  }
+  if (element.max === void 0 || element.max === null) {
+    throw new Error(
+      `Slider field "${element.key}" requires "max" property`
+    );
+  }
+  if (element.min >= element.max) {
+    throw new Error(
+      `Slider field "${element.key}": min (${element.min}) must be less than max (${element.max})`
+    );
+  }
+  const state = ctx.state;
+  const prefillValues = ctx.prefill[element.key] || [];
+  const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
+  const minCount = element.minCount ?? 1;
+  const maxCount = element.maxCount ?? Infinity;
+  const defaultValue = element.default !== void 0 ? element.default : (element.min + element.max) / 2;
+  while (values.length < minCount) {
+    values.push(defaultValue);
+  }
+  const container = document.createElement("div");
+  container.className = "space-y-3";
+  wrapper.appendChild(container);
+  function updateIndices() {
+    const items = container.querySelectorAll(".multiple-slider-item");
+    items.forEach((item, index) => {
+      const slider = item.querySelector("input[type=range]");
+      if (slider) {
+        slider.setAttribute("name", `${pathKey}[${index}]`);
+      }
+    });
+  }
+  function addSliderItem(value = defaultValue, index = -1) {
+    const itemWrapper = document.createElement("div");
+    itemWrapper.className = "multiple-slider-item flex items-start gap-2";
+    const tempPathKey = `${pathKey}[${container.children.length}]`;
+    const sliderUI = createSliderUI(
+      value,
+      tempPathKey,
+      element,
+      ctx,
+      state.config.readonly
+    );
+    sliderUI.style.flex = "1";
+    itemWrapper.appendChild(sliderUI);
+    if (index === -1) {
+      container.appendChild(itemWrapper);
+    } else {
+      container.insertBefore(itemWrapper, container.children[index]);
+    }
+    updateIndices();
+    return itemWrapper;
+  }
+  function updateRemoveButtons() {
+    if (state.config.readonly) return;
+    const items = container.querySelectorAll(".multiple-slider-item");
+    const currentCount = items.length;
+    items.forEach((item) => {
+      let removeBtn = item.querySelector(
+        ".remove-item-btn"
+      );
+      if (!removeBtn) {
+        removeBtn = document.createElement("button");
+        removeBtn.type = "button";
+        removeBtn.className = "remove-item-btn px-2 py-1 rounded";
+        removeBtn.style.cssText = `
+          color: var(--fb-error-color);
+          background-color: transparent;
+          transition: background-color var(--fb-transition-duration);
+          margin-top: 8px;
+        `;
+        removeBtn.innerHTML = "\u2715";
+        removeBtn.addEventListener("mouseenter", () => {
+          removeBtn.style.backgroundColor = "var(--fb-background-hover-color)";
+        });
+        removeBtn.addEventListener("mouseleave", () => {
+          removeBtn.style.backgroundColor = "transparent";
+        });
+        removeBtn.onclick = () => {
+          const currentIndex = Array.from(container.children).indexOf(
+            item
+          );
+          if (container.children.length > minCount) {
+            values.splice(currentIndex, 1);
+            item.remove();
+            updateIndices();
+            updateAddButton();
+            updateRemoveButtons();
+          }
+        };
+        item.appendChild(removeBtn);
+      }
+      const disabled = currentCount <= minCount;
+      removeBtn.disabled = disabled;
+      removeBtn.style.opacity = disabled ? "0.5" : "1";
+      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
+    });
+  }
+  function updateAddButton() {
+    const existingAddBtn = wrapper.querySelector(".add-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);
+    }
+  }
+  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);
+}
+function validateSliderElement(element, key, context) {
+  const errors = [];
+  const { scopeRoot, skipValidation } = context;
+  if (element.min === void 0 || element.min === null) {
+    throw new Error(
+      `Slider validation: field "${key}" requires "min" property`
+    );
+  }
+  if (element.max === void 0 || element.max === null) {
+    throw new Error(
+      `Slider validation: field "${key}" requires "max" property`
+    );
+  }
+  const min = element.min;
+  const max = element.max;
+  const step = element.step ?? 1;
+  const scale = element.scale || "linear";
+  const markValidity = (input, errorMessage) => {
+    if (!input) return;
+    const errorId = `error-${input.getAttribute("name") || Math.random().toString(36).substring(7)}`;
+    let errorElement = document.getElementById(errorId);
+    if (errorMessage) {
+      input.classList.add("invalid");
+      input.title = errorMessage;
+      if (!errorElement) {
+        errorElement = document.createElement("div");
+        errorElement.id = errorId;
+        errorElement.className = "error-message";
+        errorElement.style.cssText = `
+          color: var(--fb-error-color);
+          font-size: var(--fb-font-size-small);
+          margin-top: 0.25rem;
+        `;
+        const sliderContainer = input.closest(".slider-container");
+        if (sliderContainer && sliderContainer.nextSibling) {
+          sliderContainer.parentNode?.insertBefore(errorElement, sliderContainer.nextSibling);
+        } else if (sliderContainer) {
+          sliderContainer.parentNode?.appendChild(errorElement);
+        }
+      }
+      errorElement.textContent = errorMessage;
+      errorElement.style.display = "block";
+    } else {
+      input.classList.remove("invalid");
+      input.title = "";
+      if (errorElement) {
+        errorElement.remove();
+      }
+    }
+  };
+  const validateSliderValue = (slider, fieldKey) => {
+    const rawValue = slider.value;
+    if (!rawValue) {
+      if (!skipValidation && element.required) {
+        errors.push(`${fieldKey}: required`);
+        markValidity(slider, "required");
+        return null;
+      }
+      markValidity(slider, null);
+      return null;
+    }
+    let value;
+    if (scale === "exponential") {
+      const position = parseFloat(rawValue) / 1e3;
+      value = positionToExponential(position, min, max);
+      value = alignToStep(value, step);
+    } else {
+      value = parseFloat(rawValue);
+      value = alignToStep(value, step);
+    }
+    if (!skipValidation) {
+      if (value < min) {
+        errors.push(`${fieldKey}: value ${value} < min ${min}`);
+        markValidity(slider, `value must be >= ${min}`);
+        return value;
+      }
+      if (value > max) {
+        errors.push(`${fieldKey}: value ${value} > max ${max}`);
+        markValidity(slider, `value must be <= ${max}`);
+        return value;
+      }
+    }
+    markValidity(slider, null);
+    return value;
+  };
+  if (element.multiple) {
+    const sliders = scopeRoot.querySelectorAll(
+      `input[type="range"][name^="${key}["]`
+    );
+    const values = [];
+    sliders.forEach((slider, index) => {
+      const value = validateSliderValue(slider, `${key}[${index}]`);
+      values.push(value);
+    });
+    if (!skipValidation) {
+      const minCount = element.minCount ?? 1;
+      const maxCount = element.maxCount ?? Infinity;
+      const filteredValues = values.filter((v) => v !== null);
+      if (element.required && filteredValues.length === 0) {
+        errors.push(`${key}: required`);
+      }
+      if (filteredValues.length < minCount) {
+        errors.push(`${key}: minimum ${minCount} items required`);
+      }
+      if (filteredValues.length > maxCount) {
+        errors.push(`${key}: maximum ${maxCount} items allowed`);
+      }
+    }
+    return { value: values, errors };
+  } else {
+    const slider = scopeRoot.querySelector(
+      `input[type="range"][name="${key}"]`
+    );
+    if (!slider) {
+      if (!skipValidation && element.required) {
+        errors.push(`${key}: required`);
+      }
+      return { value: null, errors };
+    }
+    const value = validateSliderValue(slider, key);
+    return { value, errors };
+  }
+}
+function updateSliderField(element, fieldPath, value, context) {
+  const { scopeRoot } = context;
+  const min = element.min;
+  const max = element.max;
+  const step = element.step ?? 1;
+  const scale = element.scale || "linear";
+  if (element.multiple) {
+    if (!Array.isArray(value)) {
+      console.warn(
+        `updateSliderField: Expected array for multiple field "${fieldPath}", got ${typeof value}`
+      );
+      return;
+    }
+    const sliders = scopeRoot.querySelectorAll(
+      `input[type="range"][name^="${fieldPath}["]`
+    );
+    sliders.forEach((slider, index) => {
+      if (index < value.length && value[index] !== null) {
+        const numValue = Number(value[index]);
+        if (scale === "exponential") {
+          const position = exponentialToPosition(numValue, min, max);
+          slider.value = (position * 1e3).toString();
+        } else {
+          slider.value = numValue.toString();
+        }
+        const sliderContainer = slider.closest(".slider-container");
+        if (sliderContainer) {
+          const valueDisplay = sliderContainer.querySelector(".slider-value");
+          if (valueDisplay) {
+            valueDisplay.textContent = numValue.toFixed(step < 1 ? 2 : 0);
+          }
+          const percentage = (numValue - min) / (max - min) * 100;
+          slider.style.background = `linear-gradient(
+            to right,
+            var(--fb-primary-color) 0%,
+            var(--fb-primary-color) ${percentage}%,
+            var(--fb-border-color) ${percentage}%,
+            var(--fb-border-color) 100%
+          )`;
+        }
+        slider.classList.remove("invalid");
+        slider.title = "";
+      }
+    });
+    if (value.length !== sliders.length) {
+      console.warn(
+        `updateSliderField: Multiple field "${fieldPath}" has ${sliders.length} sliders but received ${value.length} values. Consider re-rendering for add/remove.`
+      );
+    }
+  } else {
+    const slider = scopeRoot.querySelector(
+      `input[type="range"][name="${fieldPath}"]`
+    );
+    if (slider && value !== null && value !== void 0) {
+      const numValue = Number(value);
+      if (scale === "exponential") {
+        const position = exponentialToPosition(numValue, min, max);
+        slider.value = (position * 1e3).toString();
+      } else {
+        slider.value = numValue.toString();
+      }
+      const sliderContainer = slider.closest(".slider-container");
+      if (sliderContainer) {
+        const valueDisplay = sliderContainer.querySelector(".slider-value");
+        if (valueDisplay) {
+          valueDisplay.textContent = numValue.toFixed(step < 1 ? 2 : 0);
+        }
+        const percentage = (numValue - min) / (max - min) * 100;
+        slider.style.background = `linear-gradient(
+          to right,
+          var(--fb-primary-color) 0%,
+          var(--fb-primary-color) ${percentage}%,
+          var(--fb-border-color) ${percentage}%,
+          var(--fb-border-color) 100%
+        )`;
+      }
+      slider.classList.remove("invalid");
+      slider.title = "";
+    }
+  }
+}
+
 // src/components/container.ts
 var renderElementFunc = null;
 function setRenderElement(fn) {
@@ -2779,6 +3326,24 @@ function renderElement(element, ctx) {
   }
   return renderElementFunc(element, ctx);
 }
+function createPrefillHints(element, pathKey) {
+  if (!element.prefillHints || element.prefillHints.length === 0) {
+    return null;
+  }
+  const hintsContainer = document.createElement("div");
+  hintsContainer.className = "fb-prefill-hints flex flex-wrap gap-2 mb-4";
+  element.prefillHints.forEach((hint, index) => {
+    const hintButton = document.createElement("button");
+    hintButton.type = "button";
+    hintButton.className = "fb-prefill-hint";
+    hintButton.textContent = hint.label;
+    hintButton.setAttribute("data-hint-values", JSON.stringify(hint.values));
+    hintButton.setAttribute("data-container-key", pathKey);
+    hintButton.setAttribute("data-hint-index", String(index));
+    hintsContainer.appendChild(hintButton);
+  });
+  return hintsContainer;
+}
 function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
   const containerWrap = document.createElement("div");
   containerWrap.className = "border border-gray-200 rounded-lg p-4 bg-gray-50";
@@ -2788,9 +3353,20 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
   const left = document.createElement("div");
   left.className = "flex-1";
   const itemsWrap = document.createElement("div");
-  itemsWrap.className = "space-y-4";
+  const columns = element.columns || 1;
+  if (columns === 1) {
+    itemsWrap.className = "space-y-4";
+  } 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) {
+      containerWrap.appendChild(hintsElement);
+    }
+  }
   const subCtx = {
     path: pathJoin(ctx.path, element.key),
     prefill: ctx.prefill?.[element.key] || {},
@@ -2816,14 +3392,15 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   header.className = "flex justify-between items-center mb-4";
   const left = document.createElement("div");
   left.className = "flex-1";
-  const right = document.createElement("div");
-  right.className = "flex gap-2";
   const itemsWrap = document.createElement("div");
   itemsWrap.className = "space-y-4";
   containerWrap.appendChild(header);
   header.appendChild(left);
-  if (!state.config.readonly) {
-    header.appendChild(right);
+  if (!ctx.state.config.readonly) {
+    const hintsElement = createPrefillHints(element, element.key);
+    if (hintsElement) {
+      containerWrap.appendChild(hintsElement);
+    }
   }
   const min = element.minCount ?? 0;
   const max = element.maxCount ?? Infinity;
@@ -2832,8 +3409,21 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   const createAddButton = () => {
     const add = document.createElement("button");
     add.type = "button";
-    add.className = "px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors";
-    add.textContent = t("addElement", state);
+    add.className = "add-container-btn mt-2 px-3 py-1 rounded";
+    add.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);
+    `;
+    add.textContent = "+";
+    add.addEventListener("mouseenter", () => {
+      add.style.backgroundColor = "var(--fb-background-hover-color)";
+    });
+    add.addEventListener("mouseleave", () => {
+      add.style.backgroundColor = "transparent";
+    });
     add.onclick = () => {
       if (countItems() < max) {
         const idx = countItems();
@@ -2847,16 +3437,35 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         const item = document.createElement("div");
         item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
         item.setAttribute("data-container-item", `${element.key}[${idx}]`);
+        const childWrapper = document.createElement("div");
+        const columns = element.columns || 1;
+        if (columns === 1) {
+          childWrapper.className = "space-y-4";
+        } else {
+          childWrapper.className = `grid grid-cols-${columns} gap-4`;
+        }
         element.elements.forEach((child) => {
           if (!child.hidden) {
-            item.appendChild(renderElement(child, subCtx));
+            childWrapper.appendChild(renderElement(child, subCtx));
           }
         });
+        item.appendChild(childWrapper);
         if (!state.config.readonly) {
           const rem = document.createElement("button");
           rem.type = "button";
-          rem.className = "absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors";
-          rem.textContent = "\xD7";
+          rem.className = "absolute top-2 right-2 px-2 py-1 rounded";
+          rem.style.cssText = `
+            color: var(--fb-error-color);
+            background-color: transparent;
+            transition: background-color var(--fb-transition-duration);
+          `;
+          rem.textContent = "\u2715";
+          rem.addEventListener("mouseenter", () => {
+            rem.style.backgroundColor = "var(--fb-background-hover-color)";
+          });
+          rem.addEventListener("mouseleave", () => {
+            rem.style.backgroundColor = "transparent";
+          });
           rem.onclick = () => {
             item.remove();
             updateAddButton();
@@ -2872,16 +3481,14 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   };
   const updateAddButton = () => {
     const currentCount = countItems();
-    const addBtn = right.querySelector("button");
-    if (addBtn) {
-      addBtn.disabled = currentCount >= max;
-      addBtn.style.opacity = currentCount >= max ? "0.5" : "1";
+    const existingAddBtn = containerWrap.querySelector(".add-container-btn");
+    if (existingAddBtn) {
+      existingAddBtn.disabled = currentCount >= max;
+      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>`;
   };
-  if (!state.config.readonly) {
-    right.appendChild(createAddButton());
-  }
   if (pre && Array.isArray(pre)) {
     pre.forEach((prefillObj, idx) => {
       const subCtx = {
@@ -2894,16 +3501,35 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       const item = document.createElement("div");
       item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
       item.setAttribute("data-container-item", `${element.key}[${idx}]`);
+      const childWrapper = document.createElement("div");
+      const columns = element.columns || 1;
+      if (columns === 1) {
+        childWrapper.className = "space-y-4";
+      } else {
+        childWrapper.className = `grid grid-cols-${columns} gap-4`;
+      }
       element.elements.forEach((child) => {
         if (!child.hidden) {
-          item.appendChild(renderElement(child, subCtx));
+          childWrapper.appendChild(renderElement(child, subCtx));
         }
       });
+      item.appendChild(childWrapper);
       if (!state.config.readonly) {
         const rem = document.createElement("button");
         rem.type = "button";
-        rem.className = "absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors";
-        rem.textContent = "\xD7";
+        rem.className = "absolute top-2 right-2 px-2 py-1 rounded";
+        rem.style.cssText = `
+          color: var(--fb-error-color);
+          background-color: transparent;
+          transition: background-color var(--fb-transition-duration);
+        `;
+        rem.textContent = "\u2715";
+        rem.addEventListener("mouseenter", () => {
+          rem.style.backgroundColor = "var(--fb-background-hover-color)";
+        });
+        rem.addEventListener("mouseleave", () => {
+          rem.style.backgroundColor = "transparent";
+        });
         rem.onclick = () => {
           item.remove();
           updateAddButton();
@@ -2927,15 +3553,34 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       const item = document.createElement("div");
       item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
       item.setAttribute("data-container-item", `${element.key}[${idx}]`);
+      const childWrapper = document.createElement("div");
+      const columns = element.columns || 1;
+      if (columns === 1) {
+        childWrapper.className = "space-y-4";
+      } else {
+        childWrapper.className = `grid grid-cols-${columns} gap-4`;
+      }
       element.elements.forEach((child) => {
         if (!child.hidden) {
-          item.appendChild(renderElement(child, subCtx));
+          childWrapper.appendChild(renderElement(child, subCtx));
         }
       });
+      item.appendChild(childWrapper);
       const rem = document.createElement("button");
       rem.type = "button";
-      rem.className = "absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors";
-      rem.textContent = "\xD7";
+      rem.className = "absolute top-2 right-2 px-2 py-1 rounded";
+      rem.style.cssText = `
+        color: var(--fb-error-color);
+        background-color: transparent;
+        transition: background-color var(--fb-transition-duration);
+      `;
+      rem.textContent = "\u2715";
+      rem.addEventListener("mouseenter", () => {
+        rem.style.backgroundColor = "var(--fb-background-hover-color)";
+      });
+      rem.addEventListener("mouseleave", () => {
+        rem.style.backgroundColor = "transparent";
+      });
       rem.onclick = () => {
         if (countItems() > min) {
           item.remove();
@@ -2948,6 +3593,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
     }
   }
   containerWrap.appendChild(itemsWrap);
+  if (!state.config.readonly) {
+    containerWrap.appendChild(createAddButton());
+  }
   updateAddButton();
   wrapper.appendChild(containerWrap);
 }
@@ -3318,6 +3966,13 @@ function dispatchToRenderer(element, ctx, wrapper, pathKey) {
         renderColourElement(element, ctx, wrapper, pathKey);
       }
       break;
+    case "slider":
+      if (isMultiple) {
+        renderMultipleSliderElement(element, ctx, wrapper, pathKey);
+      } else {
+        renderSliderElement(element, ctx, wrapper, pathKey);
+      }
+      break;
     case "group":
       renderGroupElement(element, ctx, wrapper, pathKey);
       break;
@@ -3635,6 +4290,10 @@ var componentRegistry = {
     validate: validateColourElement,
     update: updateColourField
   },
+  slider: {
+    validate: validateSliderElement,
+    update: updateSliderField
+  },
   container: {
     validate: validateContainerElement,
     update: updateContainerField
@@ -3991,6 +4650,33 @@ var FormBuilderInstance = class {
       this.renderFormLevelActions(allFormLevelActions, trueFormLevelActions);
     }
   }
+  /**
+   * Handle prefill hint click - updates container fields with hint values
+   */
+  handlePrefillHintClick(event) {
+    const target = event.target;
+    if (!target.classList.contains("fb-prefill-hint")) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const hintValuesJson = target.getAttribute("data-hint-values");
+    const containerKey = target.getAttribute("data-container-key");
+    if (!hintValuesJson || !containerKey) {
+      console.warn("Prefill hint missing required data attributes");
+      return;
+    }
+    try {
+      const hintValues = JSON.parse(hintValuesJson);
+      for (const fieldKey in hintValues) {
+        const fullPath = `${containerKey}.${fieldKey}`;
+        const value = hintValues[fieldKey];
+        this.updateField(fullPath, value);
+      }
+    } catch (error) {
+      console.error("Error parsing prefill hint values:", error);
+    }
+  }
   /**
    * Render form from schema
    */
@@ -4023,6 +4709,9 @@ var FormBuilderInstance = class {
       formEl.appendChild(block);
     });
     root.appendChild(formEl);
+    if (!this.state.config.readonly) {
+      root.addEventListener("click", this.handlePrefillHintClick.bind(this));
+    }
     if (this.state.config.readonly && this.state.externalActions && Array.isArray(this.state.externalActions)) {
       this.renderExternalActions();
     }