@dmitryvim/form-builder 0.2.6 → 0.2.8

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) {
@@ -1222,6 +1259,172 @@ function t(key, state) {
 }
 
 // src/components/file.ts
+function renderLocalImagePreview(container, file, fileName) {
+  const img = document.createElement("img");
+  img.className = "w-full h-full object-contain";
+  img.alt = fileName || "Preview";
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    img.src = e.target?.result || "";
+  };
+  reader.readAsDataURL(file);
+  container.appendChild(img);
+}
+function renderLocalVideoPreview(container, file, videoType, resourceId, state, deps) {
+  const videoUrl = URL.createObjectURL(file);
+  container.onclick = null;
+  const newContainer = container.cloneNode(false);
+  if (container.parentNode) {
+    container.parentNode.replaceChild(newContainer, container);
+  }
+  newContainer.innerHTML = `
+    <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.
+      </video>
+      <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10 flex gap-1">
+        <button class="bg-red-600 bg-opacity-75 hover:bg-opacity-90 text-white p-1 rounded text-xs delete-file-btn">
+          ${t("removeElement", state)}
+        </button>
+        <button class="bg-gray-800 bg-opacity-75 hover:bg-opacity-90 text-white p-1 rounded text-xs change-file-btn">
+          Change
+        </button>
+      </div>
+    </div>
+  `;
+  attachVideoButtonHandlers(newContainer, resourceId, state, deps);
+  return newContainer;
+}
+function attachVideoButtonHandlers(container, resourceId, state, deps) {
+  const changeBtn = container.querySelector(".change-file-btn");
+  if (changeBtn) {
+    changeBtn.onclick = (e) => {
+      e.stopPropagation();
+      if (deps?.picker) {
+        deps.picker.click();
+      }
+    };
+  }
+  const deleteBtn = container.querySelector(".delete-file-btn");
+  if (deleteBtn) {
+    deleteBtn.onclick = (e) => {
+      e.stopPropagation();
+      handleVideoDelete(container, resourceId, state, deps);
+    };
+  }
+}
+function handleVideoDelete(container, resourceId, state, deps) {
+  state.resourceIndex.delete(resourceId);
+  const hiddenInput = container.parentElement?.querySelector(
+    'input[type="hidden"]'
+  );
+  if (hiddenInput) {
+    hiddenInput.value = "";
+  }
+  if (deps?.fileUploadHandler) {
+    container.onclick = deps.fileUploadHandler;
+  }
+  if (deps?.dragHandler) {
+    setupDragAndDrop(container, deps.dragHandler);
+  }
+  container.innerHTML = `
+    <div class="flex flex-col items-center justify-center h-full text-gray-400">
+      <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+      </svg>
+      <div class="text-sm text-center">${t("clickDragText", state)}</div>
+    </div>
+  `;
+}
+function renderUploadedVideoPreview(container, thumbnailUrl, videoType) {
+  const video = document.createElement("video");
+  video.className = "w-full h-full object-contain";
+  video.controls = true;
+  video.preload = "metadata";
+  video.muted = true;
+  const source = document.createElement("source");
+  source.src = thumbnailUrl;
+  source.type = videoType;
+  video.appendChild(source);
+  video.appendChild(document.createTextNode("Your browser does not support the video tag."));
+  container.appendChild(video);
+}
+function renderDeleteButton(container, resourceId, state) {
+  addDeleteButton(container, state, () => {
+    state.resourceIndex.delete(resourceId);
+    const hiddenInput = container.parentElement?.querySelector(
+      'input[type="hidden"]'
+    );
+    if (hiddenInput) {
+      hiddenInput.value = "";
+    }
+    container.innerHTML = `
+      <div class="flex flex-col items-center justify-center h-full text-gray-400">
+        <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+        </svg>
+        <div class="text-sm text-center">${t("clickDragText", state)}</div>
+      </div>
+    `;
+  });
+}
+async function renderLocalFilePreview(container, meta, fileName, resourceId, isReadonly, state, deps) {
+  if (!meta.file || !(meta.file instanceof File)) {
+    return;
+  }
+  if (meta.type && meta.type.startsWith("image/")) {
+    renderLocalImagePreview(container, meta.file, fileName);
+  } else if (meta.type && meta.type.startsWith("video/")) {
+    const newContainer = renderLocalVideoPreview(
+      container,
+      meta.file,
+      meta.type,
+      resourceId,
+      state,
+      deps
+    );
+    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>`;
+  }
+  if (!isReadonly && !(meta.type && meta.type.startsWith("video/"))) {
+    renderDeleteButton(container, resourceId, state);
+  }
+}
+async function renderUploadedFilePreview(container, resourceId, fileName, meta, state) {
+  if (!state.config.getThumbnail) {
+    setEmptyFileContainer(container, state);
+    return;
+  }
+  try {
+    const thumbnailUrl = await state.config.getThumbnail(resourceId);
+    if (thumbnailUrl) {
+      clear(container);
+      if (meta && meta.type && meta.type.startsWith("video/")) {
+        renderUploadedVideoPreview(container, thumbnailUrl, meta.type);
+      } else {
+        const img = document.createElement("img");
+        img.className = "w-full h-full object-contain";
+        img.alt = fileName || "Preview";
+        img.src = thumbnailUrl;
+        container.appendChild(img);
+      }
+    } else {
+      setEmptyFileContainer(container, state);
+    }
+  } catch (error) {
+    console.error("Failed to get thumbnail:", error);
+    container.innerHTML = `
+      <div class="flex flex-col items-center justify-center h-full text-gray-400">
+        <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+        </svg>
+        <div class="text-sm text-center">${fileName || "Preview unavailable"}</div>
+      </div>
+    `;
+  }
+}
 async function renderFilePreview(container, resourceId, state, options = {}) {
   const { fileName = "", isReadonly = false, deps = null } = options;
   if (!isReadonly && deps && (!deps.picker || !deps.fileUploadHandler || !deps.dragHandler)) {
@@ -1233,141 +1436,19 @@ async function renderFilePreview(container, resourceId, state, options = {}) {
   if (isReadonly) {
     container.classList.add("cursor-pointer");
   }
-  const img = document.createElement("img");
-  img.className = "w-full h-full object-contain";
-  img.alt = fileName || "Preview";
   const meta = state.resourceIndex.get(resourceId);
   if (meta && meta.file && meta.file instanceof File) {
-    if (meta.type && meta.type.startsWith("image/")) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        img.src = e.target?.result || "";
-      };
-      reader.readAsDataURL(meta.file);
-      container.appendChild(img);
-    } else if (meta.type && meta.type.startsWith("video/")) {
-      const videoUrl = URL.createObjectURL(meta.file);
-      container.onclick = null;
-      const newContainer = container.cloneNode(false);
-      if (container.parentNode) {
-        container.parentNode.replaceChild(newContainer, container);
-      }
-      container = newContainer;
-      container.innerHTML = `
-        <div class="relative group h-full">
-          <video class="w-full h-full object-contain" controls preload="auto" muted>
-            <source src="${videoUrl}" type="${meta.type}">
-            Your browser does not support the video tag.
-          </video>
-          <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10 flex gap-1">
-            <button class="bg-red-600 bg-opacity-75 hover:bg-opacity-90 text-white p-1 rounded text-xs delete-file-btn">
-              ${t("removeElement", state)}
-            </button>
-            <button class="bg-gray-800 bg-opacity-75 hover:bg-opacity-90 text-white p-1 rounded text-xs change-file-btn">
-              Change
-            </button>
-          </div>
-        </div>
-      `;
-      const changeBtn = container.querySelector(
-        ".change-file-btn"
-      );
-      if (changeBtn) {
-        changeBtn.onclick = (e) => {
-          e.stopPropagation();
-          if (deps?.picker) {
-            deps.picker.click();
-          }
-        };
-      }
-      const deleteBtn = container.querySelector(
-        ".delete-file-btn"
-      );
-      if (deleteBtn) {
-        deleteBtn.onclick = (e) => {
-          e.stopPropagation();
-          state.resourceIndex.delete(resourceId);
-          const hiddenInput = container.parentElement?.querySelector(
-            'input[type="hidden"]'
-          );
-          if (hiddenInput) {
-            hiddenInput.value = "";
-          }
-          if (deps?.fileUploadHandler) {
-            container.onclick = deps.fileUploadHandler;
-          }
-          if (deps?.dragHandler) {
-            setupDragAndDrop(container, deps.dragHandler);
-          }
-          container.innerHTML = `
-            <div class="flex flex-col items-center justify-center h-full text-gray-400">
-              <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-              </svg>
-              <div class="text-sm text-center">${t("clickDragText", state)}</div>
-            </div>
-          `;
-        };
-      }
-    } else {
-      container.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">\u{1F4C1}</div><div class="text-sm">${fileName}</div></div>`;
-    }
-    if (!isReadonly && !(meta && meta.type && meta.type.startsWith("video/"))) {
-      addDeleteButton(container, state, () => {
-        state.resourceIndex.delete(resourceId);
-        const hiddenInput = container.parentElement?.querySelector(
-          'input[type="hidden"]'
-        );
-        if (hiddenInput) {
-          hiddenInput.value = "";
-        }
-        container.innerHTML = `
-          <div class="flex flex-col items-center justify-center h-full text-gray-400">
-            <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-            </svg>
-            <div class="text-sm text-center">${t("clickDragText", state)}</div>
-          </div>
-        `;
-      });
-    }
-  } else if (state.config.getThumbnail) {
-    try {
-      const thumbnailUrl = await state.config.getThumbnail(resourceId);
-      if (thumbnailUrl) {
-        clear(container);
-        if (meta && meta.type && meta.type.startsWith("video/")) {
-          const video = document.createElement("video");
-          video.className = "w-full h-full object-contain";
-          video.controls = true;
-          video.preload = "metadata";
-          video.muted = true;
-          const source = document.createElement("source");
-          source.src = thumbnailUrl;
-          source.type = meta.type;
-          video.appendChild(source);
-          video.appendChild(document.createTextNode("Your browser does not support the video tag."));
-          container.appendChild(video);
-        } else {
-          img.src = thumbnailUrl;
-          container.appendChild(img);
-        }
-      } else {
-        setEmptyFileContainer(container, state);
-      }
-    } catch (error) {
-      console.error("Failed to get thumbnail:", error);
-      container.innerHTML = `
-        <div class="flex flex-col items-center justify-center h-full text-gray-400">
-          <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
-            <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-          </svg>
-          <div class="text-sm text-center">${fileName || "Preview unavailable"}</div>
-        </div>
-      `;
-    }
+    await renderLocalFilePreview(
+      container,
+      meta,
+      fileName,
+      resourceId,
+      isReadonly,
+      state,
+      deps
+    );
   } else {
-    setEmptyFileContainer(container, state);
+    await renderUploadedFilePreview(container, resourceId, fileName, meta, state);
   }
 }
 async function renderFilePreviewReadonly(resourceId, state, fileName) {
@@ -2268,114 +2349,1121 @@ function updateFileField(element, fieldPath, value, context) {
   }
 }
 
-// src/components/container.ts
-var renderElementFunc = null;
-function setRenderElement(fn) {
-  renderElementFunc = fn;
+// src/components/colour.ts
+function normalizeColourValue(value) {
+  if (!value) return "#000000";
+  return value.toUpperCase();
 }
-function renderElement(element, ctx) {
-  if (!renderElementFunc) {
-    throw new Error(
-      "renderElement not initialized. Import from components/index.ts"
-    );
+function isValidHexColour(value) {
+  return /^#[0-9A-F]{6}$/i.test(value) || /^#[0-9A-F]{3}$/i.test(value);
+}
+function expandHexColour(value) {
+  if (/^#[0-9A-F]{3}$/i.test(value)) {
+    const r = value[1];
+    const g = value[2];
+    const b = value[3];
+    return `#${r}${r}${g}${g}${b}${b}`.toUpperCase();
   }
-  return renderElementFunc(element, ctx);
+  return value.toUpperCase();
 }
-function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
-  const containerWrap = document.createElement("div");
-  containerWrap.className = "border border-gray-200 rounded-lg p-4 bg-gray-50";
-  containerWrap.setAttribute("data-container", pathKey);
-  const header = document.createElement("div");
-  header.className = "flex justify-between items-center mb-4";
-  const left = document.createElement("div");
-  left.className = "flex-1";
-  const itemsWrap = document.createElement("div");
-  itemsWrap.className = "space-y-4";
-  containerWrap.appendChild(header);
-  header.appendChild(left);
-  const subCtx = {
-    path: pathJoin(ctx.path, element.key),
-    prefill: ctx.prefill?.[element.key] || {},
-    // Sliced data for value population
-    formData: ctx.formData ?? ctx.prefill,
-    // Complete root data for displayIf evaluation
-    state: ctx.state
-  };
-  element.elements.forEach((child) => {
-    if (!child.hidden) {
-      itemsWrap.appendChild(renderElement(child, subCtx));
+function createReadonlyColourUI(value) {
+  const container = document.createElement("div");
+  container.className = "flex items-center gap-2";
+  const normalizedValue = normalizeColourValue(value);
+  const swatch = document.createElement("div");
+  swatch.style.cssText = `
+    width: 32px;
+    height: 32px;
+    border-radius: var(--fb-border-radius);
+    border: var(--fb-border-width) solid var(--fb-border-color);
+    background-color: ${normalizedValue};
+  `;
+  const hexText = document.createElement("span");
+  hexText.style.cssText = `
+    font-size: var(--fb-font-size);
+    color: var(--fb-text-color);
+    font-family: var(--fb-font-family-mono, monospace);
+  `;
+  hexText.textContent = normalizedValue;
+  container.appendChild(swatch);
+  container.appendChild(hexText);
+  return container;
+}
+function createEditColourUI(value, pathKey, ctx) {
+  const normalizedValue = normalizeColourValue(value);
+  const pickerWrapper = document.createElement("div");
+  pickerWrapper.className = "colour-picker-wrapper";
+  pickerWrapper.style.cssText = `
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  `;
+  const swatch = document.createElement("div");
+  swatch.className = "colour-swatch";
+  swatch.style.cssText = `
+    width: 40px;
+    height: 40px;
+    border-radius: var(--fb-border-radius);
+    border: var(--fb-border-width) solid var(--fb-border-color);
+    background-color: ${normalizedValue};
+    cursor: pointer;
+    transition: border-color var(--fb-transition-duration) ease-in-out;
+    flex-shrink: 0;
+  `;
+  const hexInput = document.createElement("input");
+  hexInput.type = "text";
+  hexInput.className = "colour-hex-input";
+  hexInput.name = pathKey;
+  hexInput.value = normalizedValue;
+  hexInput.placeholder = "#000000";
+  hexInput.style.cssText = `
+    width: 100px;
+    padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
+    border: var(--fb-border-width) solid var(--fb-border-color);
+    border-radius: var(--fb-border-radius);
+    background-color: var(--fb-background-color);
+    color: var(--fb-text-color);
+    font-size: var(--fb-font-size);
+    font-family: var(--fb-font-family-mono, monospace);
+    transition: all var(--fb-transition-duration) ease-in-out;
+  `;
+  const colourInput = document.createElement("input");
+  colourInput.type = "color";
+  colourInput.className = "colour-picker-hidden";
+  colourInput.value = normalizedValue.toLowerCase();
+  colourInput.style.cssText = `
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  `;
+  hexInput.addEventListener("input", () => {
+    const inputValue = hexInput.value.trim();
+    if (isValidHexColour(inputValue)) {
+      const expanded = expandHexColour(inputValue);
+      swatch.style.backgroundColor = expanded;
+      colourInput.value = expanded.toLowerCase();
+      hexInput.classList.remove("invalid");
+      if (ctx.instance) {
+        ctx.instance.triggerOnChange(pathKey, expanded);
+      }
+    } else {
+      hexInput.classList.add("invalid");
     }
   });
-  containerWrap.appendChild(itemsWrap);
-  left.innerHTML = `<span>${element.label || element.key}</span>`;
-  wrapper.appendChild(containerWrap);
+  hexInput.addEventListener("blur", () => {
+    const inputValue = hexInput.value.trim();
+    if (isValidHexColour(inputValue)) {
+      const expanded = expandHexColour(inputValue);
+      hexInput.value = expanded;
+      swatch.style.backgroundColor = expanded;
+      colourInput.value = expanded.toLowerCase();
+      hexInput.classList.remove("invalid");
+    }
+  });
+  colourInput.addEventListener("change", () => {
+    const normalized = normalizeColourValue(colourInput.value);
+    hexInput.value = normalized;
+    swatch.style.backgroundColor = normalized;
+    if (ctx.instance) {
+      ctx.instance.triggerOnChange(pathKey, normalized);
+    }
+  });
+  swatch.addEventListener("click", () => {
+    colourInput.click();
+  });
+  swatch.addEventListener("mouseenter", () => {
+    swatch.style.borderColor = "var(--fb-border-hover-color)";
+  });
+  swatch.addEventListener("mouseleave", () => {
+    swatch.style.borderColor = "var(--fb-border-color)";
+  });
+  hexInput.addEventListener("focus", () => {
+    hexInput.style.borderColor = "var(--fb-border-focus-color)";
+    hexInput.style.outline = `var(--fb-focus-ring-width) solid var(--fb-focus-ring-color)`;
+    hexInput.style.outlineOffset = "0";
+  });
+  hexInput.addEventListener("blur", () => {
+    hexInput.style.borderColor = "var(--fb-border-color)";
+    hexInput.style.outline = "none";
+  });
+  hexInput.addEventListener("mouseenter", () => {
+    if (document.activeElement !== hexInput) {
+      hexInput.style.borderColor = "var(--fb-border-hover-color)";
+    }
+  });
+  hexInput.addEventListener("mouseleave", () => {
+    if (document.activeElement !== hexInput) {
+      hexInput.style.borderColor = "var(--fb-border-color)";
+    }
+  });
+  pickerWrapper.appendChild(swatch);
+  pickerWrapper.appendChild(hexInput);
+  pickerWrapper.appendChild(colourInput);
+  return pickerWrapper;
 }
-function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
+function renderColourElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
-  const containerWrap = document.createElement("div");
-  containerWrap.className = "border border-gray-200 rounded-lg p-4 bg-gray-50";
-  const header = document.createElement("div");
-  header.className = "flex justify-between items-center mb-4";
-  const left = document.createElement("div");
-  left.className = "flex-1";
-  const right = document.createElement("div");
-  right.className = "flex gap-2";
-  const itemsWrap = document.createElement("div");
-  itemsWrap.className = "space-y-4";
-  containerWrap.appendChild(header);
-  header.appendChild(left);
-  if (!state.config.readonly) {
-    header.appendChild(right);
+  const initialValue = ctx.prefill[element.key] || element.default || "#000000";
+  if (state.config.readonly) {
+    const readonlyUI = createReadonlyColourUI(initialValue);
+    wrapper.appendChild(readonlyUI);
+  } else {
+    const editUI = createEditColourUI(initialValue, pathKey, ctx);
+    wrapper.appendChild(editUI);
   }
-  const min = element.minCount ?? 0;
-  const max = element.maxCount ?? Infinity;
-  const pre = Array.isArray(ctx.prefill?.[element.key]) ? ctx.prefill[element.key] : null;
-  const countItems = () => itemsWrap.querySelectorAll(":scope > .containerItem").length;
-  const createAddButton = () => {
-    const add = document.createElement("button");
-    add.type = "button";
-    add.className = "px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors";
-    add.textContent = t("addElement", state);
-    add.onclick = () => {
-      if (countItems() < max) {
-        const idx = countItems();
-        const subCtx = {
-          state: ctx.state,
-          path: pathJoin(ctx.path, `${element.key}[${idx}]`),
-          prefill: {},
-          formData: ctx.formData ?? ctx.prefill
-          // Complete root data for displayIf
-        };
-        const item = document.createElement("div");
-        item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
-        item.setAttribute("data-container-item", `${element.key}[${idx}]`);
-        element.elements.forEach((child) => {
-          if (!child.hidden) {
-            item.appendChild(renderElement(child, subCtx));
-          }
-        });
-        if (!state.config.readonly) {
-          const rem = document.createElement("button");
-          rem.type = "button";
-          rem.className = "absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors";
-          rem.textContent = "\xD7";
-          rem.onclick = () => {
-            item.remove();
-            updateAddButton();
-          };
-          item.style.position = "relative";
-          item.appendChild(rem);
-        }
-        itemsWrap.appendChild(item);
-        updateAddButton();
-      }
-    };
-    return add;
-  };
-  const updateAddButton = () => {
-    const currentCount = countItems();
-    const addBtn = right.querySelector("button");
-    if (addBtn) {
+  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);
+}
+function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
+  const state = ctx.state;
+  const prefillValues = ctx.prefill[element.key] || [];
+  const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
+  const minCount = element.minCount ?? 1;
+  const maxCount = element.maxCount ?? Infinity;
+  while (values.length < minCount) {
+    values.push(element.default || "#000000");
+  }
+  const container = document.createElement("div");
+  container.className = "space-y-2";
+  wrapper.appendChild(container);
+  function updateIndices() {
+    const items = container.querySelectorAll(".multiple-colour-item");
+    items.forEach((item, index) => {
+      const input = item.querySelector("input");
+      if (input) {
+        input.name = `${pathKey}[${index}]`;
+      }
+    });
+  }
+  function addColourItem(value = "#000000", index = -1) {
+    const itemWrapper = document.createElement("div");
+    itemWrapper.className = "multiple-colour-item flex items-center gap-2";
+    if (state.config.readonly) {
+      const readonlyUI = createReadonlyColourUI(value);
+      while (readonlyUI.firstChild) {
+        itemWrapper.appendChild(readonlyUI.firstChild);
+      }
+    } else {
+      const tempPathKey = `${pathKey}[${container.children.length}]`;
+      const editUI = createEditColourUI(value, tempPathKey, ctx);
+      editUI.style.flex = "1";
+      itemWrapper.appendChild(editUI);
+    }
+    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-colour-item");
+    const currentCount = items.length;
+    items.forEach((item) => {
+      let removeBtn = item.querySelector(
+        ".remove-item-btn"
+      );
+      if (!removeBtn) {
+        removeBtn = document.createElement("button");
+        removeBtn.type = "button";
+        removeBtn.className = "remove-item-btn px-2 py-1 rounded";
+        removeBtn.style.cssText = `
+          color: var(--fb-error-color);
+          background-color: transparent;
+          transition: background-color var(--fb-transition-duration);
+        `;
+        removeBtn.innerHTML = "\u2715";
+        removeBtn.addEventListener("mouseenter", () => {
+          removeBtn.style.backgroundColor = "var(--fb-background-hover-color)";
+        });
+        removeBtn.addEventListener("mouseleave", () => {
+          removeBtn.style.backgroundColor = "transparent";
+        });
+        removeBtn.onclick = () => {
+          const currentIndex = Array.from(container.children).indexOf(
+            item
+          );
+          if (container.children.length > minCount) {
+            values.splice(currentIndex, 1);
+            item.remove();
+            updateIndices();
+            updateAddButton();
+            updateRemoveButtons();
+          }
+        };
+        item.appendChild(removeBtn);
+      }
+      const disabled = currentCount <= minCount;
+      removeBtn.disabled = disabled;
+      removeBtn.style.opacity = disabled ? "0.5" : "1";
+      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
+    });
+  }
+  function updateAddButton() {
+    const existingAddBtn = wrapper.querySelector(".add-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 = `+ Add ${element.label || "Colour"}`;
+      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);
+    }
+  }
+  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);
+}
+function validateColourElement(element, key, context) {
+  const errors = [];
+  const { scopeRoot, skipValidation } = context;
+  const markValidity = (input, errorMessage) => {
+    if (!input) return;
+    const errorId = `error-${input.getAttribute("name") || Math.random().toString(36).substring(7)}`;
+    let errorElement = document.getElementById(errorId);
+    if (errorMessage) {
+      input.classList.add("invalid");
+      input.title = errorMessage;
+      if (!errorElement) {
+        errorElement = document.createElement("div");
+        errorElement.id = errorId;
+        errorElement.className = "error-message";
+        errorElement.style.cssText = `
+          color: var(--fb-error-color);
+          font-size: var(--fb-font-size-small);
+          margin-top: 0.25rem;
+        `;
+        if (input.nextSibling) {
+          input.parentNode?.insertBefore(errorElement, input.nextSibling);
+        } else {
+          input.parentNode?.appendChild(errorElement);
+        }
+      }
+      errorElement.textContent = errorMessage;
+      errorElement.style.display = "block";
+    } else {
+      input.classList.remove("invalid");
+      input.title = "";
+      if (errorElement) {
+        errorElement.remove();
+      }
+    }
+  };
+  const validateColourValue = (input, val, fieldKey) => {
+    if (!val) {
+      if (!skipValidation && element.required) {
+        errors.push(`${fieldKey}: required`);
+        markValidity(input, "required");
+        return "";
+      }
+      markValidity(input, null);
+      return "";
+    }
+    const normalized = normalizeColourValue(val);
+    if (!skipValidation && !isValidHexColour(normalized)) {
+      errors.push(`${fieldKey}: invalid hex colour format`);
+      markValidity(input, "invalid hex colour format");
+      return val;
+    }
+    markValidity(input, null);
+    return normalized;
+  };
+  if (element.multiple) {
+    const hexInputs = scopeRoot.querySelectorAll(
+      `.colour-hex-input`
+    );
+    const values = [];
+    hexInputs.forEach((input, index) => {
+      const val = input?.value ?? "";
+      const validated = validateColourValue(input, val, `${key}[${index}]`);
+      values.push(validated);
+    });
+    if (!skipValidation) {
+      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`);
+      }
+      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 hexInput = scopeRoot.querySelector(
+      `[name="${key}"].colour-hex-input`
+    );
+    const val = hexInput?.value ?? "";
+    if (!skipValidation && element.required && val === "") {
+      errors.push(`${key}: required`);
+      markValidity(hexInput, "required");
+      return { value: "", errors };
+    }
+    const validated = validateColourValue(hexInput, val, key);
+    return { value: validated, errors };
+  }
+}
+function updateColourField(element, fieldPath, value, context) {
+  const { scopeRoot } = context;
+  if (element.multiple) {
+    if (!Array.isArray(value)) {
+      console.warn(
+        `updateColourField: Expected array for multiple field "${fieldPath}", got ${typeof value}`
+      );
+      return;
+    }
+    const hexInputs = scopeRoot.querySelectorAll(
+      `.colour-hex-input`
+    );
+    hexInputs.forEach((hexInput, index) => {
+      if (index < value.length) {
+        const normalized = normalizeColourValue(value[index]);
+        hexInput.value = normalized;
+        hexInput.classList.remove("invalid");
+        hexInput.title = "";
+        const wrapper = hexInput.closest(".colour-picker-wrapper");
+        if (wrapper) {
+          const swatch = wrapper.querySelector(".colour-swatch");
+          const colourInput = wrapper.querySelector(".colour-picker-hidden");
+          if (swatch) {
+            swatch.style.backgroundColor = normalized;
+          }
+          if (colourInput) {
+            colourInput.value = normalized.toLowerCase();
+          }
+        }
+      }
+    });
+    if (value.length !== hexInputs.length) {
+      console.warn(
+        `updateColourField: Multiple field "${fieldPath}" has ${hexInputs.length} inputs but received ${value.length} values. Consider re-rendering for add/remove.`
+      );
+    }
+  } else {
+    const hexInput = scopeRoot.querySelector(
+      `[name="${fieldPath}"].colour-hex-input`
+    );
+    if (hexInput) {
+      const normalized = normalizeColourValue(value);
+      hexInput.value = normalized;
+      hexInput.classList.remove("invalid");
+      hexInput.title = "";
+      const wrapper = hexInput.closest(".colour-picker-wrapper");
+      if (wrapper) {
+        const swatch = wrapper.querySelector(".colour-swatch");
+        const colourInput = wrapper.querySelector(".colour-picker-hidden");
+        if (swatch) {
+          swatch.style.backgroundColor = normalized;
+        }
+        if (colourInput) {
+          colourInput.value = normalized.toLowerCase();
+        }
+      }
+    }
+  }
+}
+
+// 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 = `+ Add ${element.label || "Slider"}`;
+      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) {
+  renderElementFunc = fn;
+}
+function renderElement(element, ctx) {
+  if (!renderElementFunc) {
+    throw new Error(
+      "renderElement not initialized. Import from components/index.ts"
+    );
+  }
+  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";
+  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) {
+    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] || {},
+    // Sliced data for value population
+    formData: ctx.formData ?? ctx.prefill,
+    // Complete root data for displayIf evaluation
+    state: ctx.state
+  };
+  element.elements.forEach((child) => {
+    if (!child.hidden) {
+      itemsWrap.appendChild(renderElement(child, subCtx));
+    }
+  });
+  containerWrap.appendChild(itemsWrap);
+  left.innerHTML = `<span>${element.label || element.key}</span>`;
+  wrapper.appendChild(containerWrap);
+}
+function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
+  const state = ctx.state;
+  const containerWrap = document.createElement("div");
+  containerWrap.className = "border border-gray-200 rounded-lg p-4 bg-gray-50";
+  const header = document.createElement("div");
+  header.className = "flex justify-between items-center mb-4";
+  const left = document.createElement("div");
+  left.className = "flex-1";
+  const right = document.createElement("div");
+  right.className = "flex gap-2";
+  const itemsWrap = document.createElement("div");
+  itemsWrap.className = "space-y-4";
+  containerWrap.appendChild(header);
+  header.appendChild(left);
+  if (!state.config.readonly) {
+    header.appendChild(right);
+  }
+  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;
+  const pre = Array.isArray(ctx.prefill?.[element.key]) ? ctx.prefill[element.key] : null;
+  const countItems = () => itemsWrap.querySelectorAll(":scope > .containerItem").length;
+  const createAddButton = () => {
+    const add = document.createElement("button");
+    add.type = "button";
+    add.className = "px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors";
+    add.textContent = t("addElement", state);
+    add.onclick = () => {
+      if (countItems() < max) {
+        const idx = countItems();
+        const subCtx = {
+          state: ctx.state,
+          path: pathJoin(ctx.path, `${element.key}[${idx}]`),
+          prefill: {},
+          formData: ctx.formData ?? ctx.prefill
+          // Complete root data for displayIf
+        };
+        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) {
+            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.onclick = () => {
+            item.remove();
+            updateAddButton();
+          };
+          item.style.position = "relative";
+          item.appendChild(rem);
+        }
+        itemsWrap.appendChild(item);
+        updateAddButton();
+      }
+    };
+    return add;
+  };
+  const updateAddButton = () => {
+    const currentCount = countItems();
+    const addBtn = right.querySelector("button");
+    if (addBtn) {
       addBtn.disabled = currentCount >= max;
       addBtn.style.opacity = currentCount >= max ? "0.5" : "1";
     }
@@ -2396,11 +3484,19 @@ 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";
@@ -2429,11 +3525,19 @@ 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";
@@ -2704,34 +3808,33 @@ if (typeof document !== "undefined") {
     }
   });
 }
-function renderElement2(element, ctx) {
-  if (element.displayIf) {
-    try {
-      const dataForCondition = ctx.formData ?? ctx.prefill;
-      const shouldDisplay = evaluateDisplayCondition(
-        element.displayIf,
-        dataForCondition
-      );
-      if (!shouldDisplay) {
-        const hiddenWrapper = document.createElement("div");
-        hiddenWrapper.className = "fb-field-wrapper-hidden";
-        hiddenWrapper.style.display = "none";
-        hiddenWrapper.setAttribute("data-field-key", element.key);
-        hiddenWrapper.setAttribute("data-conditionally-hidden", "true");
-        return hiddenWrapper;
-      }
-    } catch (error) {
-      console.error(
-        `Error evaluating displayIf for field "${element.key}":`,
-        error
-      );
+function checkDisplayCondition(element, ctx) {
+  if (!element.displayIf) {
+    return null;
+  }
+  try {
+    const dataForCondition = ctx.formData ?? ctx.prefill;
+    const shouldDisplay = evaluateDisplayCondition(
+      element.displayIf,
+      dataForCondition
+    );
+    if (!shouldDisplay) {
+      const hiddenWrapper = document.createElement("div");
+      hiddenWrapper.className = "fb-field-wrapper-hidden";
+      hiddenWrapper.style.display = "none";
+      hiddenWrapper.setAttribute("data-field-key", element.key);
+      hiddenWrapper.setAttribute("data-conditionally-hidden", "true");
+      return hiddenWrapper;
     }
+  } catch (error) {
+    console.error(
+      `Error evaluating displayIf for field "${element.key}":`,
+      error
+    );
   }
-  const wrapper = document.createElement("div");
-  wrapper.className = "mb-6 fb-field-wrapper";
-  wrapper.setAttribute("data-field-key", element.key);
-  const label = document.createElement("div");
-  label.className = "flex items-center mb-2";
+  return null;
+}
+function createFieldLabel(element) {
   const title = document.createElement("label");
   title.className = "text-sm font-medium text-gray-900";
   title.textContent = element.label || element.key;
@@ -2741,59 +3844,71 @@ function renderElement2(element, ctx) {
     req.textContent = "*";
     title.appendChild(req);
   }
+  return title;
+}
+function createInfoButton(element) {
+  const infoBtn = document.createElement("button");
+  infoBtn.type = "button";
+  infoBtn.className = "ml-2 text-gray-400 hover:text-gray-600";
+  infoBtn.innerHTML = '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>';
+  const tooltipId = `tooltip-${element.key}-${Math.random().toString(36).substr(2, 9)}`;
+  const tooltip = document.createElement("div");
+  tooltip.id = tooltipId;
+  tooltip.className = "hidden absolute z-50 bg-gray-200 text-gray-900 text-sm rounded-lg p-3 max-w-sm border border-gray-300 shadow-lg";
+  tooltip.style.position = "fixed";
+  tooltip.textContent = element.description || element.hint || "Field information";
+  document.body.appendChild(tooltip);
+  infoBtn.onclick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    showTooltip(tooltipId, infoBtn);
+  };
+  return infoBtn;
+}
+function createLabelContainer(element) {
+  const label = document.createElement("div");
+  label.className = "flex items-center mb-2";
+  const title = createFieldLabel(element);
   label.appendChild(title);
   if (element.description || element.hint) {
-    const infoBtn = document.createElement("button");
-    infoBtn.type = "button";
-    infoBtn.className = "ml-2 text-gray-400 hover:text-gray-600";
-    infoBtn.innerHTML = '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>';
-    const tooltipId = `tooltip-${element.key}-${Math.random().toString(36).substr(2, 9)}`;
-    const tooltip = document.createElement("div");
-    tooltip.id = tooltipId;
-    tooltip.className = "hidden absolute z-50 bg-gray-200 text-gray-900 text-sm rounded-lg p-3 max-w-sm border border-gray-300 shadow-lg";
-    tooltip.style.position = "fixed";
-    tooltip.textContent = element.description || element.hint || "Field information";
-    document.body.appendChild(tooltip);
-    infoBtn.onclick = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      showTooltip(tooltipId, infoBtn);
-    };
+    const infoBtn = createInfoButton(element);
     label.appendChild(infoBtn);
   }
-  wrapper.appendChild(label);
-  const pathKey = pathJoin(ctx.path, element.key);
+  return label;
+}
+function dispatchToRenderer(element, ctx, wrapper, pathKey) {
+  const isMultiple = "multiple" in element && element.multiple;
   switch (element.type) {
     case "text":
-      if ("multiple" in element && element.multiple) {
+      if (isMultiple) {
         renderMultipleTextElement(element, ctx, wrapper, pathKey);
       } else {
         renderTextElement(element, ctx, wrapper, pathKey);
       }
       break;
     case "textarea":
-      if ("multiple" in element && element.multiple) {
+      if (isMultiple) {
         renderMultipleTextareaElement(element, ctx, wrapper, pathKey);
       } else {
         renderTextareaElement(element, ctx, wrapper, pathKey);
       }
       break;
     case "number":
-      if ("multiple" in element && element.multiple) {
+      if (isMultiple) {
         renderMultipleNumberElement(element, ctx, wrapper, pathKey);
       } else {
         renderNumberElement(element, ctx, wrapper, pathKey);
       }
       break;
     case "select":
-      if ("multiple" in element && element.multiple) {
+      if (isMultiple) {
         renderMultipleSelectElement(element, ctx, wrapper, pathKey);
       } else {
         renderSelectElement(element, ctx, wrapper, pathKey);
       }
       break;
     case "file":
-      if ("multiple" in element && element.multiple) {
+      if (isMultiple) {
         renderMultipleFileElement(element, ctx, wrapper, pathKey);
       } else {
         renderFileElement(element, ctx, wrapper, pathKey);
@@ -2802,11 +3917,25 @@ function renderElement2(element, ctx) {
     case "files":
       renderFilesElement(element, ctx, wrapper, pathKey);
       break;
+    case "colour":
+      if (isMultiple) {
+        renderMultipleColourElement(element, ctx, wrapper, pathKey);
+      } else {
+        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;
     case "container":
-      if ("multiple" in element && element.multiple) {
+      if (isMultiple) {
         renderMultipleContainerElement(element, ctx, wrapper);
       } else {
         renderSingleContainerElement(element, ctx, wrapper, pathKey);
@@ -2819,6 +3948,19 @@ function renderElement2(element, ctx) {
       wrapper.appendChild(unsupported);
     }
   }
+}
+function renderElement2(element, ctx) {
+  const hiddenElement = checkDisplayCondition(element, ctx);
+  if (hiddenElement) {
+    return hiddenElement;
+  }
+  const wrapper = document.createElement("div");
+  wrapper.className = "mb-6 fb-field-wrapper";
+  wrapper.setAttribute("data-field-key", element.key);
+  const label = createLabelContainer(element);
+  wrapper.appendChild(label);
+  const pathKey = pathJoin(ctx.path, element.key);
+  dispatchToRenderer(element, ctx, wrapper, pathKey);
   return wrapper;
 }
 setRenderElement(renderElement2);
@@ -3102,6 +4244,14 @@ var componentRegistry = {
     validate: validateFileElement,
     update: updateFileField
   },
+  colour: {
+    validate: validateColourElement,
+    update: updateColourField
+  },
+  slider: {
+    validate: validateSliderElement,
+    update: updateSliderField
+  },
   container: {
     validate: validateContainerElement,
     update: updateContainerField
@@ -3458,6 +4608,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
    */
@@ -3490,6 +4667,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();
     }