@dmitryvim/form-builder 0.2.5 → 0.2.7

package/dist/esm/index.js

@@ -56,9 +56,6 @@ function validateSchema(schema) {
     errors.push("Schema must be an object");
     return errors;
   }
-  if (!schema.version) {
-    errors.push("Schema missing version");
-  }
   if (!Array.isArray(schema.elements)) {
     errors.push("Schema missing elements array");
     return errors;
@@ -72,6 +69,20 @@ function validateSchema(schema) {
       if (!element.key) {
         errors.push(`${elementPath}: missing key`);
       }
+      if (element.displayIf) {
+        const displayIf = element.displayIf;
+        if (!displayIf.key || typeof displayIf.key !== "string") {
+          errors.push(
+            `${elementPath}: displayIf must have a 'key' property of type string`
+          );
+        }
+        const hasOperator = "equals" in displayIf;
+        if (!hasOperator) {
+          errors.push(
+            `${elementPath}: displayIf must have at least one operator (equals, etc.)`
+          );
+        }
+      }
       if (element.type === "group" && "elements" in element && element.elements) {
         validateElements(element.elements, `${elementPath}.elements`);
       }
@@ -109,6 +120,66 @@ function clear(node) {
   while (node.firstChild) node.removeChild(node.firstChild);
 }
 
+// src/utils/display-conditions.ts
+function getValueByPath(data, path) {
+  if (!data || typeof data !== "object") {
+    return void 0;
+  }
+  const segments = path.match(/[^.[\]]+|\[\d+\]/g);
+  if (!segments || segments.length === 0) {
+    return void 0;
+  }
+  let current = data;
+  for (const segment of segments) {
+    if (current === void 0 || current === null) {
+      return void 0;
+    }
+    if (segment.startsWith("[") && segment.endsWith("]")) {
+      const index = parseInt(segment.slice(1, -1), 10);
+      if (!Array.isArray(current) || isNaN(index)) {
+        return void 0;
+      }
+      current = current[index];
+    } else {
+      current = current[segment];
+    }
+  }
+  return current;
+}
+function evaluateDisplayCondition(condition, formData) {
+  if (!condition || !condition.key) {
+    throw new Error(
+      "Invalid displayIf condition: must have a 'key' property"
+    );
+  }
+  const actualValue = getValueByPath(formData, condition.key);
+  if ("equals" in condition) {
+    return deepEqual(actualValue, condition.equals);
+  }
+  throw new Error(
+    `Invalid displayIf condition: no recognized operator (equals, etc.)`
+  );
+}
+function deepEqual(a, b) {
+  if (a === b) return true;
+  if (a == null || b == null) return a === b;
+  if (typeof a !== typeof b) return false;
+  if (typeof a === "object" && typeof b === "object") {
+    try {
+      return JSON.stringify(a) === JSON.stringify(b);
+    } catch (e) {
+      if (e instanceof TypeError && (e.message.includes("circular") || e.message.includes("cyclic"))) {
+        console.warn(
+          "deepEqual: Circular reference detected in displayIf comparison, using reference equality"
+        );
+        return a === b;
+      }
+      throw e;
+    }
+  }
+  return a === b;
+}
+
 // src/components/text.ts
 function renderTextElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
@@ -1151,6 +1222,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)) {
@@ -1162,141 +1399,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) {
@@ -2197,6 +2312,460 @@ function updateFileField(element, fieldPath, value, context) {
   }
 }
 
+// src/components/colour.ts
+function normalizeColourValue(value) {
+  if (!value) return "#000000";
+  return value.toUpperCase();
+}
+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 value.toUpperCase();
+}
+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");
+    }
+  });
+  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 renderColourElement(element, ctx, wrapper, pathKey) {
+  const state = ctx.state;
+  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 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/container.ts
 var renderElementFunc = null;
 function setRenderElement(fn) {
@@ -2225,6 +2794,9 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
   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) => {
@@ -2268,7 +2840,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         const subCtx = {
           state: ctx.state,
           path: pathJoin(ctx.path, `${element.key}[${idx}]`),
-          prefill: {}
+          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";
@@ -2313,7 +2887,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       const subCtx = {
         state: ctx.state,
         path: pathJoin(ctx.path, `${element.key}[${idx}]`),
-        prefill: prefillObj || {}
+        prefill: prefillObj || {},
+        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";
@@ -2344,7 +2920,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       const subCtx = {
         state: ctx.state,
         path: pathJoin(ctx.path, `${element.key}[${idx}]`),
-        prefill: {}
+        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";
@@ -2624,11 +3202,33 @@ if (typeof document !== "undefined") {
     }
   });
 }
-function renderElement2(element, ctx) {
-  const wrapper = document.createElement("div");
-  wrapper.className = "mb-6 fb-field-wrapper";
-  const label = document.createElement("div");
-  label.className = "flex items-center mb-2";
+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
+    );
+  }
+  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;
@@ -2638,59 +3238,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);
@@ -2699,11 +3311,18 @@ 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 "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);
@@ -2716,6 +3335,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);
@@ -2999,6 +3631,10 @@ var componentRegistry = {
     validate: validateFileElement,
     update: updateFileField
   },
+  colour: {
+    validate: validateColourElement,
+    update: updateColourField
+  },
   container: {
     validate: validateContainerElement,
     update: updateContainerField
@@ -3119,6 +3755,7 @@ var FormBuilderInstance = class {
     }
     this.state.debounceTimer = setTimeout(() => {
       const formData = this.validateForm(true);
+      this.reevaluateConditionalFields();
       if (this.state.config.onChange) {
         this.state.config.onChange(formData);
       }
@@ -3378,6 +4015,8 @@ var FormBuilderInstance = class {
       const block = renderElement2(element, {
         path: "",
         prefill: prefill || {},
+        formData: prefill || {},
+        // Pass complete root data for displayIf evaluation
         state: this.state,
         instance: this
       });
@@ -3422,6 +4061,19 @@ var FormBuilderInstance = class {
     };
     setValidateElement(validateElement2);
     this.state.schema.elements.forEach((element) => {
+      if (element.displayIf) {
+        try {
+          const shouldDisplay = evaluateDisplayCondition(element.displayIf, data);
+          if (!shouldDisplay) {
+            return;
+          }
+        } catch (error) {
+          console.error(
+            `Error evaluating displayIf for field "${element.key}" during validation:`,
+            error
+          );
+        }
+      }
       if (element.hidden) {
         data[element.key] = element.default !== void 0 ? element.default : null;
       } else {
@@ -3578,6 +4230,70 @@ var FormBuilderInstance = class {
       );
     }
   }
+  /**
+   * Re-evaluate all conditional fields (displayIf) based on current form data
+   * This is called automatically when form data changes (via onChange events)
+   */
+  reevaluateConditionalFields() {
+    if (!this.state.schema || !this.state.formRoot) return;
+    const formData = this.validateForm(true).data;
+    const checkElements = (elements, currentPath) => {
+      elements.forEach((element) => {
+        const fullPath = currentPath ? `${currentPath}.${element.key}` : element.key;
+        if (element.displayIf) {
+          const fieldWrappers = this.state.formRoot.querySelectorAll(
+            `[data-field-key="${element.key}"]`
+          );
+          fieldWrappers.forEach((wrapper) => {
+            try {
+              const shouldDisplay = evaluateDisplayCondition(
+                element.displayIf,
+                formData
+                // Use complete formData for condition evaluation
+              );
+              const isCurrentlyHidden = wrapper.getAttribute("data-conditionally-hidden") === "true";
+              if (shouldDisplay && isCurrentlyHidden) {
+                const newWrapper = renderElement2(element, {
+                  path: fullPath,
+                  // Use accumulated path
+                  prefill: formData,
+                  // Use complete formData for root-level elements
+                  formData,
+                  // Pass complete formData for displayIf evaluation
+                  state: this.state,
+                  instance: this
+                });
+                wrapper.parentNode?.replaceChild(newWrapper, wrapper);
+              } else if (!shouldDisplay && !isCurrentlyHidden) {
+                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");
+                wrapper.parentNode?.replaceChild(hiddenWrapper, wrapper);
+              }
+            } catch (error) {
+              console.error(
+                `Error re-evaluating displayIf for field "${element.key}":`,
+                error
+              );
+            }
+          });
+        }
+        if ((element.type === "container" || element.type === "group") && "elements" in element && element.elements) {
+          const containerData = formData?.[element.key];
+          if (Array.isArray(containerData)) {
+            containerData.forEach((_, index) => {
+              checkElements(element.elements, `${fullPath}[${index}]`);
+            });
+          } else {
+            checkElements(element.elements, fullPath);
+          }
+        }
+      });
+    };
+    checkElements(this.state.schema.elements, "");
+  }
   /**
    * Destroy instance and clean up resources
    */