@pipelex/mthds-form 0.10.0 → 0.11.0

package/dist/{chunk-G6BWZUGV.js → chunk-E2IVBAW3.js}

@@ -203,6 +203,7 @@ var DEFAULT_FIELD_STRINGS = {
   dropToUpload: "Drop to upload",
   dropOrBrowse: "Drop a file or click to browse",
   pasteUrlInstead: "paste a URL instead",
+  uploadUnavailable: "Files cannot be uploaded here. Paste a link to the file instead.",
   urlPlaceholder: "https://\u2026",
   fileUrlAria: (label) => label ? `Link to the file for ${label}` : "Link to the file",
   uploadedFile: "Attached file",
@@ -278,7 +279,16 @@ function FieldShell({
       !required && /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-[10px] uppercase tracking-wider text-muted-foreground", children: s.optionalBadge })
     ] }),
     description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: description }),
-    isApp && error ? /* @__PURE__ */ jsx("div", { className: "rounded-lg ring-1 ring-destructive/70 ring-offset-4 ring-offset-background", children }) : children,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "space-y-2",
+          isApp && error && "rounded-lg ring-1 ring-destructive/70 ring-offset-4 ring-offset-background"
+        ),
+        children
+      }
+    ),
     error && /* @__PURE__ */ jsx("p", { className: "flex items-center gap-1 text-[11px] text-destructive", role: "alert", children: error })
   ] });
 }
@@ -348,9 +358,11 @@ function FileField({
   field,
   value,
   onDropFile,
+  allowUrl = true,
   onChange,
   id,
   uploading,
+  uploadError,
   resolveUrl,
   error,
   disabled,
@@ -372,16 +384,28 @@ function FileField({
   }, []);
   useEffect(() => () => setLocal(null), [setLocal]);
   const [rejected, setRejected] = useState(null);
+  const [dismissedUploadError, setDismissedUploadError] = useState(null);
+  useEffect(() => {
+    if (uploadError === void 0) setDismissedUploadError(null);
+    else setRejected(null);
+  }, [uploadError]);
+  const dismissUploadError = useCallback(() => {
+    setDismissedUploadError(uploadError ?? null);
+  }, [uploadError]);
+  const failure = uploadError !== void 0 && uploadError !== dismissedUploadError ? uploadError : null;
   const formats = field.formats;
   const hint = acceptLabel(formats);
   const accept = useMemo(() => acceptMap(formats), [formats]);
+  const canUpload = onDropFile !== void 0;
   const handleFile = useCallback(
     (file) => {
+      if (!onDropFile) return;
       if (!isAcceptedFile(formats, file)) {
         setRejected(file.name);
         return;
       }
       setRejected(null);
+      setDismissedUploadError(null);
       setLocal({ objectUrl: URL.createObjectURL(file), type: file.type });
       onDropFile(file);
     },
@@ -391,7 +415,9 @@ function FileField({
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     maxFiles: 1,
     multiple: false,
-    disabled: busy,
+    // Disabled, not merely unrendered, when there is no upload path: the hook
+    // cannot be skipped, and nothing may open a picker through it.
+    disabled: busy || !canUpload,
     // Filters the OS picker so a wrong file is hard to choose in the first
     // place. It is NOT the enforcement: a drag-and-drop bypasses the picker
     // entirely, and a browser reporting an empty `File.type` slips through
@@ -421,8 +447,9 @@ function FileField({
     setResolved(null);
     setPreviewOpen(false);
     setRejected(null);
+    dismissUploadError();
     onChange(void 0);
-  }, [setLocal, onChange]);
+  }, [setLocal, onChange, dismissUploadError]);
   const localIsCurrent = !!localPreview && (localPreview.boundUrl === void 0 || localPreview.boundUrl === value?.url);
   useEffect(() => {
     if (!localPreview) return;
@@ -447,19 +474,31 @@ function FileField({
     if (!previewOpen || !storageUri || localIsCurrent || !resolveUrl) return;
     let cancelled = false;
     void resolveUrl(storageUri).then((src) => {
-      if (!cancelled) setResolved(src ? { uri: storageUri, src } : null);
+      if (!cancelled) setResolved({ uri: storageUri, src: src || null });
     }).catch(() => {
-      if (!cancelled) setResolved(null);
+      if (!cancelled) setResolved({ uri: storageUri, src: null });
     });
     return () => {
       cancelled = true;
     };
   }, [previewOpen, storageUri, localIsCurrent, resolveUrl]);
-  const resolvedSrc = resolved && resolved.uri === storageUri ? viewableUrl(resolved.src) : void 0;
+  const resolvedSrc = resolved && resolved.uri === storageUri ? viewableUrl(resolved.src ?? void 0) : void 0;
   const previewSrc = (localIsCurrent ? localPreview?.objectUrl : void 0) ?? directSrc ?? resolvedSrc;
-  const previewPending = !previewSrc && !!storageUri && resolved?.uri !== storageUri;
+  const previewPending = !previewSrc && !!storageUri && !!resolveUrl && resolved?.uri !== storageUri;
+  const togglePreview = () => {
+    if (!previewOpen) setResolved((r) => r?.src === null ? null : r);
+    setPreviewOpen((v) => !v);
+  };
   const urlValue = value?.url ?? "";
   const urlText = presentation === "studio" || isReadableLink(urlValue) || urlValue === typedUrl ? urlValue : "";
+  if (!canUpload && !allowUrl) {
+    throw new Error(
+      `The file field at "${id}" has no way in: the form's environment supplies no onDropFile and sets allowUrl to false. Supply onDropFile so the file can be uploaded, or leave allowUrl unset so a link can be pasted.`
+    );
+  }
+  const linkOpen = allowUrl && (!canUpload || showUrl);
+  const noUploadLineShown = !canUpload && !hasFile && !uploading;
+  const noUploadLineId = `${domId}-no-upload`;
   return /* @__PURE__ */ jsxs(
     FieldShell,
     {
@@ -483,7 +522,7 @@ function FileField({
               onClear: clear,
               canPreview,
               previewOpen,
-              onTogglePreview: () => setPreviewOpen((v) => !v)
+              onTogglePreview: togglePreview
             }
           ),
           previewOpen && (previewSrc && isImage ? /* @__PURE__ */ jsx(ImagePreview, { src: previewSrc, filename: value?.filename }) : previewSrc && isPdf ? /* @__PURE__ */ jsx(PdfPreview, { src: previewSrc }) : previewPending ? /* @__PURE__ */ jsx("div", { className: "flex h-24 items-center justify-center rounded-md border border-border bg-muted", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : (
@@ -493,7 +532,19 @@ function FileField({
             // load, which is the one thing a refusal must not look like.
             /* @__PURE__ */ jsx("div", { className: "flex h-24 items-center justify-center rounded-md border border-border bg-muted", children: /* @__PURE__ */ jsx(ImageOff, { className: "h-5 w-5 text-muted-foreground" }) })
           ))
-        ] }) : (
+        ] }) : !canUpload ? (
+          // No upload path, so no dropzone and no picker: a control that takes a
+          // file with nowhere to send it drops the file without a word. The line
+          // says why the link input below is the way in, and the hint says what
+          // that link has to point at.
+          /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: uploading ? /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 text-[12px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
+            s.uploading
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { id: noUploadLineId, className: "text-[12px] text-muted-foreground", children: s.uploadUnavailable }),
+            hint && /* @__PURE__ */ jsx("p", { className: "font-mono text-[10.5px] text-muted-foreground", children: hint })
+          ] }) })
+        ) : (
           // `role="presentation"` and no tab stop: this div is the drop TARGET and
           // the visual affordance, and the control inside it is a real
           // `<input type="file">`, which already has the right role and now has a
@@ -535,39 +586,43 @@ function FileField({
             }
           )
         ),
-        rejected && !busy && /* @__PURE__ */ jsxs("p", { role: "alert", className: "text-[12px] text-destructive", children: [
+        !busy && (rejected ? /* @__PURE__ */ jsxs("p", { role: "alert", className: "text-[12px] text-destructive", children: [
           /* @__PURE__ */ jsx("span", { className: "font-mono", children: rejected }),
           " \u2014 ",
           s.unsupportedFileType(hint)
-        ] }),
-        !showUrl ? /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            disabled: busy,
-            onClick: () => setShowUrl(true),
-            className: "flex w-fit items-center gap-1 font-mono text-[11px] text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50",
-            children: [
-              /* @__PURE__ */ jsx(Link2, { className: "h-3 w-3" }),
-              s.pasteUrlInstead
-            ]
-          }
-        ) : /* @__PURE__ */ jsx(
+        ] }) : failure && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-[12px] text-destructive", children: failure })),
+        linkOpen ? /* @__PURE__ */ jsx(
           "input",
           {
             type: "text",
-            autoFocus: true,
+            id: canUpload ? void 0 : domId,
+            autoFocus: showUrl,
             value: urlText,
             disabled: busy,
             "aria-label": s.fileUrlAria(fieldLabel(field.title, field.name, presentation)),
+            "aria-describedby": noUploadLineShown ? noUploadLineId : void 0,
+            "aria-invalid": canUpload ? void 0 : !!error,
             placeholder: s.urlPlaceholder,
             onChange: (e) => {
               setLocal(null);
+              dismissUploadError();
               setTypedUrl(e.target.value);
               onChange(e.target.value ? { url: e.target.value } : void 0);
             },
             className: cn(fieldControlClass, "h-9 px-3 font-mono text-[12px]")
           }
+        ) : allowUrl && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: busy,
+            onClick: () => setShowUrl(true),
+            className: "flex w-fit items-center gap-1 font-mono text-[11px] text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50",
+            children: [
+              /* @__PURE__ */ jsx(Link2, { className: "h-3 w-3" }),
+              s.pasteUrlInstead
+            ]
+          }
         )
       ]
     }
@@ -1107,6 +1162,7 @@ function ListField({ field, value, onChange, id, error, env }) {
   const isApp = presentation === "app";
   const items = value ?? [];
   const [rowKeys, setRowKeys] = useRowKeys(items.length);
+  const [staleErrors, setStaleErrors] = useState(NO_ERRORS);
   const setItem = (index, itemValue) => {
     const next = items.slice();
     next[index] = itemValue;
@@ -1114,10 +1170,40 @@ function ListField({ field, value, onChange, id, error, env }) {
   };
   const removeItem = (index) => {
     setRowKeys((prev) => prev.filter((_, i) => i !== index));
+    setStaleErrors((prev) => withRenumberedErrors(prev, id, index, env?.uploadErrors));
     onChange(items.filter((_, i) => i !== index));
   };
   const addItem = () => onChange([...items, emptyValue(field.item)]);
   const busy = listIsBusy(id, env?.uploadingIds);
+  const hostErrors = env?.uploadErrors;
+  useEffect(() => {
+    setStaleErrors((prev) => {
+      if (prev.size === 0) return prev;
+      const next = new Map([...prev].filter(([key, message]) => hostErrors?.get(key) === message));
+      return next.size === prev.size ? prev : next;
+    });
+  }, [hostErrors]);
+  const rowEnv = useMemo(() => {
+    if (!env || staleErrors.size === 0) return env;
+    const drop = env.onDropFile;
+    return {
+      ...env,
+      uploadErrors: new Map(
+        [...env.uploadErrors ?? []].filter(([key, message]) => staleErrors.get(key) !== message)
+      ),
+      // A new file at a position is a new attempt there, so what the host says
+      // about that position from now on is about the file that is there.
+      onDropFile: drop ? (dropId, file) => {
+        setStaleErrors((prev) => {
+          if (!prev.has(dropId)) return prev;
+          const next = new Map(prev);
+          next.delete(dropId);
+          return next;
+        });
+        drop(dropId, file);
+      } : void 0
+    };
+  }, [env, staleErrors]);
   const isFull = field.maxItemCount !== void 0 && items.length >= field.maxItemCount;
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
@@ -1151,7 +1237,7 @@ function ListField({ field, value, onChange, id, error, env }) {
                 value: item,
                 onChange: (v) => setItem(index, v),
                 id: `${id}.${index}`,
-                env
+                env: rowEnv
               }
             ) }),
             /* @__PURE__ */ jsx(
@@ -1195,6 +1281,18 @@ function listIsBusy(id, uploadingIds) {
   for (const uploading of uploadingIds) if (uploading.startsWith(prefix)) return true;
   return false;
 }
+var NO_ERRORS = /* @__PURE__ */ new Map();
+function withRenumberedErrors(stale, listId, removed, hostErrors) {
+  if (!hostErrors?.size) return stale;
+  const prefix = `${listId}.`;
+  const next = new Map(stale);
+  for (const [key, message] of hostErrors) {
+    if (!key.startsWith(prefix)) continue;
+    const row = key.slice(prefix.length).split(".")[0] ?? "";
+    if (/^\d+$/.test(row) && Number(row) >= removed) next.set(key, message);
+  }
+  return next.size === stale.size && [...next].every(([k, m]) => stale.get(k) === m) ? stale : next;
+}
 function useRowKeys(length) {
   const [state, setState] = useState(() => ({
     keys: Array.from({ length }, (_, i) => i),
@@ -1261,6 +1359,7 @@ function UnknownField({ field, value, onChange, id, error, disabled }) {
 }
 function FieldRenderer({ field, value, onChange, id, error, env }) {
   const disabled = env?.disabled;
+  const drop = env?.onDropFile;
   switch (field.kind) {
     case "text":
       return /* @__PURE__ */ jsx(
@@ -1340,8 +1439,10 @@ function FieldRenderer({ field, value, onChange, id, error, env }) {
           field,
           value,
           onChange,
-          onDropFile: (file) => env?.onDropFile?.(id, file),
+          onDropFile: drop ? (file) => drop(id, file) : void 0,
+          allowUrl: env?.allowUrl,
           uploading: env?.uploadingIds?.has(id),
+          uploadError: env?.uploadErrors?.get(id),
           resolveUrl: env?.resolveUrl,
           id,
           error,
@@ -1355,8 +1456,10 @@ function FieldRenderer({ field, value, onChange, id, error, env }) {
           field,
           value,
           onChange,
-          onDropFile: (file) => env?.onDropFile?.(id, file),
+          onDropFile: drop ? (file) => drop(id, file) : void 0,
+          allowUrl: env?.allowUrl,
           uploading: env?.uploadingIds?.has(id),
+          uploadError: env?.uploadErrors?.get(id),
           resolveUrl: env?.resolveUrl,
           id,
           error,
@@ -2836,5 +2939,5 @@ function StuffViewer({
 }
 
 export { BooleanField, ConceptPill, DEFAULT_FIELD_STRINGS, DateField, DocumentField, EnumField, FieldDomIdProvider, FieldPresentationProvider, FieldRenderer, FieldShell, FieldStringsProvider, HtmlPreview, ImageField, JsonView, ListField, Markdown, NumberField, ObjectField, OptionalToggle, ProseField, ResultEnvProvider, ResultField, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StuffViewer, Switch, TextField, ToggleGroup, ToggleGroupItem, UnknownField, cn, downloadStuff, fieldControlClass, humanizeFieldName, useFieldDomId, useFieldPresentation, useFieldStrings, useProseImages, useResolveShareUrl, useResolveUrl, useResolvedUrl };
-//# sourceMappingURL=chunk-G6BWZUGV.js.map
-//# sourceMappingURL=chunk-G6BWZUGV.js.map
+//# sourceMappingURL=chunk-E2IVBAW3.js.map
+//# sourceMappingURL=chunk-E2IVBAW3.js.map