@pipelex/mthds-form 0.21.0 → 0.22.0

package/dist/{chunk-3XDR2C4I.js → chunk-5IZWP2X4.js}

@@ -2,7 +2,7 @@ import { planFileSave, planStuffSave, splitFileName, typedFileStem } from './chu
 import { seedInputs, closeOptionalStructures, openOptionalStructures } from './chunk-VH5CDQDR.js';
 import { sourceFileValue, roomForChosenFiles, addChosenFiles, chosenFilesAdded } from './chunk-EQJBM3NS.js';
 import { readStuffFile } from './chunk-RRTI7AIR.js';
-import { setValueAtPath, apiInputsFromRunValues, sameRunValues, runValuesFromInputs } from './chunk-ZX52CQJ4.js';
+import { apiInputsFromRunValues, sameRunValues, runValuesFromInputs, setValueAtPath } from './chunk-ZX52CQJ4.js';
 import { viewableUrl, isNativeDateNode, isNativeHtmlNode, readHtmlContent, isNativeCompositeNode, readCompositeContent, isNativeValueNode, readDateContent, formatDateContent, readImageContent, readDataUrl, readDocumentContent } from './chunk-CM4KVG53.js';
 import { buildRunFields } from './chunk-ZB4RYUKV.js';
 import { conceptCategory } from './chunk-FABY3DEY.js';
@@ -1246,6 +1246,20 @@ function isReadableLink(url) {
 function dataUrlMime(url) {
   return DATA_URL_MIME_RE.exec(url)?.[1]?.toLowerCase();
 }
+function isThenable(answer) {
+  return (typeof answer === "object" || typeof answer === "function") && answer !== null && typeof answer.then === "function";
+}
+function storedUrlOf(stored) {
+  if (typeof stored === "string") return stored === "" ? void 0 : stored;
+  if (stored === null || typeof stored !== "object") return void 0;
+  const url = stored.url;
+  return typeof url === "string" && url !== "" ? url : void 0;
+}
+function describesValue(local, url) {
+  if (local.boundUrl !== void 0) return local.boundUrl === url;
+  if (local.storedUrl !== void 0) return local.storedUrl === url;
+  return !local.awaitingUpload;
+}
 function DocumentField(props) {
   return /* @__PURE__ */ jsx(FileField, { ...props, category: "document" });
 }
@@ -1274,6 +1288,9 @@ function FileField({
   const [typedUrl, setTypedUrl] = useState(null);
   const [previewOpen, setPreviewOpen] = useState(false);
   const [localPreview, setLocalPreview] = useState(null);
+  const urlInFlight = useRef(void 0);
+  const flightSeen = useRef(false);
+  const localGeneration = useRef(0);
   const [resolved, setResolved] = useState(null);
   const localUrlRef = useRef(null);
   const [pickerOpen, setPickerOpen] = useState(false);
@@ -1282,6 +1299,7 @@ function FileField({
   const setLocal = useCallback((next) => {
     if (localUrlRef.current) URL.revokeObjectURL(localUrlRef.current);
     localUrlRef.current = next?.objectUrl ?? null;
+    localGeneration.current += 1;
     setLocalPreview(next);
   }, []);
   useEffect(() => () => setLocal(null), [setLocal]);
@@ -1308,10 +1326,27 @@ function FileField({
       }
       setRejected(null);
       setDismissedUploadError(null);
-      setLocal({ objectUrl: URL.createObjectURL(file), type: file.type });
-      onDropFile(file);
+      const upload = onDropFile(file);
+      const awaitingUpload = isThenable(upload);
+      setLocal({ objectUrl: URL.createObjectURL(file), type: file.type, awaitingUpload });
+      urlInFlight.current = value?.url;
+      flightSeen.current = false;
+      if (!awaitingUpload) return;
+      const generation = localGeneration.current;
+      Promise.resolve(upload).then(
+        (stored) => {
+          if (localGeneration.current !== generation) return;
+          const storedUrl = storedUrlOf(stored);
+          setLocalPreview(
+            (current) => current ? { ...current, awaitingUpload: false, storedUrl } : current
+          );
+        },
+        () => {
+          if (localGeneration.current === generation) setLocal(null);
+        }
+      );
     },
-    [formats, setLocal, onDropFile]
+    [formats, setLocal, onDropFile, value?.url]
   );
   const busy = disabled || uploading;
   const {
@@ -1367,14 +1402,11 @@ function FileField({
     },
     [setLocal, onChange, dismissUploadError]
   );
-  const localIsCurrent = !!localPreview && (localPreview.boundUrl === void 0 || localPreview.boundUrl === value?.url);
-  const wasUploading = useRef(!!uploading);
+  const localIsCurrent = !!localPreview && describesValue(localPreview, value?.url);
   useEffect(() => {
-    const ended = wasUploading.current && !uploading;
-    wasUploading.current = !!uploading;
     if (!localPreview || localPreview.boundUrl !== void 0) return;
-    if (failure !== null || ended && !value?.url) setLocal(null);
-  }, [uploading, failure, localPreview, value?.url, setLocal]);
+    if (failure !== null) setLocal(null);
+  }, [failure, localPreview, setLocal]);
   const lastUrl = useRef(value?.url);
   useEffect(() => {
     if (lastUrl.current === value?.url) return;
@@ -1383,12 +1415,30 @@ function FileField({
   }, [value?.url, uploadError]);
   useEffect(() => {
     if (!localPreview) return;
-    if (localPreview.boundUrl === void 0) {
-      if (uploading || !value?.url) return;
-      setLocalPreview({ ...localPreview, boundUrl: value.url });
+    if (localPreview.boundUrl !== void 0) {
+      if (value?.url !== localPreview.boundUrl) setLocal(null);
       return;
     }
-    if (value?.url !== localPreview.boundUrl) setLocal(null);
+    if (uploading) {
+      urlInFlight.current = value?.url;
+      flightSeen.current = true;
+    }
+    if (localPreview.storedUrl !== void 0) {
+      if (value?.url === localPreview.storedUrl) {
+        setLocalPreview({ ...localPreview, boundUrl: localPreview.storedUrl });
+      }
+      return;
+    }
+    if (uploading || localPreview.awaitingUpload) return;
+    if (!value?.url) {
+      if (flightSeen.current) setLocal(null);
+      return;
+    }
+    if (value.url === urlInFlight.current) {
+      setLocal(null);
+      return;
+    }
+    setLocalPreview({ ...localPreview, boundUrl: value.url });
   }, [localPreview, value?.url, uploading, setLocal]);
   const hasFile = !!value?.url;
   const localType = localIsCurrent ? localPreview?.type : void 0;
@@ -2102,12 +2152,28 @@ function firstFocusable(within) {
   }
   return null;
 }
+
+// src/react/row-moves.ts
+function destinationOf(order) {
+  return new Map(order.map((source, index) => [source, index]));
+}
+function movedId(id, listId, destination) {
+  const prefix = `${listId}.`;
+  if (!id.startsWith(prefix)) return id;
+  const rest = id.slice(prefix.length);
+  const dot = rest.indexOf(".");
+  const row = dot === -1 ? rest : rest.slice(0, dot);
+  if (!/^\d+$/.test(row)) return id;
+  const index = destination.get(Number(row));
+  if (index === void 0) return void 0;
+  return `${prefix}${index}${dot === -1 ? "" : rest.slice(dot)}`;
+}
 function ListField({ field, value, onChange, id, error, env }) {
   const s = useFieldStrings();
   const presentation = useFieldPresentation();
   const isApp = presentation === "app";
   const items = value ?? [];
-  const [rowKeys, setRowKeys] = useRowKeys(items.length);
+  const [rowKeys, setRowKeys] = useRowKeys(items.length, id, env?.rowMoves);
   const [pickerOpen, setPickerOpen] = useState(false);
   const pickerEntryRef = useRef(null);
   const rowsRef = useRef(null);
@@ -2119,7 +2185,12 @@ function ListField({ field, value, onChange, id, error, env }) {
     onChange(next);
   };
   const removeItem = (index) => {
-    setRowKeys((prev) => prev.filter((_, i) => i !== index));
+    if (!env?.rowMoves) setRowKeys((prev) => prev.filter((_, i) => i !== index));
+    const hostRemoves = env?.onRemoveItem;
+    if (hostRemoves) {
+      hostRemoves(id, index);
+      return;
+    }
     setStaleErrors((prev) => withRenumberedErrors(prev, id, index, env?.uploadErrors));
     onChange(items.filter((_, i) => i !== index));
   };
@@ -2150,7 +2221,7 @@ function ListField({ field, value, onChange, id, error, env }) {
           next.delete(dropId);
           return next;
         });
-        drop(dropId, file);
+        return drop(dropId, file);
       } : void 0
     };
   }, [env, staleErrors]);
@@ -2297,24 +2368,49 @@ function withRenumberedErrors(stale, listId, removed, hostErrors) {
   }
   return next.size === stale.size && [...next].every(([k, m]) => stale.get(k) === m) ? stale : next;
 }
-function useRowKeys(length) {
+function useRowKeys(length, id, moves) {
+  const latest = moves?.[moves.length - 1]?.seq ?? 0;
   const [state, setState] = useState(() => ({
     keys: Array.from({ length }, (_, i) => i),
-    next: length
+    next: length,
+    seq: latest,
+    id
   }));
-  if (state.keys.length !== length) {
-    setState((prev) => {
-      if (length <= prev.keys.length) return { keys: prev.keys.slice(0, length), next: prev.next };
-      const added = length - prev.keys.length;
-      return {
-        keys: [...prev.keys, ...Array.from({ length: added }, (_, i) => prev.next + i)],
-        next: prev.next + added
-      };
-    });
+  if (state.seq !== latest || state.id !== id || state.keys.length !== length) {
+    setState((prev) => withLength(replayed(prev, moves, latest, id), length));
   }
-  const update = (fn) => setState((prev) => ({ keys: fn(prev.keys), next: prev.next }));
+  const update = (fn) => setState((prev) => ({ ...prev, keys: fn(prev.keys) }));
   return [state.keys, update];
 }
+function replayed(state, moves, latest, id) {
+  let { keys, next } = state;
+  let tracked = state.id;
+  for (const move of moves ?? []) {
+    if (move.seq <= state.seq || tracked === void 0) continue;
+    if (move.listId === tracked) {
+      const before = keys;
+      keys = [];
+      for (const source of move.order) {
+        const key = before[source];
+        if (key === void 0) keys.push(next++);
+        else keys.push(key);
+      }
+    } else {
+      tracked = movedId(tracked, move.listId, destinationOf(move.order));
+    }
+  }
+  return { keys, next, seq: latest, id };
+}
+function withLength(state, length) {
+  if (state.keys.length === length) return state;
+  if (length < state.keys.length) return { ...state, keys: state.keys.slice(0, length) };
+  const added = length - state.keys.length;
+  return {
+    ...state,
+    keys: [...state.keys, ...Array.from({ length: added }, (_, i) => state.next + i)],
+    next: state.next + added
+  };
+}
 function emptyValue(field) {
   switch (field.kind) {
     case "boolean":
@@ -2967,6 +3063,110 @@ function withoutId(ids, id) {
   next.delete(id);
   return next;
 }
+var NO_UPLOADS = /* @__PURE__ */ new Map();
+var NO_MOVES = [];
+var NOTHING_HELD = {
+  edited: null,
+  failed: EMPTY_IDS,
+  uploads: NO_UPLOADS,
+  moves: NO_MOVES
+};
+function withoutEntry(entries, id) {
+  if (!entries.has(id)) return entries;
+  const next = new Map(entries);
+  next.delete(id);
+  return next;
+}
+function fileUrlAt(values, id) {
+  const node = valueAt(values, id);
+  if (node === null || typeof node !== "object") return void 0;
+  const url = ownProp(node, "url");
+  return typeof url === "string" && url !== "" ? url : void 0;
+}
+function valueAt(values, id) {
+  let node = values;
+  for (const key of id.split(".")) {
+    if (node === null || typeof node !== "object") return void 0;
+    node = ownProp(node, key);
+  }
+  return node;
+}
+function written(held, initial, update) {
+  const before = held.edited ?? initial;
+  const after = update(before);
+  if (after === held.edited) return held;
+  const replaced = [...held.failed].filter((id) => fileUrlAt(before, id) !== fileUrlAt(after, id));
+  if (replaced.length === 0) return { ...held, edited: after };
+  const failed = new Set(held.failed);
+  for (const id of replaced) failed.delete(id);
+  return { ...held, edited: after, failed };
+}
+function uploadDropped(held, initial, id, token) {
+  const uploads = new Map(held.uploads);
+  uploads.set(id, { token, over: fileUrlAt(held.edited ?? initial, id) });
+  return { ...held, failed: withoutId(held.failed, id), uploads };
+}
+function placeOf(held, token) {
+  for (const entry of held.uploads) if (entry[1].token === token) return entry;
+  return void 0;
+}
+function uploadFailed(held, initial, token) {
+  const place = placeOf(held, token);
+  if (!place) return held;
+  const [id, upload] = place;
+  const stillThere = fileUrlAt(held.edited ?? initial, id) === upload.over;
+  return {
+    ...held,
+    failed: stillThere ? withId(held.failed, id) : held.failed,
+    uploads: withoutEntry(held.uploads, id)
+  };
+}
+function uploadLanded(held, initial, token, value) {
+  const place = placeOf(held, token);
+  if (!place) return held;
+  const [id] = place;
+  const next = written(held, initial, (before) => setValueAtPath(before, id.split("."), value));
+  return { ...next, uploads: withoutEntry(next.uploads, id) };
+}
+function rowsMoved(held, initial, listId, order, seq) {
+  const before = held.edited ?? initial;
+  const rows = valueAt(before, listId);
+  if (!Array.isArray(rows)) return held;
+  const sources = order(rows);
+  if (!sources) return held;
+  const after = setValueAtPath(
+    before,
+    listId.split("."),
+    sources.map((source) => rows[source])
+  );
+  const destination = destinationOf(sources);
+  const failed = /* @__PURE__ */ new Set();
+  for (const id of held.failed) {
+    const moved = movedId(id, listId, destination);
+    if (moved !== void 0) failed.add(moved);
+  }
+  const uploads = /* @__PURE__ */ new Map();
+  for (const [id, upload] of held.uploads) {
+    const moved = movedId(id, listId, destination);
+    if (moved !== void 0) uploads.set(moved, upload);
+  }
+  const moves = [...held.moves, { seq, listId, order: sources }];
+  return { edited: after, failed, uploads, moves };
+}
+function isRow(rows, index) {
+  return Number.isInteger(index) && index >= 0 && index < rows.length;
+}
+function withoutRow(index) {
+  return (rows) => isRow(rows, index) ? rows.map((_, i) => i).filter((i) => i !== index) : null;
+}
+function rowMovedTo(from, to) {
+  return (rows) => {
+    if (!isRow(rows, from) || !isRow(rows, to) || from === to) return null;
+    const order = rows.map((_, i) => i).filter((i) => i !== from);
+    order.splice(to, 0, from);
+    return order;
+  };
+}
 function orderFields(fields, order) {
   if (!order || order.length === 0) return fields;
   const rank = (field) => {
@@ -2995,39 +3195,71 @@ function useMethodForm({
     if (typeof initialValues === "function") return initialValues(seedInputs(fields));
     return initialValues ?? seedInputs(fields);
   }, [initialValues, fields]);
-  const [edited, setEdited] = useState(null);
+  const store = useRef(NOTHING_HELD);
+  const [held, setHeld] = useState(NOTHING_HELD);
+  const commit = useCallback((next) => {
+    if (next === store.current) return;
+    store.current = next;
+    setHeld(next);
+  }, []);
+  const edited = held.edited;
+  const failedUploadIds = held.failed;
+  const uploadingIds = useMemo(
+    () => held.uploads.size === 0 ? EMPTY_IDS : new Set(held.uploads.keys()),
+    [held.uploads]
+  );
   const [given, setGiven] = useState(null);
-  const [uploadingIds, setUploadingIds] = useState(EMPTY_IDS);
-  const [failedUploadIds, setFailedUploadIds] = useState(EMPTY_IDS);
   const [attempted, setAttempted] = useState(false);
   const [resets, setResets] = useState(0);
-  const pendingUploads = useRef(/* @__PURE__ */ new Map());
   const uploadCounter = useRef(0);
+  const moveCounter = useRef(0);
   const values = edited ?? initial;
   const setValues = useCallback(
     (next) => {
       setGiven((previous) => previous ?? initial);
-      setEdited((previous) => typeof next === "function" ? next(previous ?? initial) : next);
+      commit(
+        written(
+          store.current,
+          initial,
+          (before) => typeof next === "function" ? next(before) : next
+        )
+      );
     },
-    [initial]
+    [initial, commit]
+  );
+  const moveRows = useCallback(
+    (listId, order2) => {
+      const seq = moveCounter.current + 1;
+      const next = rowsMoved(store.current, initial, listId, order2, seq);
+      if (next === store.current) return;
+      moveCounter.current = seq;
+      setGiven((previous) => previous ?? initial);
+      commit(next);
+    },
+    [initial, commit]
+  );
+  const removeItem = useCallback(
+    (listId, index) => moveRows(listId, withoutRow(index)),
+    [moveRows]
+  );
+  const moveItem = useCallback(
+    (listId, from, to) => moveRows(listId, rowMovedTo(from, to)),
+    [moveRows]
+  );
+  const reset = useCallback(
+    (next) => {
+      commit({ edited: next ?? null, failed: EMPTY_IDS, uploads: NO_UPLOADS, moves: NO_MOVES });
+      setGiven(next ?? null);
+      setAttempted(false);
+      setResets((count) => count + 1);
+    },
+    [commit]
   );
-  const reset = useCallback((next) => {
-    pendingUploads.current.clear();
-    setEdited(next ?? null);
-    setGiven(next ?? null);
-    setUploadingIds(EMPTY_IDS);
-    setFailedUploadIds(EMPTY_IDS);
-    setAttempted(false);
-    setResets((count) => count + 1);
-  }, []);
   const dropFile = useMemo(() => {
     if (!uploadFile) return void 0;
     return (id, file) => {
       const token = ++uploadCounter.current;
-      pendingUploads.current.set(id, token);
-      const current = () => pendingUploads.current.get(id) === token;
-      setUploadingIds((previous) => withId(previous, id));
-      setFailedUploadIds((previous) => withoutId(previous, id));
+      commit(uploadDropped(store.current, initial, id, token));
       const path = id.split(".");
       let upload;
       try {
@@ -3035,23 +3267,21 @@ function useMethodForm({
       } catch (error) {
         upload = Promise.reject(error);
       }
-      upload.then(
-        (stored) => {
-          if (!current()) return;
-          const value = typeof stored === "string" ? { url: stored, filename: file.name } : { url: stored.url, filename: stored.filename ?? file.name };
-          setGiven((previous) => previous ?? initial);
-          setEdited((previous) => setValueAtPath(previous ?? initial, path, value));
-        },
-        () => {
-          if (current()) setFailedUploadIds((previous) => withId(previous, id));
+      const landed = upload.then((stored) => {
+        if (!placeOf(store.current, token)) {
+          throw new Error(
+            `A newer file, a reset or the removal of its row replaced the upload dropped at "${id}".`
+          );
         }
-      ).finally(() => {
-        if (!current()) return;
-        pendingUploads.current.delete(id);
-        setUploadingIds((previous) => withoutId(previous, id));
+        const value = typeof stored === "string" ? { url: stored, filename: file.name } : { url: stored.url, filename: stored.filename ?? file.name };
+        setGiven((previous) => previous ?? initial);
+        commit(uploadLanded(store.current, initial, token, value));
+        return value;
       });
+      landed.then(void 0, () => commit(uploadFailed(store.current, initial, token)));
+      return landed;
     };
-  }, [uploadFile, initial]);
+  }, [uploadFile, initial, commit]);
   const readiness = useMemo(() => computeReadiness(fields, values), [fields, values]);
   const inputs = useMemo(
     () => apiInputsFromRunValues(values, fields, contract.inputs),
@@ -3077,6 +3307,9 @@ function useMethodForm({
     attempted,
     touched,
     setValues,
+    removeItem,
+    moveItem,
+    rowMoves: held.moves,
     reset,
     attempt,
     resets,
@@ -3112,6 +3345,8 @@ function MethodFormFields({
     fields,
     values,
     setValues,
+    removeItem,
+    rowMoves,
     reset,
     attempted,
     touched,
@@ -3132,11 +3367,27 @@ function MethodFormFields({
       onDropFile: dropFile,
       uploadingIds,
       uploadErrors,
+      // A list's remove button goes through the form, which carries a failed
+      // upload, or one in flight, along with the rows it renumbers, and logs
+      // the move for every list to move its rows' identities the same way,
+      // whether the button or the host moved them.
+      onRemoveItem: removeItem,
+      rowMoves,
       allowUrl,
       resolveUrl,
       fileSource
     }),
-    [disabled, dropFile, uploadingIds, uploadErrors, allowUrl, resolveUrl, fileSource]
+    [
+      disabled,
+      dropFile,
+      uploadingIds,
+      uploadErrors,
+      removeItem,
+      rowMoves,
+      allowUrl,
+      resolveUrl,
+      fileSource
+    ]
   );
   const folds = (field) => {
     const value = ownProp(values, field.name);
@@ -6217,5 +6468,5 @@ function pdfFileName(field, value, baseName) {
 }
 
 export { BooleanField, ConceptPill, DEFAULT_FIELD_STRINGS, DateField, DocumentField, EN_FIELD_STRINGS, EnumField, FIELD_STRINGS_BY_LOCALE, FR_FIELD_STRINGS, FieldDomIdProvider, FieldPresentationProvider, FieldRenderer, FieldShell, FieldStringsProvider, FilePicker, FilePickerEntry, FillWithExample, HtmlPreview, ImageField, JsonView, ListField, Markdown, MethodForm, NumberField, ObjectField, OptionalToggle, PdfDownloadButton, ProseField, ResultEnvProvider, ResultField, ResultRoot, SUPPORTED_LOCALES, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StuffViewer, Switch, TextField, ToggleGroup, ToggleGroupItem, UnknownField, brandFillClass, brandFillInkClass, brandFillStrongClass, brandInkClass, cn, fieldControlClass, fieldStringsFor, humanizeFieldName, renderHtmlPdf, resolveHtmlStorageUrls, saveInBrowser, useFieldDomId, useFieldPresentation, useFieldStrings, useMethodForm, useProseImages, useResolveShareUrl, useResolveUrl, useResolvedUrl };
-//# sourceMappingURL=chunk-3XDR2C4I.js.map
-//# sourceMappingURL=chunk-3XDR2C4I.js.map
+//# sourceMappingURL=chunk-5IZWP2X4.js.map
+//# sourceMappingURL=chunk-5IZWP2X4.js.map