@dmitryvim/form-builder 0.3.0 → 0.3.1

package/dist/esm/index.js

@@ -435,6 +435,36 @@ function ensureThemingHooks(doc) {
   color: var(--fb-error-color);
   background-color: var(--fb-background-hover-color);
 }
+/* Prefill-suggestion pills rendered by createPrefillHints. Outline pill at rest,
+   soft-fill on hover, solid-fill when selected. All colors flow from the active
+   theme \u2014 consumers don't need to ship their own CSS. */
+.fb-prefill-hint {
+  padding: 0.25rem 0.625rem;
+  border: var(--fb-border-width) solid var(--fb-primary-color);
+  border-radius: 9999px;
+  background: var(--fb-background-color);
+  color: var(--fb-primary-color);
+  font-size: var(--fb-font-size-small);
+  font-weight: var(--fb-font-weight-medium);
+  font-family: var(--fb-font-family);
+  cursor: pointer;
+  transition: background-color var(--fb-transition-duration), border-color var(--fb-transition-duration), color var(--fb-transition-duration);
+}
+.fb-prefill-hint:hover {
+  background: var(--fb-primary-soft-color);
+  border-color: var(--fb-primary-hover-color);
+  color: var(--fb-primary-hover-color);
+}
+.fb-prefill-hint:focus-visible {
+  outline: var(--fb-focus-ring-width) solid var(--fb-focus-ring-color);
+  outline-offset: 2px;
+}
+.fb-prefill-hint[aria-pressed="true"],
+.fb-prefill-hint.active {
+  background: var(--fb-primary-color);
+  color: #ffffff;
+  border-color: var(--fb-primary-color);
+}
 `;
   doc.head.appendChild(style);
 }
@@ -446,7 +476,9 @@ function applyAutoExpand(textarea) {
   const resize = () => {
     if (!textarea.isConnected) return;
     textarea.style.height = "0";
-    textarea.style.height = `${textarea.scrollHeight}px`;
+    const cs = getComputedStyle(textarea);
+    const borderY = parseFloat(cs.borderTopWidth || "0") + parseFloat(cs.borderBottomWidth || "0");
+    textarea.style.height = `${textarea.scrollHeight + borderY}px`;
   };
   textarea.addEventListener("input", resize);
   setTimeout(() => {
@@ -4215,15 +4247,25 @@ function filterAndSlice(allFiles, currentCount, constraints, state) {
   }
   return { accepted, errorMessage: errorParts.join(" \u2022 ") };
 }
-async function uploadBatch(accepted, resourceIds, listEl, state) {
-  if (listEl) {
+async function uploadBatch(opts) {
+  const {
+    accepted,
+    listEl,
+    state,
+    shouldHideAddTile,
+    buildSuccessTile,
+    prepareForUpload
+  } = opts;
+  if (listEl && shouldHideAddTile) {
     const tilesWrap = ensureTilesWrap(listEl);
     const addTile = tilesWrap.querySelector(".fb-multi-add-tile-js") ?? tilesWrap.querySelector(".fb-tile-add");
     if (addTile) addTile.style.display = "none";
   }
+  prepareForUpload?.();
+  const orderedIds = new Array(accepted.length).fill(null);
   const failures = [];
   await Promise.allSettled(
-    accepted.map(async (file) => {
+    accepted.map(async (file, index) => {
       const placeholder = createUploadingTile(file.name, state);
       if (listEl) {
         const tilesWrap = ensureTilesWrap(listEl);
@@ -4236,20 +4278,24 @@ async function uploadBatch(accepted, resourceIds, listEl, state) {
           type: file.type,
           size: file.size,
           uploadedAt: /* @__PURE__ */ new Date(),
-          file: void 0
+          file
         });
-        resourceIds.push(rid);
+        orderedIds[index] = rid;
+        if (buildSuccessTile && placeholder.parentNode) {
+          placeholder.replaceWith(buildSuccessTile(rid));
+        } else {
+          placeholder.remove();
+        }
       } catch (err) {
         const wrapped = err instanceof Error ? err : new Error(String(err));
         const cause = wrapped.cause;
         const root = cause instanceof Error ? cause : cause !== void 0 ? new Error(String(cause)) : wrapped;
         failures.push({ file, error: root });
-      } finally {
         placeholder.remove();
       }
     })
   );
-  return { failures };
+  return { failures, orderedIds };
 }
 function buildBatchErrorMessage(filterError, failures, state) {
   if (failures.length === 0) return filterError;
@@ -4261,68 +4307,70 @@ function buildBatchErrorMessage(filterError, failures, state) {
   ).join(" \u2022 ");
   return filterError ? `${filterError} \u2022 ${uploadMsg}` : uploadMsg;
 }
-function setupFilesDropHandler(filesContainer, resourceIds, state, updateCallback, constraints, pathKey, instance) {
+async function runMultiFileBatch(opts, files, listEl, errorTarget) {
+  const {
+    resourceIds,
+    state,
+    updateCallback,
+    constraints,
+    pathKey,
+    instance,
+    buildSuccessTile,
+    prepareForUpload,
+    coordinator
+  } = opts;
+  const { accepted, errorMessage } = filterAndSlice(
+    files,
+    coordinator.getOccupiedCount(),
+    constraints,
+    state
+  );
+  if (errorTarget) {
+    if (errorMessage) showFileError(errorTarget, errorMessage);
+    else clearFileError(errorTarget);
+  }
+  const handle = coordinator.beginBatch(accepted.length);
+  const shouldHideAddTile = coordinator.getOccupiedCount() >= constraints.maxCount;
+  const { failures, orderedIds } = await uploadBatch({
+    accepted,
+    listEl,
+    state,
+    shouldHideAddTile,
+    buildSuccessTile,
+    prepareForUpload
+  });
+  handle.setResults(orderedIds);
+  if (instance && pathKey && !state.config.readonly) {
+    instance.triggerOnChange(pathKey, resourceIds);
+  }
+  const { wasLast } = handle.end();
+  if (wasLast) updateCallback();
+  if (errorTarget) {
+    const combined = buildBatchErrorMessage(errorMessage, failures, state);
+    if (combined) showFileError(errorTarget, combined);
+    else clearFileError(errorTarget);
+  }
+}
+function setupFilesDropHandler(opts) {
+  const { filesContainer } = opts;
   setupDragAndDrop(filesContainer, async (files) => {
-    const { accepted, errorMessage } = filterAndSlice(
-      Array.from(files),
-      resourceIds.length,
-      constraints,
-      state
-    );
-    if (errorMessage) {
-      showFileError(filesContainer, errorMessage);
-    } else {
-      clearFileError(filesContainer);
-    }
     const list = filesContainer.querySelector(".files-list") ?? filesContainer;
-    const { failures } = await uploadBatch(accepted, resourceIds, list, state);
-    const combined = buildBatchErrorMessage(errorMessage, failures, state);
-    if (combined) {
-      showFileError(filesContainer, combined);
-    } else {
-      clearFileError(filesContainer);
-    }
-    updateCallback();
-    if (instance && pathKey && !state.config.readonly) {
-      instance.triggerOnChange(pathKey, resourceIds);
-    }
+    await runMultiFileBatch(opts, Array.from(files), list, filesContainer);
   });
 }
-function setupFilesPickerHandler(filesPicker, resourceIds, state, updateCallback, constraints, pathKey, instance) {
+function setupFilesPickerHandler(opts) {
+  const { filesPicker } = opts;
   filesPicker.onchange = async () => {
     if (!filesPicker.files) return;
-    const wrapperEl = filesPicker.closest("[data-files-wrapper]") || filesPicker.parentElement;
-    const { accepted, errorMessage } = filterAndSlice(
+    const wrapperEl = filesPicker.closest("[data-files-wrapper]") ?? filesPicker.parentElement;
+    const listEl = wrapperEl?.querySelector(".files-list") ?? null;
+    await runMultiFileBatch(
+      opts,
       Array.from(filesPicker.files),
-      resourceIds.length,
-      constraints,
-      state
-    );
-    if (errorMessage && wrapperEl) {
-      showFileError(wrapperEl, errorMessage);
-    } else if (wrapperEl) {
-      clearFileError(wrapperEl);
-    }
-    const listEl = wrapperEl?.querySelector(".files-list");
-    const { failures } = await uploadBatch(
-      accepted,
-      resourceIds,
-      listEl ?? null,
-      state
+      listEl,
+      wrapperEl
     );
-    if (wrapperEl) {
-      const combined = buildBatchErrorMessage(errorMessage, failures, state);
-      if (combined) {
-        showFileError(wrapperEl, combined);
-      } else {
-        clearFileError(wrapperEl);
-      }
-    }
-    updateCallback();
     filesPicker.value = "";
-    if (instance && pathKey && !state.config.readonly) {
-      instance.triggerOnChange(pathKey, resourceIds);
-    }
   };
 }
 
@@ -4363,16 +4411,6 @@ function validatePickedResource(resource, allowedExtensions, allowedMimes, maxSi
   }
   return null;
 }
-function readCurrentResourceIds(wrapper) {
-  const raw = wrapper.dataset.resourceIds;
-  if (!raw) return [];
-  try {
-    const parsed = JSON.parse(raw);
-    return Array.isArray(parsed) ? parsed : [];
-  } catch {
-    return [];
-  }
-}
 function registerPickedResource(resource, state) {
   const existing = state.resourceIndex.get(resource.resourceId);
   state.resourceIndex.set(resource.resourceId, {
@@ -4387,13 +4425,27 @@ function extractPickerError(error, state) {
   if (error instanceof Error && error.message) return error.message;
   return t("pickerError", state);
 }
-async function handleLibraryPickMulti(state, element, wrapper, fieldPath, resourceIds, maxCount, updateCallback, instance) {
+async function handleLibraryPickMulti(opts) {
+  const {
+    state,
+    element,
+    wrapper,
+    fieldPath,
+    resourceIds,
+    maxCount,
+    updateCallback,
+    instance,
+    coordinator,
+    list,
+    buildSuccessTile
+  } = opts;
   if (!state.config.pickExistingFiles) return;
   const allowedExtensions = getAllowedExtensions(element.accept);
   const allowedMimes = getAllowedMimes(element.accept);
   const maxSizeMB = element.maxSize ?? Infinity;
-  const currentIds = readCurrentResourceIds(wrapper);
-  const remaining = maxCount === Infinity ? Infinity : Math.max(0, maxCount - currentIds.length);
+  const knownRids = coordinator.getAllKnownRids();
+  const existingSet = new Set(knownRids);
+  const remaining = maxCount === Infinity ? Infinity : Math.max(0, maxCount - coordinator.getOccupiedCount());
   let picked;
   try {
     picked = await state.config.pickExistingFiles({
@@ -4402,14 +4454,15 @@ async function handleLibraryPickMulti(state, element, wrapper, fieldPath, resour
       accept: buildAcceptContext(element),
       maxSizeMB: maxSizeMB === Infinity ? void 0 : maxSizeMB,
       remainingSlots: remaining === Infinity ? void 0 : remaining,
-      selectedResourceIds: [...currentIds]
+      // Hand the host every rid that's already selected (committed or
+      // staged) so it can grey them out or filter them.
+      selectedResourceIds: knownRids
     });
   } catch (error) {
     showFileError(wrapper, extractPickerError(error, state));
     return;
   }
   if (picked.length === 0) return;
-  const existingSet = new Set(currentIds);
   const seen = /* @__PURE__ */ new Set();
   const deduped = picked.filter((r) => {
     if (existingSet.has(r.resourceId)) return false;
@@ -4427,10 +4480,18 @@ async function handleLibraryPickMulti(state, element, wrapper, fieldPath, resour
     );
     return err === null;
   });
-  const freshRemaining = maxCount === Infinity ? validItems.length : Math.max(0, maxCount - resourceIds.length);
+  const freshRemaining = maxCount === Infinity ? validItems.length : Math.max(0, maxCount - coordinator.getOccupiedCount());
   const accepted = validItems.slice(0, freshRemaining);
   const skipped = validItems.length - accepted.length;
-  if (accepted.length === 0) return;
+  if (accepted.length === 0) {
+    if (skipped > 0) {
+      showFileError(
+        wrapper,
+        t("filesLimitExceeded", state, { skipped, max: maxCount })
+      );
+    }
+    return;
+  }
   clearFileError(wrapper);
   if (skipped > 0) {
     showFileError(
@@ -4440,13 +4501,22 @@ async function handleLibraryPickMulti(state, element, wrapper, fieldPath, resour
   }
   for (const resource of accepted) {
     registerPickedResource(resource, state);
-    resourceIds.push(resource.resourceId);
   }
-  wrapper.dataset.resourceIds = JSON.stringify(resourceIds);
-  updateCallback();
+  const acceptedIds = accepted.map((r) => r.resourceId);
+  const handle = coordinator.beginBatch(accepted.length);
+  handle.setResults(acceptedIds);
   if (!state.config.readonly) {
     instance.triggerOnChange(fieldPath, resourceIds);
   }
+  const { wasLast } = handle.end();
+  if (wasLast) {
+    updateCallback();
+  } else {
+    const tilesWrap = ensureTilesWrap(list);
+    for (const rid of acceptedIds) {
+      tilesWrap.appendChild(buildSuccessTile(rid));
+    }
+  }
 }
 async function handleLibraryPickSingle(state, element, container, fileWrapper, pathKey, fieldPath, renderCallback, instance) {
   if (!state.config.pickExistingFiles) return;
@@ -4767,6 +4837,14 @@ function buildMetaDot() {
   return dot;
 }
 var gridResizeObservers = /* @__PURE__ */ new WeakMap();
+function disposePlaceholdersForUpload(container) {
+  const observer = gridResizeObservers.get(container);
+  if (observer) {
+    observer.disconnect();
+    gridResizeObservers.delete(container);
+  }
+  container.querySelectorAll(".fb-multi-placeholder").forEach((p) => p.remove());
+}
 function renderResourcePills(opts) {
   const {
     container,
@@ -5114,16 +5192,19 @@ function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
     filesPicker.click();
   };
   const onLibraryPick = state.config.pickExistingFiles && !element.disableLibrary ? () => {
-    handleLibraryPickMulti(
+    handleLibraryPickMulti({
       state,
       element,
-      filesWrapper,
-      pathKey,
-      initialFiles,
-      maxFiles,
-      updateFilesDisplay,
-      ctx.instance
-    ).catch((err) => {
+      wrapper: filesWrapper,
+      fieldPath: pathKey,
+      resourceIds: initialFiles,
+      maxCount: maxFiles,
+      updateCallback: updateFilesDisplay,
+      instance: ctx.instance,
+      coordinator,
+      list,
+      buildSuccessTile
+    }).catch((err) => {
       console.error("Library pick failed:", err);
     });
   } : null;
@@ -5137,37 +5218,153 @@ function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
         releaseLocalFileUrl(state.resourceIndex.get(ridToRemove)?.file);
         const index = initialFiles.indexOf(ridToRemove);
         if (index > -1) initialFiles.splice(index, 1);
-        updateFilesDisplay();
+        if (coordinator.hasInFlightBatches()) {
+          pendingRemovals.add(ridToRemove);
+          list.querySelector(`[data-resource-id="${ridToRemove}"]`)?.remove();
+          filesWrapper.dataset.resourceIds = JSON.stringify(initialFiles);
+        } else {
+          updateFilesDisplay();
+        }
+        if (ctx.instance && pathKey && !state.config.readonly) {
+          ctx.instance.triggerOnChange(pathKey, initialFiles);
+        }
       },
       maxCount: maxFiles < Infinity ? maxFiles : void 0,
       isReadonly: currentlyReadonly,
       onLibraryPick: currentlyReadonly ? null : onLibraryPick,
       element,
       onClearAll: currentlyReadonly ? void 0 : () => {
+        for (const rid of initialFiles) {
+          releaseLocalFileUrl(state.resourceIndex.get(rid)?.file);
+        }
         initialFiles.splice(0);
-        updateFilesDisplay();
+        if (coordinator.hasInFlightBatches()) {
+          const visibleTiles = list.querySelectorAll("[data-resource-id]");
+          for (const tile of visibleTiles) {
+            const rid = tile.dataset.resourceId;
+            if (rid) {
+              releaseLocalFileUrl(state.resourceIndex.get(rid)?.file);
+              pendingRemovals.add(rid);
+            }
+            tile.remove();
+          }
+          filesWrapper.dataset.resourceIds = JSON.stringify(initialFiles);
+        } else {
+          updateFilesDisplay();
+        }
+        if (ctx.instance && pathKey && !state.config.readonly) {
+          ctx.instance.triggerOnChange(pathKey, initialFiles);
+        }
       },
       openPicker
     });
   }
-  setupFilesDropHandler(
-    filesContainer,
-    initialFiles,
-    state,
-    updateFilesDisplay,
-    constraints,
-    pathKey,
-    ctx.instance
-  );
-  setupFilesPickerHandler(
-    filesPicker,
-    initialFiles,
+  let inFlightFiles = 0;
+  let activeBatches = 0;
+  let nextBatchOrdinal = 0;
+  let nextCommitOrdinal = 0;
+  const stagedResults = /* @__PURE__ */ new Map();
+  const batchReservations = /* @__PURE__ */ new Map();
+  const pendingRemovals = /* @__PURE__ */ new Set();
+  const drainContiguousStagedResults = () => {
+    while (stagedResults.has(nextCommitOrdinal)) {
+      const ordinal = nextCommitOrdinal;
+      const ids = stagedResults.get(ordinal);
+      stagedResults.delete(ordinal);
+      nextCommitOrdinal += 1;
+      const reservation = batchReservations.get(ordinal) ?? 0;
+      batchReservations.delete(ordinal);
+      inFlightFiles -= reservation;
+      for (const rid of ids) {
+        if (rid === null) continue;
+        if (pendingRemovals.has(rid)) {
+          pendingRemovals.delete(rid);
+          continue;
+        }
+        initialFiles.push(rid);
+      }
+    }
+    filesWrapper.dataset.resourceIds = JSON.stringify(initialFiles);
+  };
+  const coordinator = {
+    getOccupiedCount: () => initialFiles.length + inFlightFiles,
+    getAllKnownRids: () => {
+      const out = [...initialFiles];
+      for (const ids of stagedResults.values()) {
+        for (const rid of ids) {
+          if (rid !== null) out.push(rid);
+        }
+      }
+      return out;
+    },
+    hasInFlightBatches: () => activeBatches > 0 || batchReservations.size > 0,
+    wasRemovedDuringBatch: (rid) => pendingRemovals.has(rid),
+    beginBatch: (count) => {
+      inFlightFiles += count;
+      activeBatches += 1;
+      const ordinal = nextBatchOrdinal++;
+      batchReservations.set(ordinal, count);
+      return {
+        setResults: (orderedIds) => {
+          stagedResults.set(ordinal, orderedIds);
+          drainContiguousStagedResults();
+        },
+        end: () => {
+          activeBatches -= 1;
+          const wasLast = activeBatches === 0 && batchReservations.size === 0;
+          if (wasLast) {
+            pendingRemovals.clear();
+          }
+          return { wasLast };
+        }
+      };
+    }
+  };
+  const buildSuccessTile = (rid) => {
+    const currentlyReadonly = isElementReadonly(element, state);
+    return buildPreviewTile(
+      rid,
+      state,
+      !currentlyReadonly,
+      currentlyReadonly ? null : () => {
+        releaseLocalFileUrl(state.resourceIndex.get(rid)?.file);
+        const idx = initialFiles.indexOf(rid);
+        if (idx > -1) {
+          initialFiles.splice(idx, 1);
+          if (coordinator.hasInFlightBatches()) {
+            pendingRemovals.add(rid);
+            list.querySelector(`[data-resource-id="${rid}"]`)?.remove();
+            filesWrapper.dataset.resourceIds = JSON.stringify(initialFiles);
+          } else {
+            updateFilesDisplay();
+          }
+          if (ctx.instance && pathKey && !state.config.readonly) {
+            ctx.instance.triggerOnChange(pathKey, initialFiles);
+          }
+          return;
+        }
+        pendingRemovals.add(rid);
+        list.querySelector(`[data-resource-id="${rid}"]`)?.remove();
+        if (ctx.instance && pathKey && !state.config.readonly) {
+          ctx.instance.triggerOnChange(pathKey, initialFiles);
+        }
+      }
+    );
+  };
+  const prepareForUpload = () => disposePlaceholdersForUpload(list);
+  const sharedHandlerOpts = {
+    resourceIds: initialFiles,
     state,
-    updateFilesDisplay,
+    updateCallback: updateFilesDisplay,
     constraints,
     pathKey,
-    ctx.instance
-  );
+    instance: ctx.instance,
+    buildSuccessTile,
+    prepareForUpload,
+    coordinator
+  };
+  setupFilesDropHandler({ ...sharedHandlerOpts, filesContainer });
+  setupFilesPickerHandler({ ...sharedHandlerOpts, filesPicker });
   updateFilesDisplay();
   wrapper.appendChild(filesWrapper);
 }
@@ -10850,6 +11047,7 @@ var exampleThemes = {
   },
   // Picaz wizard design tokens — derived from the Picaz Wizard mockups.
   // Pairs with the host-side .card / .section-num / .lede chrome that wraps the form.
+  // Assumes Inter is loaded by the host (e.g. via Google Fonts in index.html).
   picaz: {
     ...defaultTheme,
     primaryColor: "#2f5bea",
@@ -10881,6 +11079,9 @@ var exampleThemes = {
     fileUploadBgColor: "#fafcff",
     fileUploadBorderColor: "#cdd6e3",
     fileUploadHoverBorderColor: "#2f5bea",
+    // Picaz uses roomier inputs (11/14px) than the defaultTheme compact density.
+    inputPaddingX: "14px",
+    inputPaddingY: "11px",
     borderRadius: "12px",
     borderRadiusSmall: "8px",
     borderRadiusLarge: "16px",
@@ -10888,7 +11089,17 @@ var exampleThemes = {
     fontFamily: '"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
     shadowCard: "0 1px 2px rgba(15,23,42,.04), 0 1px 0 rgba(15,23,42,.02)",
     shadowPopover: "0 12px 32px -12px rgba(15,23,42,.18), 0 4px 12px -6px rgba(15,23,42,.08)",
-    focusRingColor: "#2f5bea"
+    focusRingColor: "#2f5bea",
+    // Slide cards: subtle gradient lift, no rest-state shadow (mockup adds it
+    // only on hover, which form-builder doesn't yet differentiate).
+    slideCardBg: "linear-gradient(180deg, #f7f9fc 0%, #dde3ee 100%)",
+    slideCardShadow: "none",
+    slideCardRadius: "16px",
+    // Tiny uppercase captions above grouped lists ("ПРЕИМУЩЕСТВА" in the mockup).
+    labelSectionFontSize: "0.625rem",
+    // 10px
+    labelSectionLetterSpacing: "0.07em",
+    labelSectionTextTransform: "uppercase"
   }
 };
 
@@ -11254,6 +11465,13 @@ var FormBuilderInstance = class {
         const value = hintValues[fieldKey];
         this.updateField(fullPath, value);
       }
+      const group = target.closest(".fb-prefill-hints");
+      if (group) {
+        group.querySelectorAll(
+          '.fb-prefill-hint[aria-pressed="true"]'
+        ).forEach((el) => el.removeAttribute("aria-pressed"));
+      }
+      target.setAttribute("aria-pressed", "true");
     } catch (error) {
       console.error("Error parsing prefill hint values:", error);
     }